用了之后直呼超香的运算符
随着JS的发展,出现了越来越多的新特性,今天一起分享几个超香的运算符吧,欲罢不能的那种。
1. 可选链 ?.
可选链有多香还要说吗?现在不让我使用可选链的话,我大概会砸键盘,HHH。尤其是对于取层级很深的某个字段,例如:
interface MeasureInfo {
name?: string;
info?: {
message?: string;
}
}
interface Data {
name: string;
item?: {
measureInfo?: MeasureInfo
}
}
const data: Data = {
name: 'hello',
item: {
measureInfo: {
name: 'measure',
info: {
message: 'message',
}
}
}
}
假如我们现在需要读取 message
字段的值,我们只需要这样写:
const message = data?.item?.measureInfo?.info?.message;
而在没有可选链之前,我们需要层层判断:
let message: string;
if(data && data.item && data.item.measureInfo && data.item.measureInfo.info) {
message = data.measureInfo.info.message;
}
在真实的项目中,数据结构往往更加复杂,层级更深,如果没有可选链,层层判断的代码写起来真的是一言难尽。以前没得选就算了,现在必须用可选链。
2. 空值合并运算符 ??
当左侧操作数为 null
或 undefined
时,返回右侧操作数,否则返回左侧操作数。
比如,如果某个字段返回的值是 null
或 undefined
时,使用默认值。
const item = res.num ?? '-';
在没有 ??
之前,我们需要这样写:
let item = res.num;
if(res.num === null || res.num === undefined) {
item = '-';
}
当然啦,如果你项目中使用了 lodash
的话,还可以这样写:
import { isNil } from 'lodash';
let item = res.num;
if(isNil(res.num)) {
i = '-';
}
3. 逻辑空赋值 ??=
逻辑空赋值运算符 (x ??= y
) 仅在 x
为 nullish
(null
或 undefined
) 时对其赋值。等价于 x ?? (x = y)
。
interface Item {
name: string;
age?: number | null;
}
const item: Item = {
name: 'foo'
}
item.age ??= 20; //当 item.age 为 null 或者 undefined 时,设置其值为 20
在 ??=
之前,我们可以这样写:
item.age ?? (item.age = 20);
4. 逻辑或赋值 ||=
逻辑空赋值运算符 (x ||= y
) 仅在 x
为假时对其赋值, 等价于 x || (x = y)
const obj = { name: 'jack' };
obj.name ||= 'lau';
console.log(obj.name); //jack
obj.age ||= 20;
console.log(obj.age); //20
5. 逻辑与赋值 &&=
逻辑空赋值运算符 (x &&= y
) ,仅在 x
为真时对其赋值,等价于 x && (x = y)
。
let a = 10;
let b = 20;
a &&= b;
console.log(a);//20
//等价于
a = (a && b);
如果发现错误,欢迎在评论区指出~
参考链接:
https://javascript.plainenglish.io/es2021-logical-assignment-operators-in-javascript-c6a8290dc510 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment
评论