JavaScript中三个高阶运算符讲解??、??=、?.并解决Vue项目中babel编译不识别的问题

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' // ??=
	]
};