5年前，学习 null 和 undefined ，现在有了新的认知，看看这位人才怎么说？

谁借莪１个温暖的怀抱￠ 2022-09-02 00:42 18阅读 0赞

> 作者：Michael Thiessen  
> 译者：前端小智  
> 来源：dev

> 有梦想，有干货，微信搜索 **【大迁世界】** 关注这个在凌晨还在刷碗的刷碗智。
> 
> 本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

许多编程语言都有一个称为`null`的非值。它指示一个变量当前不指向一个对象，例如，当它还没有初始化的时候。

相比之下，JavaScript有两个这样的非值：`undefined`和`null`。在这篇博文中，我们将研究它们有什么不同，以及如何最好地使用或避免它们。

## 1. undefined vs. null ##

这两种值非常相似，经常互换使用。因此，它们的区别是微妙的。

### 1.1 ECMAScript语言规范:undefined vs. null ###

ECMAScript语言规范对其描述如下。

*  `undefined`是 “当一个变量没有被赋值时使用”
 *  `null` “表示有意不存在任何对象值”

### 1.2 两个非值–一个无法消除的错误 ###

在JavaScript中拥有两个非值现在被认为是一个设计错误（甚至被JavaScript的创造者Brendan Eich认为）。

那为什么不从 JavaScript 中删除其中的一个值呢？JavaScript 的一个核心原则是绝不破坏向后兼容。这个原则有很多好处。它最大的缺点是，设计上的错误无法被删除。

### 1.3 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() {
      return;
    }
    assert.equal(myFunc(), undefined);

如果一个参数`x`被省略了，语言将该参数初始化为`undefined`。

function myFunc() {
      return;
    }
    assert.equal(myFunc(), undefined);
    myFunc();

通过`obj?.someProp`的可选链路，如果obj未定义或为空，则返回未定义。

> undefined?.someProp
    undefined
    > null?.someProp
    undefined

## 3.null 出现情况 ##

一个对象的原型要么是一个对象，要么在原型链的末端是`null`。`Object.prototype`没有原型。

> Object.getPrototypeOf(Object.prototype)
    null

如果我们将一个正则表达式（如`/a/`）与一个字符串（如`'x'`）相匹配，我们要么得到一个带有匹配数据的对象（如果匹配成功），要么得到空（如果匹配失败）。

> /a/.exec('x')
    null

JSON数据格式不支持`undefined`，只支持`null`。

> JSON.stringify({a: undefined, b: null})
    '{"b":null}'

## 4.特别处理 undefined 或 null 的运算符 ##

### 4.1 undefined 和参数默认值 ###

在以下情况下，将使用参数默认值。

*  缺少一个参数。
 *  一个参数的值是`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`指定一个参数默认值。当这个参数缺失时，我们把这个状态转发给`concat()`，让它选择一个默认值。

### 4.2 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');

### 4.3 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 access
    func?.(«arg0», «arg1») // optional function or method call

### 4.4 undefined 和 null 和 nullish 聚结 ###

