JavaScript 高效魔法运算符详解：可选链、双问号与逻辑赋值

JavaScript 每年发布新版本，其中不断引入更便捷高效的运算符。本文将盘点几种提升开发效率的魔法运算符。

1. 可选链运算符

当需要访问深层嵌套属性且无法确保所有父级存在时，传统做法需进行多重判断。例如面对如下数据结构：

const student = {
  score: {
    math: 98,
  },
};

若需获取最内层 math 属性的值：

if (student && student.score) {
  console.log(student.score.math);
}

1.1 获取深层次的属性

使用可选链运算符后，判断逻辑大幅简化。该运算符在链式调用中若遇到 null 或 undefined，将直接返回 undefined，而不会抛出错误异常：

console.log(student?.score?.math);

1.2 执行一个可选的方法

在执行可能存在的函数时，该运算符同样适用。例如在 React 组件中，传入的方法可能是可选的：

// getScore 是一个可选参数，要么是 undefined，要么是一个函数
const Student = ({ getScore }: { getScore?: () => void }) => {
  useEffect(() => {
    // 当 getScore 存在时，正常执行 getScore()方法
    getScore?.();
  }, []);

  return <div></div>;
};

或者在操作 DOM 元素方法时，也可以使用。

document.querySelector 的返回值有两种情况：DOM 元素存在时返回该元素，否则返回 null。熟悉 TypeScript 的开发者知道，调用方法前通常需确认 DOM 元素存在：

const dom = document.querySelector('.score');
if (dom) {
  dom.getBoundingClientRect(); // 当 dom 元素存在时，才执行该方法
}

使用可选链操作符时，可直接调用：

document.querySelector('.score')?.getBoundingClientRect();

1.3 获取数组中的值

若数组存在，获取指定下标的值也不再需要额外判断，可直接使用：

arr?.[1]; // 若 arr 存在时，则正常获取 arr[1]中的值

上述三种场景可以组合使用。当结构复杂且类型多样时，例如执行数组 math 下标 2 的方法：

const student = {
  score: {
    math: [
      98,
      67,
      () => {
        return 99;
      },
    ],
  },
};

执行：

student?.score?.math?.[2]?.(); // 99

还有这种操作？

1.4 无法进行赋值操作

可选链运算符仅支持获取操作，不支持赋值。

例如尝试给可能的数组或 DOM 元素赋值时，会直接抛出语法异常：

arr?.[1] = 2; // x
document.querySelector('.score')?.innerHTML = 98; // x

执行上述语句时，会抛出如下提示：

Uncaught SyntaxError: Invalid left-hand side in assignment

即不能对左侧的可选链进行赋值操作。

2. 双问号运算符

双问号运算符 ?? 的设计初衷是为了解决或运算符 || 的局限性。

回顾或运算符的行为：当左侧数据为假值（数字 0、布尔类型 false、空字符串、undefined、null）时，执行右侧语句。

false || 123;
0 || 123;
'' || '123';
undefined || 123;
null || 123;

但在某些场景下，false 和 0 是合法值，若使用或运算符会导致逻辑错误。

例如以下示例，当 score 为空时默认值为 1。若输入正常值 0，本应返回 0（实际却返回了 1）：

const getSCore = (score: number) => {
  return score || 1;
};

getScore(0); // 1

此时，双问号运算符 ?? 派上用场。它仅在左侧为 undefined 或 null 时，才执行右侧语句。

const getSCore = (score: number) => {
  return score ?? 1;
};

getScore(0); // 0

同时，双问号运算符可与 = 结合形成赋值操作：当左侧为 null 或 undefined 时，将右侧语句的结果赋值给左侧变量：

score ??= 1; // 1

我读书多，不会骗你

3. 或运算和与运算的赋值操作

此前使用或运算符进行赋值操作时，写法如下：

score = score || 1;
age = age && 24;

现在可直接简写为：

score ||= 1; // 等同于 score = score || 1
age &&= 24; // 等同于 age = age && 24

4. 双星号运算符

双星号运算符 ** 较早引入 JS，虽使用频率较低，但执行的是幂运算，等同于 Math.pow()。

2 ** 10; // 1024, 2的10次方，等同于 Math.pow(2, 10);

5. 总结

以上所有样例均已在 chrome90 上运行通过。

在已有 babel 帮助转换的情况下，可适当在代码中运用这些运算符，能极大简化代码逻辑。

到此这篇关于JS中一些高效运算符总结的文章就介绍到这了,更多相关JS高效运算符内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！