JavaScript - 可选链、空值合并运算符

短命女 2022-11-20 06:56 153阅读 0赞

# 可选链操作符 #

**可选链**操作符( **`?.`** )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。

通过连接的对象的引用或函数可能是 `undefined` 或 `null` 时，可选链操作符提供了一种方法来简化被连接对象的值访问。

当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。

### Example： ###

let nestedProp = obj.first && obj.first.second;

为了避免报错，在访问`obj.first.second`之前，要保证 `obj.first` 的值既不是 `null`，也不是 `undefined`。如果只是直接访问 `obj.first.second`，而不对 `obj.first` 进行校验，则有可能抛出错误。

有了可选链操作符（`?.`），在访问 `obj.first.second` 之前，不再需要明确地校验 `obj.first` 的状态，再并用短路计算获取最终结果：

let nestedProp = obj.first?.second;

通过使用 `?.` 操作符取代 `.` 操作符，JavaScript 会在尝试访问 `obj.first.second` 之前，先隐式地检查并确定 `obj.first` 既不是 `null` 也不是 `undefined`。如果`obj.first `是 `null` 或者 `undefined`，表达式将会短路计算直接返回 `undefined`。

# 空值合并运算符 #

**空值合并操作符**（**`??`**）是一个逻辑操作符，当左侧的操作数为 [`null`][null] 或者 [`undefined`][undefined] 时，返回其右侧操作数，否则返回左侧操作数。

**`||` **是一个布尔逻辑运算符，左侧的操作数会被强制转换成布尔值用于求值。任何假值（`0`， `''`， `NaN`， `null`， `undefined`）都不会被返回。

### ?? ###

const nullValue = null;
    const emptyText = ""; // 空字符串，是一个假值，Boolean("") === false
    const someNumber = 42;
    
    const valA = nullValue ?? "valA 的默认值";
    const valB = emptyText ?? "valB 的默认值";
    const valC = someNumber ?? 0;
    
    console.log(valA); // "valA 的默认值"
    console.log(valB); // ""（空字符串虽然是假值，但不是 null 或者 undefined）
    console.log(valC); // 42

### || ###

let count = 0;
    let text = "";
    
    let qty = count || 42;
    let message = text || "hi!";
    console.log(qty);     // 42，而不是 0
    console.log(message); // "hi!"，而不是 ""

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

[更多 - 可选链][-]

[更多 - 空值合并运算符][- 1]

[null]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/null
[undefined]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined
[-]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/%E5%8F%AF%E9%80%89%E9%93%BE
[- 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator