ES12 标准下的空位合并操作符-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，我们经常会遇到一些“偏移”问题。比如，我们想在一个数组中查找某个元素的索引，但是这个数组中可能存在空位，导致我们无法正确地得到索引值。在 ES12 标准中，新增了一个空位合并操作符（nullish coalescing operator），可以很好地解决这个问题。

空位问题

在 JavaScript 中，数组中的空位指的是数组中某些位置没有任何值。例如，下面的代码中，数组 arr 中的第二个元素和第四个元素都是空位。

const arr = [1, , 3, , 5];

对于这种情况，我们使用 forEach 方法遍历数组时，会跳过这些空位。

arr.forEach((item, index) => {
  console.log(index, item);
});
// 输出：
// 0 1
// 2 3
// 4 5

同样地，使用 indexOf 方法查找元素在数组中的索引时，也会受到空位的影响。

console.log(arr.indexOf(3)); // 输出 2
console.log(arr.indexOf(undefined)); // 输出 -1

由于空位的存在，上面的代码中，查找 3 的索引时可以得到正确的结果，但是查找 undefined 的索引时却返回了 -1，这并不是我们想要的结果。

在 ES12 标准中，新增了一个空位合并操作符 ??，可以很好地解决上述问题。空位合并操作符的语法如下：

a ?? b

如果 a 是 null 或 undefined 或空位，返回 b，否则返回 a。

借助空位合并操作符，我们可以修改上述代码，得到正确的结果。

console.log(arr.indexOf(3) ?? -1); // 输出 2
console.log(arr.indexOf(undefined) ?? -1); // 输出 -1

在上面的代码中，如果 indexOf 方法返回的是 null 或 undefined 或空位，就会返回 -1，否则返回 indexOf 方法的返回值。

下面是一个使用空位合并操作符的示例代码。

const arr = [1, , 3, , 5];
const index = arr.indexOf(3) ?? arr.indexOf(undefined) ?? -1;
console.log(index); // 输出 2

在上面的代码中，我们先使用空位合并操作符判断 indexOf(3) 的返回值是否为 null 或 undefined 或空位，如果是，则继续判断 indexOf(undefined) 的返回值是否为 null 或 undefined 或空位，如果都不是，则返回 -1。

在 JavaScript 中，空位是一个经常会被忽略的问题，但是它却可能导致一些错误的结果。在 ES12 标准中，新增的空位合并操作符可以很好地解决这个问题。我们可以借助空位合并操作符，判断一个值是否为 null 或 undefined 或空位，从而得到正确的结果。

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