重新審視 undefined 和 null
點擊上方“前端簡報”，選擇“設為星標”
第一時間關注技術干貨！
本文已獲得原作者的獨家授權，有想轉載的朋友們可以在后臺聯(lián)系我申請開白哦！ PS：歡迎掘友們向我投稿哦，被采用的文章還可以送你掘金精美周邊！
原文地址：undefined vs. null revisited 原文作者：Dr. Axel Rauschmayer 譯文出自：掘金翻譯計劃 本文永久鏈接：https://github.com/xitu/gold-miner/blob/master/article/2021/undefined-null-revisited.md 譯者：霜羽 Hoarfroster 校對者：Moonball、felixliao
重新審視 undefined 和 null
很多的編程語言都有一種表示空值的類型，叫做 null。它指示了一個變量當前并沒有指向任何對象 —— 例如，某個變量還沒有初始化的時候。
作為不同，JavaScript 則擁有兩種表示空值的類型，一種是 undefined，另一種則是 null。在這篇文章中，我們將測試它們的區(qū)別，以及如何去挑選最佳的類型或避免去使用它們。
undefined vs. null
兩個值都很是相像，并且通常被相互替代著使用，也因此，他們之間的區(qū)別很是細微。
undefined、null 在ECMAScript 語言標準上的對比
ECMAScript 語言標準按照如下內容描述他們：
undefined是在一個變量還沒有被賦值時候使用的。出處null表示任何有意地缺省對象值。出處
我們等下就會探索一下作為程序員，我們應該如何去以最佳的方式使用這兩個值。
兩個空值 —— 一個不能彌補的錯誤
在 JavaScript 中同時有兩個表示空值的值現(xiàn)在被認為是一個設計錯誤（哪怕是 JavaScript 之父 Brendan Eich 也這么認為）。
那么為什么不從 JavaScript 中刪除這兩個值之一呢？JavaScript 的一項核心原則是永不破壞向后的兼容性。該原則具有好處，但同時也擁有著最大的缺點，即無法彌補設計錯誤。
undefined 和 null 的歷史
在 Java（影響了 JavaScript 很多方面的語言）中初始值依賴于一個變量的靜態(tài)類型：
以對象值為類型的變量初始化為 null。每個基本類型都擁有它的初始值，例如 int整型對應0。
在 JavaScript 中，每一個變量都可以存儲對象值或原始值，意味著如果 null 表示不是一個對象，那么 JavaScript 也同時需要一個初始值表示既不是一個對象也不擁有原始值，這就是 undefined。
undefined 的出現(xiàn)場合
如果一個變量 myVar 還沒有被初始化，那么它的值就是 undefined：
let myVar;
assert.equal(myVar, undefined);
如果一個屬性 .unknownProp 不存在，訪問這個屬性就會生成 undefined 值：
const obj = {};
assert.equal(obj.unknownProp, undefined);
如果一個函數(shù)沒有明確返回任何內容，那么默認就會返回 undefined：
function myFunc() {
}
assert.equal(myFunc(), undefined);
如果一個函數(shù)擁有一個 return 語句但沒有指定任何返回值，那么也會默認返回 undefined：
function myFunc() {
return;
}
assert.equal(myFunc(), undefined);
如果一個參數(shù) x 沒有傳實參，那么就會被初始化為 undefined：
function myFunc(x) {
assert.equal(x, undefined);
}
myFunc();
通過 obj?.someProp 訪問的可選鏈在obj 是 undefined 或 null 的時候返回 undefined：
> undefined?.someProp
undefined
> null?.someProp
undefined
null 的出現(xiàn)場合
一個對象的原型要么是另一個對象，要么是原型鏈末尾的 null。Object.prototype 沒有原型：
> Object.getPrototypeOf(Object.prototype)
null
如果我們使用一個正則表達式（例如 /a/）匹配一個字符串（例如 x），我們要么得到一個存儲著匹配數(shù)據(jù)的對象（如果匹配成功），要么得到 null（如果匹配失?。?。
> /a/.exec('x')
null
JSON 數(shù)據(jù)格式 不支持 undefined，只支持 null：
> JSON.stringify({a: undefined, b: null})
'{"b":null}'
專門用來對付 undefined 和 null 的操作符
undefined 以及默認參數(shù)值
一個參數(shù)的默認值會在以下情況下被使用：
這個參數(shù)被我們忽略掉了。 這個參數(shù)被賦予 undefined值。
舉個例子：
function myFunc(arg = 'abc') {
return arg;
}
assert.equal(myFunc('hello'), 'hello');
assert.equal(myFunc(), 'abc');
assert.equal(myFunc(undefined), 'abc');
當指向它的值為一個元值時，undefined 也會觸發(fā)默認參數(shù)值。
以下的例子示范了這個特性有用的地方：
function concat(str1 = '', str2 = '') {
return str1 + str2;
}
function twice(str) { // (A)
return concat(str, str);
}
在 A 行，我們并沒有制定參數(shù) str 的默認值，而當這個參數(shù)被忽略掉的時候，我們將該狀態(tài)轉發(fā)到 concat()，讓其選擇默認值。
undefined，解構默認值
解構下的默認值的工作方式與參數(shù)默認值類似 —— 如果變量在數(shù)據(jù)中不匹配或與 undefined 匹配，則使用它們：
const [a = 'a'] = [];
assert.equal(a, 'a');
const [b = 'b'] = [undefined];
assert.equal(b, 'b');
const {prop: c = 'c'} = {};
assert.equal(c, 'c');
const {prop: d = 'd'} = {prop: undefined};
assert.equal(d, 'd');
undefined、null 和可選鏈
如果通過 value?.prop 使用了可選鏈：
如果 value是undefined或null的，將會返回undefined。也就是說，如果value.prop拋出錯誤，就會返回undefined。否則會返回 value.prop.
function getProp(value) {
// 可選的靜態(tài)屬性訪問
return value?.prop;
}
assert.equal(
getProp({prop: 123}), 123);
assert.equal(
getProp(undefined), undefined);
assert.equal(
getProp(null), undefined);
以下的兩個操作也很是類似的工作：
obj?.[?expr?] // 可選的動態(tài)屬性訪問
func?.(?arg0?, ?arg1?) // 可選的函數(shù)或方法調用
undefined、null 和空合并
空合并操作符 ?? 可讓我們在一個值是 undefined 或 null 時，使用默認值：
> undefined ?? 'default value'
'default value'
> null ?? 'default value'
'default value'
> 0 ?? 'default value'
0
> 123 ?? 'default value'
123
> '' ?? 'default value'
''
> 'abc' ?? 'default value'
'abc'
空合并賦值操作符 ??= 合并了空合并操作符與賦值操作符：
function setName(obj) {
obj.name ??= '(Unnamed)';
return obj;
}
assert.deepEqual(
setName({}),
{name: '(Unnamed)'}
);
assert.deepEqual(
setName({name: undefined}),
{name: '(Unnamed)'}
);
assert.deepEqual(
setName({name: null}),
{name: '(Unnamed)'}
);
assert.deepEqual(
setName({name: 'Jane'}),
{name: 'Jane'}
);
處理 undefined 與 null
以下的部分解釋了在我們代碼中最常見的處理 undefined 和 null 的方法：
實際值既不是 undefined 也不是 null
例如，我們可能希望屬性 file.title 始終存在并且始終是字符串，那么有兩種常見的方法可以實現(xiàn)此目的。
請注意，在此博客文章中，我們僅檢查 undefined 和 null，而不檢查值是否為字符串。你需要自己決定是否要添加檢查器，作為附加的安全保障措施。
同時禁止 undefined 和 null
例如：
function createFile(title) {
if (title === undefined || title === null) {
throw new Error('`title` must not be nullish');
}
// ···
}
為什么選擇這個方法？
我們希望以相同的方式處理
undefined和null，因為 JavaScript 代碼就是經(jīng)常那樣做，例如：// 檢查一個屬性是否存在
if (!obj.requiredProp) {
obj.requiredProp = 123;
}
// 通過空合并操作符使用默認值
const myValue = myParameter ?? 'some default';如果我們的代碼中出現(xiàn)了問題，讓
undefined或null出現(xiàn)了，我們需要讓它盡早結束執(zhí)行并拋出錯誤。
同時對 undefined 和 null 使用默認值
例如：
function createFile(title) {
title ??= '(Untitled)';
// ···
}
我們不能使用參數(shù)默認值，因為它只會被 undefined 觸發(fā)。在這里，我們依賴于空合并賦值運算符 ??=。
為什么選擇這個方法？
我們希望以相同方式對待 undefined和null（見上文）。我們希望我們的代碼無聲但有力地對待 undefined和null。
undefined 或 null 是一個被忽略的值
例如，我們可能希望屬性 file.title 是字符串或是被忽略的值（即 file 沒有標題），那么有幾種方法可以實現(xiàn)此目的。
null 是被忽略值
例如：
function createFile(title) {
if (title === undefined) {
throw new Error('`title` 不應該是 undefined');
}
return {title};
}
或者，undefined 也可以觸發(fā)默認值：
function createFile(title = '(Untitled)') {
return {title};
}
為什么要選擇這個方法？
我們需要一個空值來表示被忽略。 我們不希望空值觸發(fā)參數(shù)默認值并破壞默認值。 我們想將空值字符串化為 JSON（這是我們無法對 undefined進行的處理）。
undefined 是被忽略的值
例如：
function createFile(title) {
if (title === null) {
throw new Error('`title` 不應該是 null');
}
return {title};
}
為什么選擇這種方法？
我們需要一個空值來表示被忽略。 我們確實希望空值觸發(fā)參數(shù)或解構默認值。
undefined 的一個缺點是它通常是在 JavaScript 中意外賦予的 —— 在未初始化的變量，屬性名稱中的錯字，忘記從函數(shù)中返回內容等。
為什么不同時將 undefined 和 null 看作是被忽略的值？
當接收到一個值時，將 undefined 和 null 都視為 “空值” 是有意義的。但是，當我們創(chuàng)建值時，我們不希望模棱兩可，以避免不必要的麻煩。
這指向了另一種角度：如果我們需要一個被忽略的值，但又不想使用 undefined 或 null 作為被忽略值時該怎么辦？看看下文吧：
其他處理被忽略值的方法
特殊值
我們可以創(chuàng)建一個特殊值，每當屬性被忽略時 .title 時就使用該值：
const UNTITLED = Symbol('UNTITLED');
const file = {
title: UNTITLED,
};
Null 對象模式
Null 對象模式 來自 OOP（面對對象編程）：
一個公共超類的所有子類都具有相同的接口。 每個子類實現(xiàn)一種不同的模式供其實例使用。 這些模式之一是 null。
在下文中，UntitledFile 繼承了 “null” 模式。
// Abstract superclass
class File {
constructor(content) {
if (new.target === File) {
throw new Error('Can’t instantiate this class');
}
this.content = content;
}
}
class TitledFile extends File {
constructor(content, title) {
super(content);
this.title = title;
}
getTitle() {
return this.title;
}
}
class UntitledFile extends File {
constructor(content) {
super(content);
}
getTitle() {
return '(Untitled)';
}
}
const files = [
new TitledFile('Dear diary!', 'My Diary'),
new UntitledFile('Reminder: pick a title!'),
];
assert.deepEqual(
files.map(f => f.getTitle()),
[
'My Diary',
'(Untitled)',
]);
我們也可以只為標題（而不是整個文件對象）使用空對象模式。
“也許”類型
“也許”類型是一種函數(shù)編程技術：
function getTitle(file) {
switch (file.title.kind) {
case 'just':
return file.title.value;
case 'nothing':
return '(Untitled)';
default:
throw new Error();
}
}
const files = [
{
title: {kind: 'just', value: 'My Diary'},
content: 'Dear diary!',
},
{
title: {kind: 'nothing'},
content: 'Reminder: pick a title!',
},
];
assert.deepEqual(
files.map(f => getTitle(f)),
[
'My Diary',
'(Untitled)',
]);
我們本可以通過數(shù)組對 "just" 和 "nothing" 進行編碼，但我們的方法的好處是 TypeScript 對其有很好的支持（通過可辨識聯(lián)合）。
我的方法
我不喜歡將 undefined 用作被忽略的值的原因有三個：
undefined通常是在 JavaScript 中意外出現(xiàn)的。undefined會觸發(fā)參數(shù)和解構的默認值（出于某些原因，某些人更喜歡undefined）。
因此，如果需要特殊值，可以使用以下兩種方法之一：
我將 null用作被忽略的值。（順便說一句，TypeScript 相對較好地支持了這種方法。）我通過上述的其中一種技術避免了同時出現(xiàn) undefined和null的情況，優(yōu)點在乎讓代碼更干凈，而缺點在于需要做出更多的工作。
如果發(fā)現(xiàn)譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改并 PR，也可獲得相應獎勵積分。文章開頭的 本文永久鏈接 即為本文在 GitHub 上的 MarkDown 鏈接。