ES11 新特性：Nullish Coalescing 运算符-JavaScript中文网-JavaScript教程资源分享门户

随着 Javascript 的不断发展，它的新增特性也越来越多。其中，ES11 中最具代表性的新特性之一就是 Nullish Coalescing 运算符，这个运算符可以帮助开发者更好地处理空值（undefined 和 null）。

概述

在 Javascript 中，当变量值为 undefined 或 null 时，它们会被视为 falsy 值。在实际开发中，我们有时会需要判断一个变量是否为真实有效的值，而不是空值。通常的做法是使用逻辑或（||）运算符。

const value = undefined || 'default';
console.log(value); // 'default'

在上述代码中，由于变量 value 的值为 undefined，逻辑或运算符会将其转换为 falsy 值，因此会返回默认值。

然而，当我们希望变量的值为 0 或空字符串时，逻辑或运算符会误认为这些值也是空值。此时，Nullish Coalescing 运算符就派上了用场。

Nullish Coalescing 运算符

Nullish Coalescing 运算符使用两个问号（??）表示。它只会在变量值为 null 或 undefined 时返回默认值，而对于其他 falsy 值，则会返回该变量的实际值。

const value = null ?? 'default';
console.log(value); // 'default'

const zero = 0 ?? 'default';
console.log(zero); // 0

const empty = '' ?? 'default';
console.log(empty); // ''

通过上面的示例，我们可以看到在使用 Nullish Coalescing 运算符时，如果变量的实际值为 0 或空字符串，它们并不会被视为 null 或 undefined，因此不会触发返回默认值的逻辑。

应用场景

在使用 Nullish Coalescing 运算符时，我们通常会使用它来赋予变量默认值。这种做法在处理配置文件或者 API 返回值等场景中非常常见。例如：

const config = {
    host: 'localhost',
    port: 8080,
    timeout: 5000
};

const host = config.host ?? '127.0.0.1';
const port = config.port ?? 80;
const timeout = config.timeout ?? 3000;

上述代码中，我们利用 Nullish Coalescing 运算符为配置对象（config）中的三个属性赋予了默认值。如果这些属性值为 null 或 undefined，我们会用默认值替代它们。

除此之外，Nullish Coalescing 运算符还可以用于处理函数参数。

function getUsers(page = 1, limit = 10) {
    // ...
}

getUsers(0, 20); // page 为 0，并非 undefined，因此不会使用默认值
getUsers(null, 20); // page 为 null，则使用默认值 1
getUsers(undefined, 20); // page 为 undefined，则使用默认值 1

总结

Nullish Coalescing 运算符是 ES11 中一个非常实用的新特性。当我们需要给变量赋默认值时，可以考虑使用这个运算符。同时，为了保证代码的兼容性，在使用这个运算符时，我们需要在 build 过程中引入 polyfill。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65afc5b5add4f0e0ff93a7b6