一、简介
本文章用于记录js中常用的运算符,主要可能是ES6版本以上的,大家在项目中使用时需要注意兼容性。
二、常用运算符
1.可选链 ?.
当我们读取一个对象的属性的属性时,如果一级属性为空,就会报错了
例如:
const obj = {
// people: {
// name: 11
// }
}
console.log(obj.people.name);
原有方式我们需要进行判空
const obj = {
// people: {
// name: 11
// }
}
if (obj.people) {
console.log(obj.people.name);
}
我们使用可选链可以更简单的实现
const obj = {
// people: {
// name: 11
// }
}
console.log(obj.people?.name);
意思是obj是否存在people属性,若存在则返回它的name属性,不存在则返回undefined
2. 空值合并运算符 ??
当左侧操作数为 null 或 undefined 时,返回右侧操作数,否则返回左侧操作数。
const a = undefined
console.log(a ?? 'a'); // a
const b = null
console.log(b ?? 'b'); // b
const c = 1
console.log(c ?? 'c'); // 1
注:不要与逻辑或运算符混淆了,用逻辑或运算符也能达到空值合并运算符差不多的效果,但是空值合并运算符范围更小,它只针对 null 或 undefined。
例如:
const a = 0
console.log(a ?? 'a'); // 0
console.log(a || 'a'); // a
const b = false
console.log(b ?? 'b'); // false
console.log(b || 'b'); // b
const c = undefined
console.log(c ?? 'c'); // c
console.log(c || 'c'); // c
3. 逻辑空赋值 ??=
逻辑空赋值运算符 (x ??= y) 仅在 x 为 nullish (null 或 undefined) 时对其赋值。等价于 x ?? (x = y)。
const item = {
name: 'foo'
}
item.age ??= 20; //当 item.age 为 null 或者 undefined 时,设置其值为 20
4. 逻辑或赋值 ||=
逻辑或赋值运算符 (x ||= y) 仅在 x 为假时对其赋值
const obj = {
name: 'ls',
age: 0
};
obj.name ||= 'li';
console.log(obj.name); //ls
obj.age ||= 20;
console.log(obj.age); //20
5. 逻辑与赋值 &&=
逻辑与赋值运算符 (x &&= y) ,仅在 x 为真时对其赋值
let a = 0
a &&= 1
console.log(a); // 0
let b = 1
b &&= 2
console.log(b); // 2