ECMAScript 2019 的 nullish 合并运算符是 JavaScript 中的一个新特性，它可以在处理值为 null 或 undefined 的情况下，提供更加精准的运算结果和代码可读性。在本文中，我们将详细讲解这个新特性的用法和优势，并提供一些实际示例代码和指导建议。
- nullish 合并运算符的背景和目的
在 JavaScript 中，由于历史原因和语言异构性，有许多逻辑运算符（例如 || 和 &&），它们在处理特定的数据类型或值时，存在一些问题或不一致的情况。其中一个典型的例子就是对于 falsy 值（包括 0、''、false 和 null 等），常常会与合法的数值或字符串混淆或被忽略。
为了解决这些问题，ES2015 引入了严格比较运算符（=== 和 !==），以及箭头函数、let/const 关键字等新语法特性。然而，尽管这些更新已经显著提高了 JavaScript 代码的质量和可维护性，但对于某些特殊的情况和需求，它们依然不够灵活和易用。
因此，ES2019 引入了 nullish 合并运算符 ??，它可以有效处理 null 和 undefined 值，并在逻辑运算中提供更加准确和直观的结果。具体来说，nullish 合并运算符的目的有以下几个方面：
- 在判断变量为 null 或 undefined 时，不再与 falsy 值混淆，而是明确地表示为 null 或 undefined；
- 在逻辑运算中，可以更加精确地区分 null 和 undefined，避免出现“短路”的错误结果；
- 在编写代码时，提供一种更加简洁和可读的语句，特别是在使用 ES6/ES7 的对象和函数默认值语法时，可以更好地处理边界情况。
- nullish 合并运算符的基本用法和语法
nullish 合并运算符的语法结构是 ??. 它的作用是在左右两个表达式中，选取第一个“nullish”（即 null 或 undefined）的表达式作为返回值，如果两个都不为“nullish”，则选取左边的表达式。例如：
const a = null; const b = undefined; const c = 'foo'; const d = 0;
console.log(a ?? b); // 输出: undefined console.log(a ?? c); // 输出: 'foo' console.log(d ?? c); // 输出: 0
在上述代码中，a 和 b 分别为 null 和 undefined，因此 a ?? b 的结果是 undefined。c 是一个合法的字符串，因此 a ?? c 的结果为 'foo'。而对于 d ?? c，虽然 d 的值为 0，但它不属于“nullish”值，因此返回值是 0 而非 c。
需要注意的是，nullish 合并运算符只对两个表达式中的第一个进行判断，并不会对后面的表达式做任何处理或计算。如果需要同时比较多个表达式，需要用到括号和“||”运算符组合起来。例如：
const a = undefined; const b = 0; const c = 'foo'; const d = null;
console.log((a || b) ?? (c || d)); // 输出: 0
在这个例子中，我们首先计算了两组表达式：(a || b) 和 (c || d)。第一组表达式的返回值是 0，因为 undefined || 0 的结果为 0。然后，我们使用 nullish 合并运算符 ??，选取第一组表达式作为返回值，因为它不为“nullish”，而第二组表达式中的 c 值非常明显不为“nullish”。
- nullish 合并运算符的进阶应用和示例
除了基本用法之外，nullish 合并运算符还支持一些进阶的应用和语法，可以进一步提高代码的可读性和灵活性。以下是一些示例：
3.1 支持函数默认参数值
在 ES6/ES7 中，我们可以使用函数默认参数值来设置函数的默认值，但是在某些情况下需要支持额外的边界参数，需要用到 nullish 合并运算符。例如：
function doSomething(value, option = {}) { const {prefix, suffix} = option; const result = value.trim();
return ${prefix ?? 'Hello'}, ${result}, ${suffix ?? 'World'};
}
console.log(doSomething(' JS')); // 输出: Hello, JS, World
在这个例子中，我们定义了一个 doSomething 函数，接受一个字符串 value 和一个 option 对象作为参数。如果 option 为“nullish”值，那么我们将它默认设置为空对象。然后，我们将 option 解构成 prefix 和 suffix 两个变量，使用 nullish 合并运算符 ??，将它们的默认值设置为“Hello”和“World”。
通过这种方式，我们可以简化函数的定义和调用，并且增强了函数的兼容性和健壮性。例如，当我们调用 doSomething(' JS', {prefix:'Hi'}) 时，它的返回值应该是 Hi, JS, World。
3.2 支持多个 nullish 合并运算符的组合
在某些场景下，我们需要同时判断多个变量或对象是否为“nullish”值，需要使用多个 nullish 合并运算符的组合。例如：
const a = undefined; const b = null; const c = {}; const d = ''; const e = 0;
console.log(a ?? b ?? c ?? d ?? e); // 输出: {}
在这个例子中，我们定义了一个 a 到 e 的变量，分别赋值为 undefined、null、空对象、空字符串和数字 0。然后，我们使用多个 nullish 合并运算符 ??，对它们进行比较。最终，我们选取第一个不为“nullish”的表达式作为返回值，即 c。
通过这种方式，我们可以快速和灵活地比较多个变量或对象，并将结果组合成一个可用的对象或值。例如，当我们需要比较多个参数的默认值时，可以使用类似的语法：
function doAnotherThing(firstVal, secondVal, thirdVal) { const result = firstVal ?? secondVal ?? thirdVal ?? 'default';
return result.toUpperCase(); }
console.log(doAnotherThing('', null, 0)); // 输出: DEFAULT
在这个例子中，我们定义了一个 doAnotherThing 函数，接受三个参数：firstVal、secondVal 和 thirdVal。然后，我们使用 nullish 合并运算符 ??，将它们的默认值设置为相应的参数值。最终，我们选取第一个不为“nullish”的参数作为返回值，并将它转换成大写格式。
- 总结和建议
在本文中，我们讲解了 ECMAScript 2019 中的 nullish 合并运算符的基本用法、语法和应用，以及进一步的示例和建议。通过学习这个新特性，我们可以更加准确和直观地处理 null 和 undefined 值，并在编写代码时提高效率和可读性。
对于前端开发人员，建议在使用 nullish 合并运算符时，注意以下的一些事项：
- 在处理边界值或默认参数时，尽量使用 nullish 合并运算符，以避免出现“短路”的错误结果；
- 在多个 nullish 合并运算符组合时，考虑使用括号和注释来增加代码的可读性；
- 在使用 nullish 合并运算符时，尽量避免混合使用其他逻辑运算符，以避免出现意外问题和错误。
当然，nullish 合并运算符只是 ECMAScript 2019 中的一个新特性，我们还需要结合其他语言特性和开发经验来编写高效和优雅的 JavaScript 代码。希望本文对您有所启发和帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65463abc7d4982a6eb0108fa