JavaScript中的小技巧

空值合并操作符（??）

只有当左侧为null和undefined时，才会返回右侧的数.
空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

const foo = null ?? '123';
console.log(foo);	// 123
const baz = 0 ?? 42;
console.log(baz);	// 0

var a = obj ?? {};
// 相当于
var a;
if(obj === null || obj === undefined){
	a = {};
} else {
	a = obj;
}

逻辑或操作符（||）

逻辑或操作符（||），在左侧操作数为假值时返回右侧操作数。

var a = obj || {};
// 相当于
var a;
if(obj === 0 || obj === "" || obj === false || obj === null || obj === undefined){
	a = {}
} else {
	a = obj;
}

可选链操作符（?.）

可选链操作符（?.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为 null 或 undefined 的情况下不会引起错误。

// 语法
// 函数调用
func?.(args)
// 可选链与表达式
obj?.prop
// 可选链访问数组
arr?.[index]
// 短路计算
obj?.[expr]

// 函数调用
var obj = {
	func: () => {}
}
var result = obj.func?.();
// 如果希望允许 func 也为 null 或者 undefined ，那么需要像这样写
obj?.func?.();

// 可选链与表达式
let nestedProp = obj?.['name'];

// 可选链访问数组
let arrayItem = array?.[1];

// 短路计算
// 当在表达式中使用可选链时，如果左操作数是 null 或 undefined，表达式将不会被计算
let obj = null;
let x = 0;
let prop = obj?.[x++];
console.log(x); // x 将不会被递增，依旧输出 0

// 空值合并操作符可以在使用可选链时设置一个默认值：
let customer = {
  province: "浙江"
};

let customerCity = customer?.city ?? "杭州";
console.log(customerCity);  // 杭州

空值赋值运算符（??=）

空值赋值运算符（??=）左侧的值为 null、undefined 的时候,才会将右侧变量的值赋值给左侧变量。

let b = 'hello';
let a = 0;
let c = null;
let d = 123;
b ??= a;  // “hello”
c ??= d;  // 123

!!

!! 两个叹号表示把目标值转化为布尔值，相当于使用Boolean()方法。

!!"123"  相当于 Boolean("123")    true
!!{a:1}  相当于 Boolean({a:1})    true
!![]  相当于 Boolean([])    true
!!1  相当于 Boolean(1)    true
!!0  相当于 Boolean(0)    false
!!null  相当于 Boolean(null)    false
!!undefined  相当于 Boolean(undefined)    false
!!''  相当于 Boolean('')    false