JS中一些高效运算符
JavaScript 每年都会发一个新版本,里面也会新增一些操作更加便利、高效的运算符。下面是盘点下几个高效的魔法运算符。
链运算符( ? )
当使用某个结构比较深的属性,同时又无法确定所有的父级一定存在时,我们需要进行一连串的判断,例如一个数据结构:
const student = {
score: {
math: 98,
}
};
if (student && student.score) {
console.log(student.score.math);
}
//
const getStudentDetil = async () => {
const studentDetilRes = await GetStudentData({});
setStudentData(studentDetilRes?.detail);
};
可选链运算符会在链路上遇到 null 或者 undefined 时,直接返回 undefined,而不会抛出错误异常
获取深层次的属性
console.log(student?.score?.math);
执行一个可选的方法
同时在执行一个可能存在的函数时,也可以用到
// getScore是一个可选参数,要么是undefined,要么是一个函数
const Student = ({ getScore }: { getScore?: () => void }) => {
useEffect(() => {
getScore?.(); // 当getScore存在时,正常执行getScore()方法
}, []);
return <div></div>;
};
或者我们执行一个 dom 元素的方法时,也可以使用。
document.querySelector
会返回两种类型,当 dom 元素真实存在时会返回该元素,否则返回 null
。当我们要调用某个方法时,总是要先确定该 dom 元素是存在的:
const dom = document.querySelector('.score');
if (dom) {
dom.getBoundingClientRect(); // 当dom元素存在时,才执行该方法
}
// 使用可选链操作符 可以直接调动
document.querySelector('.score')?.getBoundingClientRect();
获取数组中的值
若数组存在,则获取某个下标的值,我们现在也不用再判断数组是否存在了,可以直接使用:arr?.[1]
若一个结构比较复杂时,各种类型都有,这里我们要执行数组 math 下标 2 的方法:
const student = {
score: {
math: [98, 67, () => {
return 99;
},
],
},
};
// 执行👇
student?.score?.math?.[2]?.(); // 99
无法进行赋值操作
可选链运算符只能执行获取操作,是无法进行赋值操作的。
例如给一个可能是数组或者 dom 元素赋值时,会直接抛出语法异常:
arr?.[1] = 2; // x
document.querySelector('.score')?.innerHTML = 98; // x
当我们执行上面的语句时,会抛出如下的提示:
Uncaught SyntaxError: Invalid left-hand side in assignment
即不能给左侧的可选链进行赋值操作。
或运算( || )和与运算( && )的赋值操作
score = score || 1;
age = age && 18;
// 可以简写为:
score ||= 1; // 等同于score = score || 1
age &&= 18; // 等同于age = age && 18
双问号运算符( ?? )
双问号运算符??
,我理解是为了解决或运算符||而设计出来的。
或运算符的操作||
-->当左侧的数据为假值
(数字 0, 布尔类型的 false,空字符串,undefined, null)时,则执行右侧的语句
双问号运算符??
–>只会在左侧为 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
空赋值运算符(??=)
与非空运算符相关,仅当值为null
或 undefined
时,此赋值运算符才会赋值。
let x = null
let y = 5
console.log(x ??= y) // => 5
console.log(x = (x ?? y)) // => 5
//空赋值运算符 与 函数默认值 的区别:
function getScore1(options) {
options.math ??= 1;
options.assess ??= 'easy';
return options;
}
function getScore2(math=1, assess='easy') {
return {math, assess};
}
getScore1({math: null, assess: null}) // {speed: 1, diff: 'easy'}
getScore2(undefined, null) // {speed: 1, diff: null}
双星号运算符 ( ** )
双星号运算符**
(求幂运算符)相当于 js 中 的 Math.pow() , 他执行的是一个幂运算
1 ** 2; // 1
2 ** 4; // 2 的 4 次幂 ==》 Math.pow(2,4);
其他的一些运算符
JavaScript 算数运算符
+
加法
-
减法
*
乘法
/
除法
%
取模(余数)
++
递加
--
递减
JavaScript 类型运算符
typeof
返回变量的类型。instanceof
返回 true,如果对象是对象类型的实例。
逗号运算符
我们赋值操作时,经常用的 ,
也是一个运算符 ---- 逗号运算符 😂
常用于变量声明中,可以在一条语句中执行多个运算
var num = 1, num2 = 2, num3 = 3;
我们有 babel 帮助转换的情况下,可以适当的在代码运用这些运算符,能够极大地简化我们的代码
本文借阅 微信公众号, “ 前端小茶馆 ”