随着 JavaScript 语言的不断演进，新的语法和特性在不断涌现。其中，ES12 中的 Nullish coalescing operator 就是一项非常实用的语法，它可以帮助我们更加方便地处理变量为空的情况。本文将为大家介绍 Nullish coalescing operator 与 || 操作符的区别和使用场景，并通过示例代码来帮助大家更好地理解。
Nullish coalescing operator 是什么？
Nullish coalescing operator（空位合并运算符）是一个新的 JavaScript 语法，它用来判断某个变量是否为 null 或 undefined，如果是，则使用默认值。Nullish coalescing operator 的语法格式如下：
var result = value1 ?? value2;
其中，value1 可以是任意类型的值，value2 是一个默认值。如果 value1 的值为 null 或 undefined，则 result 的值为 value2，否则 result 的值为 value1。
Nullish coalescing operator 和 || 操作符的区别
在处理变量为空的情况时，我们通常会用到 || 操作符来设置默认值。例如，我们可以通过以下代码来设置一个变量的默认值：
var result = value || defaultValue;
在这段代码中，如果 value 的值为 falsy（包括 null、undefined、空字符串 ""、数字 0、false 和 NaN 等），则 result 将会被赋值为 defaultValue，否则 result 的值将会是 value 的值。
然而，|| 操作符在处理变量为空的情况时存在一个问题，那就是它无法区分 falsy 值和 null、undefined。因此，如果我们使用 || 操作符来设置默认值，可能会出现一些意外的结果。例如，如果我们设置一个默认值为 0 的变量，那么如果原始值为 undefined，使用 || 操作符会将变量的值设为 0，这通常不是我们想要的结果。
为了解决这个问题，ES12 引入了 Nullish coalescing operator（??），它只有在变量为 null 或 undefined 时才使用默认值，而对于 falsy 值（如空字符串和数字 0），它不会认为变量为空。因此，使用 Nullish coalescing operator 可以更加精确地处理变量为空的情况。
Nullish coalescing operator 和 || 操作符的使用场景
Nullish coalescing operator 和 || 操作符的区别可以让我们更加准确地处理变量为空的情况，但在实际使用中，我们应该如何选择合适的操作符呢？下面是一些常见的使用场景，供大家参考。
在设置默认参数时使用 Nullish coalescing operator
Nullish coalescing operator 最适合在设置默认参数时使用。例如，我们可以使用以下代码来定义一个函数，在调用函数时可以通过参数修改函数的默认值：
-- -------------------- ---- ------- -- -- -- -------- -------- ---------------- - --- ----- - ------------- -- --- --- ---- - ------------ -- -- -- --- - -- -- ------- ---------- -------- ----- -------- ---------------- - --- ----- - ------------- -- --- --- ---- - ------------ -- -- -- --- -展开代码
在这个例子中，如果我们使用 || 操作符设置默认值，那么当 options.limit 或 options.skip 的值为 falsy 时，limit 或 skip 的值将会被设置为默认值 10 或 0。但如果我们使用 Nullish coalescing operator 设置默认值，则只有当 options.limit 或 options.skip 的值为 null 或 undefined 时，limit 或 skip 的值才会被设置为默认值。
在处理对象属性时使用 Nullish coalescing operator
当我们处理一个对象的属性时，也可以使用 Nullish coalescing operator 来避免空值的影响。例如，假设我们有以下的对象：
var obj = { name: 'Tom', age: 20, address: null, };
我们可以使用以下代码来获取 address 属性的值：
// 使用 || 操作符获取属性值 var address = obj.address || 'Unknown'; // 使用 Nullish coalescing operator 获取属性值 var address = obj.address ?? 'Unknown';
在这个例子中，如果我们使用 || 操作符获取 address 属性，那么当 address 的值为空时，它会被替换为 'Unknown'。但如果我们使用 Nullish coalescing operator 获取属性值，则只有当 address 的值为 null 或 undefined 时，它才会被替换为 'Unknown'。
建议
在实际开发中，建议尽可能地使用 Nullish coalescing operator 来处理变量为空的情况，这可以确保我们的代码更加精确和健壮。
当然，也有一些情况下，如果需要一些特殊的处理，我们可能也会使用 || 操作符来设置默认值。但在这些情况下，我们应该尽可能地了解变量的数据类型，以确保代码的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b7f048306f20b3a6548f16
