JavaScript中一些高效的魔法运算符

现在每年都会发布新版Javascript&＃xff0c;还会增加一些操作更方便高效的操作符。今天&＃xff0c;我们将盘点几个高效的魔术运算符。

1.可选链式运算符
以前&＃xff0c;当我们想要使用一个具有深层结构的属性&＃xff0c;并且不确定所有的父项都存在时&＃xff0c;我们需要做出一系列的判断&＃xff0c;比如一个数据结构:

const student &＃61; {
  score: {
    math: 98,
  },
};

当我们想要得到最里面的数学属性值时:

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

1.1获取深层属性
但是&＃xff0c;当我们使用可选的链式算子时&＃xff0c;判断就简单多了。当可选的链运算符在链接上遇到null或undefined时&＃xff0c;它将直接返回undefined&＃xff0c;而不会引发错误异常:

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

1.2执行可选方法
它也可以在执行一个可能的函数时使用。例如&＃xff0c;在反应组件中&＃xff0c;传入的方法是可选的:

// getScore是一个可选参数&＃xff0c;可以是未定义的&＃xff0c;也可以是函数
const Student &＃61;({ GetScore }:{ GetScore&＃xff1f;:()&＃61;> void }) &＃61;> {
useEffect(() &＃61;> {
//当getScore存在时&＃xff0c;正常执行getScore()方法
getScore&＃xff1f;。();
}, []);

返回

Document.querySelector返回两种类型。如果dom元素存在&＃xff0c;它将返回它&＃xff0c;否则它将返回null。每个编写过typescript的人都知道&＃xff0c;当我们想要调用一个方法时&＃xff0c;我们总是必须首先确保dom元素存在:

const DOM &＃61; document . query selector(&＃39;。score’)&＃xff1b;
if (dom) {
DOM . getboundingclientrect()&＃xff1b;//此方法仅在dom元素存在时执行
}
当使用可选的链式运算符时&＃xff0c;您可以直接调用它:

document.querySelector(&＃39;.score&＃39;)?.getBoundingClientRect();

1.3获取数组中的值
如果数组存在&＃xff0c;获取下标的值。现在不用判断数组是否存在&＃xff0c;可以直接使用:

arr&＃xff1f;。[1];//如果arr存在&＃xff0c;正常获取arr[1]中的值
以上三种情况也可以结合使用。如果一个结构是复杂的&＃xff0c;那么就有各种类型&＃xff0c;所以在这里我们将执行数组数学下标2的方法:

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

执行:

student?.score?.math?.[2]?.(); // 99
没想到会有效果&＃xff01;

1.4不能执行分配操作
可选的链操作符只能执行获取操作&＃xff0c;但不能执行分配操作。

例如&＃xff0c;当给可能的数组或dom元素赋值时&＃xff0c;将直接引发语法异常:

arr?.[1] &＃61; 2; // x
document.querySelector(&＃39;.score&＃39;)?.innerHTML &＃61; 98; // x

当我们执行上述语句时&＃xff0c;我们将抛出以下提示:

未捕获语法错误:赋值中的左侧无效

也就是说&＃xff0c;左边的可选链不能赋值。

2.双问号运算符
双问号运算符&＃xff1f;&＃xff1f;我理解它是为了解决or运算符| |。

我们先来回顾一下OR运算符的操作。当左边的数据为假值(数字0&＃xff0c;布尔类型false&＃xff0c;空字符串&＃xff0c;未定义&＃xff0c;空)时&＃xff0c;执行右边的语句。

false || 123;
0 || 123;
&＃39;&＃39; || &＃39;123&＃39;;
undefined || 123;
null || 123;

但是&＃xff0c;在某些情况下&＃xff0c;false和0是正常值&＃xff0c;但如果使用or运算符&＃xff0c;则会导致错误。

例如&＃xff0c;在以下示例中&＃xff0c;当分数为空时&＃xff0c;默认值为1。当输入正常值0时&＃xff0c;应返回0(但实际返回1):

const GetScore &＃61;(score:number)&＃61; > {
返回得分| | 1&＃xff1b;
};

GetScore(0)&＃xff1b;// 1
这时候我们用双问号运算符&＃xff1f;&＃xff1f;。只有当左侧未定义或为空时&＃xff0c;双问号运算符才会在右侧执行语句。

const GetScore &＃61;(score:number)&＃61; > {
返回分数&＃xff1f;&＃xff1f;1;
};

GetScore(0)&＃xff1b;// 0
同时&＃xff0c;双问号运算符也可以与&＃61;组合成为赋值运算。当左侧为空或未定义时&＃xff0c;右侧语句的结果被分配给左侧变量:

得分&＃xff1f;&＃xff1f;&＃61; 1;// 1
我读了很多&＃xff0c;不会骗你

3.或“与”运算的运算和赋值运算
当我们使用or运算符执行赋值操作时&＃xff0c;我们写道:

score &＃61; score | | 1&＃xff1b;
年龄&＃61;年龄& & 24&＃xff1b;
现在可以缩写为:

分数| | &＃61; 1&＃xff1b;//相当于score &＃61; score || 1
年龄& & &＃61; 24&＃xff1b;//相当于age &＃61; age && 24
4.双星算子
双星算子* *更早引入js&＃xff0c;但是我们用的比较少。实际上&＃xff0c;它执行的是幂运算&＃xff0c;相当于Math.pow()。

2 ** 10;// 1024&＃xff0c;2的10次方&＃xff0c;相当于Math.pow(2&＃xff0c;10)&＃xff1b;
5.总结
以上所有样品均已在chrome90上运行。