在前端开发中我们经常需要编写表达式，对变量进行默认值处理。在过去，我们通常使用 || 运算符来实现默认值的赋值操作，但是这种方式可能会导致一些意想不到的结果。ES10 的 nullish coalescing 操作符可以帮助我们优化表达式的书写方式。
nullish coalescing 操作符是什么？
在 ES10 中，nullish coalescing 操作符是 ?? 符号。它的作用是在值为 null 或 undefined 时返回默认值。当变量的值为 null 或 undefined 时，?? 操作符会返回其后面的表达式。
我们来看一个例子：
let foo = null; let bar = undefined; let baz = 'hello world'; console.log(foo ?? 'default'); // 'default' console.log(bar ?? 'default'); // 'default' console.log(baz ?? 'default'); // 'hello world'
在上面的例子中，我们可以看到，当 foo 和 bar 的值为 null 或 undefined 时，?? 操作符返回了默认值 'default'。当 baz 的值为字符串时，?? 操作符返回了变量的值。
使用 nullish coalescing 操作符优化表达式
在过去，我们使用 || 运算符来为变量赋予默认值。例如：
let foo = null; let bar = undefined; let baz = 'hello world'; console.log(foo || 'default'); // 'default' console.log(bar || 'default'); // 'default' console.log(baz || 'default'); // 'hello world'
我们可以发现，在 foo 和 bar 的值为 null 或 undefined 时，使用 || 运算符仍然返回了默认值。但是，当 baz 的值为 false 时，|| 运算符也将返回默认值。
使用 nullish coalescing 操作符可以避免这种情况。例如：
let foo = ''; let bar = 0; let baz = false; console.log(foo ?? 'default'); // '' console.log(bar ?? 'default'); // 0 console.log(baz ?? 'default'); // false
在上面的例子中，当 foo 的值为 '' 时，使用 ?? 运算符不会返回默认值，而是返回变量的值。同样地，当 bar 的值为 0 时，?? 运算符也不会返回默认值，而是返回变量的值。只有在变量值为 null 或 undefined 时才会返回默认值。
实际应用场景
使用 nullish coalescing 操作符可以简化表达式的书写方式。例如，我们可以使用以下代码来获取 URL 中的参数：
const params = new URLSearchParams(window.location.search);
const page = params.get('page') ?? 1;
const limit = params.get('limit') ?? 10;
console.log(`page: ${page}, limit: ${limit}`);在上面的代码中，我们使用 ?? 操作符为 page 和 limit 变量赋予默认值。如果 URL 中没有对应的参数，它们将使用默认值。这样，我们可以简化代码并提高可读性。
总结
nullish coalescing 操作符是 ES10 中的一个新特性，它可以帮助我们优化表达式的书写方式，避免意想不到的结果。使用 ?? 操作符可以简化代码并提高可读性，特别是在获取 URL 参数等场景中更为重要。我们应该在实际开发中使用 nullish coalescing 操作符来为变量赋予默认值，从而编写更加优美的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd960a95b1f8cacdce6e0d