文章目录
1. 空值合并操作符 ??
只有当左侧为
null
或者undefined
时,才会返回右侧的值
let x = null;
let y = 5;
console.log(x ?? y); // 5
let x = undefined;
let y = 5;
console.log(x ?? y); // 5
let x = '';
let y = 5;
console.log(x ?? y); // ''
let x = 0;
let y = 5;
console.log(x ?? y); // 0
let x = false;
let y = 5;
console.log(x ?? y); // false
1.1. ?? 与 || 的区别
- 相同点:
?? 和 || 的用法相同,都是前后是值,中间用符号连接,根据前面的值来判断最终是返回前面的值还是后面的值。
- A ?? B
- A || B
- 不同点:
判断的方法不同:
- 使用 ?? 时,只有A为 null 或者 undefined 时才会返回 B;
- 使用 || 时,A会先转化为布尔值判断,为true时返回A , false 返回B
2. 空值赋值运算符??=
当??=
左侧的值为null、undefined
的时候,才会将右侧变量的值赋值给左侧变量,其他所有值都不会进行赋值
let a = "你好";
let b = null;
let c = undefined;
let d = 0;
let e = "";
let f = true;
let g = false;
console.log((b ??= a)); // 你好
console.log((c ??= a)); // 你好
console.log((d ??= a)); // 0
console.log((e ??= a)); // ''
console.log((f ??= a)); // true
console.log((g ??= a)); // false
console.log(b); // 你好
console.log(c); // 你好
console.log(d); // 0
console.log(e); // ''
console.log(f); // true
console.log(g); // false
3. 链判断运算符?.
链判断运算符?.
允许开发人员读取深度嵌套在对象链中的属性值,而不必验证每个引用。当引用为空时,表达式停止计算并返回 undefined
。
var travelPlans = {
destination: 'DC',
monday: {
location: 'National Mall',
budget: 200
}
}
console.log(travelPlans.tuesday?.location) // => undefined
4. 链判断运算符?. 配合??使用
let travelPlans = {
destination: 'DC',
monday: {
location: 'National Mall',
budget: 200,
host: null
}
}
let res = travelPlans?.tuesday?.location ?? "locahost"; // => locahost
let res2 = travelPlans?.host; // => undefined
6. 解决Vue项目中babel编译不识别的问题
babel就是一个es6转es5的插件,这三个东西是js新语法,低版本的babel无法转换,所以要另外装三个插件兼容这个问题
虽然浏览器能够认识这些新的运算符,但是项目中使用必须@babel/plugins转化才能使用。
- 想使用
?.
运算符 ,必须安装 @babel/plugin-proposal-optional-chaining。- 想使用
??
运算符 ,必须安装 @babel/plugin-proposal-nullish-coalescing-operator。- 想使用
??=
运算符 ,必须安装 @babel/plugin-proposal-logical-assignment-operators。
- 指定一下版本号
npm i -D @babel/plugin-proposal-optional-chaining@7
npm i -D @babel/plugin-proposal-nullish-coalescing-operator@7
npm i -D @babel/plugin-proposal-logical-assignment-operators@7
- 修改babel.config.js
module.exports = {
presets: ['@vue/app'],
plugins: [
'@babel/plugin-proposal-optional-chaining', // ?.
'@babel/plugin-proposal-nullish-coalescing-operator', // ??
'@babel/plugin-proposal-logical-assignment-operators' // ??=
]
};