nullish 合并算子`??`如果一个值`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'

null合并赋值操作符`??=`:

## 5. 处理 undefined 和 null ##

下面分享一下我们自己的代码中处理`undefined` 和`null`的最常见方法。

### 5.1 undefined 或 null 都不能作为实际值使用 ###

举例，我们可能希望一个属性`file.title`永远存在，并且永远是一个字符串。有两种常见的方法来实现这一点。

这里，只检查`undefined`和`null`，而不检查一个值是否是字符串。你必须自己决定是否要把它作为一个额外的安全措施来实施。

#### 5.1 undefined 和 null 都是禁止的 ####

如下所示

function createFile(title) {
      if (title === undefined || title === null) {
        throw new Error('`title` must not be nullish');
      }
      // ···
    }

为什么选择这种方法？

我们想把`undefined`和`null`当作一样的东西，因为JavaScript代码经常这样做–比如说。

// 检测一个属性是否存在
    if (!obj.requiredProp) {
      obj.requiredProp = 123;
    }
    
    const myValue = myParameter ?? 'some default';

如果我们的代码中出现了问题，出现了`undefined`或`null`，我们希望它尽可能快地失败。

#### 5.1.2 undefined 和 null 都会触发默认值 ####

如下所示

function createFile(title) {
      title ??= '(Untitled)';
      // ···
    }

我们不能在这里使用参数缺省值，因为它只由`undefined` 触发。相反，我们依靠nullish 合并赋值运算符`??=`。

为什么选择这种方法？

*  我们想把`undefined`和`null`同等对待（见上一节）。
 *  我们希望我们的代码能够稳健地、无声地处理 `undefined` 和`null`。

### 5.2 undefined 或 null 都是“关闭”值 ###

例如，我们可能希望一个属性`file.title`是一个字符串或 “关闭”（文件没有标题）。有几种方法可以实现这一点。

#### 5.2.1 null是 "关闭的 "值 ####

function createFile(title) {
      if (title === undefined) {
        throw new Error('`title` must not be undefined');
      }
      return {title};
    }

另外，`undefined`可以触发一个默认值。

function createFile(title = '(Untitled)') {
      return {title};
    }

为什么选择这种方法？

*  我们需要一个表示“关闭”的非值。
 *  我们不希望我们的非值触发参数默认值和解构默认值。
 *  我们想把非值字符串化为JSON（这是我们不能用`undefined`做的）。

#### 5.2.2 undefined 是"关闭的 "值。 ####

function createFile(title) {
      if (title === null) {
        throw new Error('`title` must not be null');
      }
      return {title};
    }

为什么选择这种方法？

*  我们需要一个表示“关闭”的非值。
 *  我们确实想让我们的非值触发参数默认值和解构默认值。

#### 5.2.3 为什么不同时使用undefined和null作为 "关闭 "的值？ ####

当接收一个值时，把`undefined`和`null`都当作 "不是一个值 "是有意义的。然而，当我们创建值时，我们希望不含糊，以便处理这些值时保持简单。

这指向了一种不同的方法。如果我们需要一个 "关闭"的值，但又不想使用`undefined`或`null`作为这样的值，怎么办？请往下看。

### 5.3 处理“关闭”的其他方式 ###

#### 5.3.1 特殊值 ####

我们可以创建一个特殊的值，每当属性`.title`被关闭时，我们就使用这个值。

const UNTITLED = Symbol('UNTITLED');
    const file = {
      title: UNTITLED,
    };

#### 5.3.2 空对象模式 ####

空对象模式来自于面向对象的编程。

*  一个共同的超类的所有子类都有相同的接口。
 *  每个子类都实现了一个实例运行的不同模式。
 *  其中一个模式是 “null”。

在下面的例子中，`UntitledFile`实现了 “null” 模式。

// 抽象的超类
    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)',
      ]);

我们也可以只对标题使用空对象模式（而不是对整个文件对象）。

#### 5.3.3 Maybe 类型 ####

Maybe 类型是一种函数编程技术。

我们可以通过Arrays对 "just "和 "nothing "进行编码。我们的方法的好处是，它得到了TypeScript的良好支持（通过判别性联合）。

## 6.我的方法 ##

我不喜欢用`undefined`作为 "关闭 "的值，有三个原因。

*  `undefined`经常意外地出现在JavaScript中。
 *  `ndefined`会触发参数和结构化的默认值（出于同样的原因，有些人喜欢`undefined`）。

因此，如果我需要一个特殊的值，我会使用以下两种方法中的一种。

*  我使用`null`作为一个 "关闭 "的值。(作为一个旁观者，这种方法在TypeScript中得到了比较好的支持）。)
 *  我通过上述的技术之一来避免`undefined`和`null`。这样做的好处是比较干净，坏处是涉及更多的工作。

~ 完，我是小智，刷碗去了，现在唯有刷碗才能体验到生活中的一点乐趣，逃 ~

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：https://2ality.com/2021/01/undefined-null-revisited.html

## 交流 ##

> 有梦想，有干货，微信搜索 **【大迁世界】** 关注这个在凌晨还在刷碗的刷碗智。
> 
> 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70]

[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70]: /images/20220829/d77efeee84bf4d1c94ae455933e18de3.png