欢送有趣味的小伙伴，一起做点有意义的事！本文译者：chressYu
我发动了一个周刊翻译打算，仓库地址，拜访地址
当初还很缺气味相投的小伙伴，纯属个人兴趣，当然对于晋升英语和前端技能也会有帮忙，要求：英语不要差的离谱、github纯熟应用、有恒心、虚心、对本人做的事负责。
想参加的小伙伴，能够wx私信，也能够给仓库发issue留言，我博客也有具体的集体联系方式：daodaolee.cn
少数编程语言都有一个“空值”的定义，为 null。它示意变量以后不指向对象——例如，当它尚未初始化时。
与其余语言相比，JavaScript蕴含两个这样的空值：undefined 和 null。在这篇文章中，咱们将会探讨他们之间的区别，以及如何去最好的应用或者防止应用他们。
undefined vs. null
这两个值是十分类似的，并且能够调换应用的。所以他们的区别是很奥妙的。
ECMAScript上对 undefined和null的定义：
ECMAScript对 undefined和null的定义如下：
- undefinde：当一个变量并没有被赋予一个值。
- null：并没有示意任何对象；
咱们将在前面看到作为程序员如何最好的解决这两个值。
两个空值--一个无奈删除的谬误
Javascript有两个空值到当初都被认为是一个谬误的设计(即使是JavaScript的创建者，Brendan Eich)。
那么为什么不从其中删除一个呢？一个JavaScript的外围准则就是永远不要突破向下的兼容。这个准则有很多益处。但它最大的毛病就是无奈去除谬误的设计。
undefined 和 null的历史
在Java中(对JavaScript有很多启发)，初始化值依赖于变量的动态类型：
初始化的时候就蕴含了null对象。
任何根底类型都蕴含它初始化的值。例如：int类型被初始化为0.
在JavaScript中，每一个变量都能够同时蕴含对象值和默认值。因而，如何null意味着“不是一个对象”，JavaScript就须要一个初始值，这个初始值意味着“既不是对象也不是一个初始化的值”。这个根底值就是undefined。
undefined是如何产生的
如果一个变量myVar没有初始化一个值，那么他的值就是undefined：
let myVar;assert.equal(myVar, undefined);如果一个对象中没有unknownProp属性，当拜访该属性时就会生成undefined：
const obj = {};assert.equal(obj.unknownProp, undefined);如果一个函数没有明确的返回值，那么这个函数会返回undefined：
function myFunc() {}assert.equal(myFunc(), undefined);如果一个函数的return并没有返回任何值，那么他会返回undefined：
function myFunc() { return;}assert.equal(myFunc(), undefined);如果一个函数的形参x在调用时被省略，那么它会是undefined：
function myFunc(x) { assert.equal(x, undefined);}myFunc();如果一个变量是undefined或者null时，当应用链式调用 ojb?someProp时会返回undefined：
undefined?.someProp// undefinednull?.someProp// undefinednull是如何产生的
一个对象的原型要么是一个对象，要么在原型链的开端是 null。Prototype 没有原型:
Object.getPrototypeOf(Object.prototype)// null如果咱们通过一个正则表达式/a/，用这个正则去匹配字符串'x'，如果匹配失败了，则会返回一个null：
/a/.exec('x')// null在调用JSON.stringify时，JSON是只反对null的，不反对undefined
JSON.stringify({a: undefined, b: null})// '{"b":null}'如何解决undefined和null
undefined 和参数的默认值
参数默认值用于:
- 当参数短少时
- 入参未定义时
例如:
function myFunc(arg='abc') { return arg;}assert.equal(myFunc('hello'), 'hello');assert.equal(myFunc(), 'abc');assert.equal(myFunc(undefined), 'abc');undefined同样能够触发形参应用默认值。
上面的例子阐明了哪些地方是有用的:
function concat(str1='', str2='') { return str1 + str2;}function twice(str) { // (A) return concat(str, str);}在第 A 行中，咱们不为 str 指定参数默认值。当短少这个参数时，twice函数会应用默认值。
undefined 和解构默认值
在解构时赋予默认值相似于函数的默认值，如果在解构时，变量没有匹配到或者匹配到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 抛出异样时就会产生这种状况。
- 否则，返回 value.prop。
function getProp(value) { // optional static property access return value?.prop;}assert.equal(getProp({prop: 123}), 123);assert.equal(getProp(undefined), undefined);assert.equal(getProp(null), undefined);上面的操作是相似的：
obj?.[«expr»] // optional dynamic property accessfunc?.(«arg0», «arg1») // optional function or method callundefined、null 以及空值合并符
空值合并运算符 ?? 是让咱们在遇到undefined和null时，应用默认值：
undefined ?? 'default value'// 'default value'null ?? 'default value'// 'default value'0 ?? 'default value'// 0123 ?? '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'});如何解决null和undefined
上面的大节解释了在咱们本人的代码中解决未定义和 null 的最常见办法。
undefined 和null 都不做为理论值
例如，咱们可能心愿属性 file.title 始终存在并始终为字符串。有两种常见的办法能够达到这个目标。
请留神，在这篇博文中，咱们只思考undefined 和 null，而不关注值是否是字符串。您必须本人决定是否将其实现为附加的安全措施。
undefined和null都被禁止应用
例如：
function createFile(title) { if (title === undefined || title === null) { throw new Error('`title` must not be nullish'); } // ···}为什么抉择这种办法？
咱们心愿共事解决undefined和null，因而咱们常常会这么写，例如:
// Detecting if a property existsif (!obj.requiredProp) { obj.requiredProp = 123;}// Default values via nullish coalescing operatorconst myValue = myParameter ?? 'some default';- 如果咱们的代码因为undefined和null导致一些问题，咱们心愿他尽快抛出。
遇到undefined 和null时，触发默认值。
例如：
function createFile(title) { title ??= '(Untitled)'; // ···}咱们不能在这里应用函数的默认值，因为它只能被undefined触发，因而咱们在这里应用了空值合并运算符 ??=
为什么抉择这种办法？
- 咱们心愿对undefined和null的解决是统一的。
- 咱们心愿代码能精确地解决undefined和null
undefined或null示意空值
例如，咱们可能心愿属性 file.title 为字符串或空值(file没有title属性)。有几种办法能够达到这个目标。
这里用null示意空值
例如：
function createFile(title) { if (title === undefined) { throw new Error('`title` must not be undefined'); } return {title};}或者undefined触发一个默认值：
function createFile(title = '(Untitled)') { return {title};}为什么抉择这种形式：
- 咱们须要一个空值来示意没有
- 咱们不心愿null触发参数默认值和解构默认值。
- 咱们心愿将空值字符串化为 JSON (所以不能应用undefined)。
undefined来表白一个空值
例如：
function createFile(title) { if (title === null) { throw new Error('`title` must not be null'); } return {title};}为什么抉择这种形式：
- 咱们须要一个空值来示意没有
- 咱们的确心愿空值触发参数默认值和解构默认值。
undefined的一个毛病是，它通常是由 JavaScript 无心中创立的: 由一个未初始化的变量，属性名中的一个输出谬误，遗记从函数返回一些货色，等等。
为什么不能同时应用undefined 和null
当接管到一个值时，将undefined和 null 都视为“空值”是有意义的。因为，当咱们创立一个值时，咱们心愿是明确的，以便能够不便的解决这个值。
当咱们不想应用undefined或者null来示意空值时，该如何解决呢？请往下看！
其余形式示意一个空值
非凡的一个值
咱们能够创立一个非凡的值，来示意 .title是空的：
const UNTITLED = Symbol('UNTITLED');const file = { title: UNTITLED,};空对象模式
空对象模式源自面向对象编程:
- 公共类都继承雷同的接口。
- 每个子类实现一个实例在其中操作的不同模式。
- 这些模式之一是“空”。
在上面的示例中，UntitledFile 实现了“ null”模式。
// Abstract superclassclass 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)', ]);咱们也能够只应用空对象模式File来解决title属性(而不是解决整个文件对象)。
有可能的类型
写出所有有可能的类型，来解决问题：
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)', ]);咱们能够通过数组对“ just”和“nothing”进行编码。咱们办法的益处是，它失去了TypeSript的良好反对。
相干链接
原文地址： undefined vs. null revisited
翻译打算原文