js中! 、!!、?.、??、??=的用法及使用场景

!

• (非空断言符号)

用于取反一个布尔值或将一个值转换为布尔类型并取反

const a= true; 
const b= false; const value = !a; // 'false'
const value =  !b; // 'true'

!!

• (强制类型转换)

用于将一个值转换为对应的布尔值（强制类型转换）

const a= "Hello";
const value = !!a; //  'true'，任何非空字符串在布尔上下文中都是真值

?.

• (可选链操作符)

在访问对象属性或调用函数时，检查中间的属性是否存在或为 null/undefined。如果中间的属性不存在或为空，表达式将短路返回 undefined，而不会引发错误

const obj = {a: {b: {c: 42}},m: [],n: function () {return "Hello, world!";}
};// 传统写法 --需要手动检查每个属性
const value1 = obj && obj.a&& obj.a.b&& obj.a.b.c; 
const value2 = obj && obj.m&& obj.m[0] && obj.n[0].fn && obj.n[0].fn();
const value3 = obj && obj.n && obj.n();// 使用可选链操作符  --如果任何中间属性不存在或为空，value 将为 undefined// 对属性的检查
const value1 = obj?.a?.b?.x;//对数组下标的检查  ?. => ?.[] 
const value2 = obj?.m?.[2]; //对函数的检查  ?. => ?.()
const value3 = obj?.n?.(); 

??

• (空值合并操作符 )

用于选择性地提供默认值，仅当变量的值为 null 或 undefined 时，才返回提供的默认值。否则，它将返回变量的实际值

const a= null;
const b= undefined;
const c= 0;
const d= '';
const e= false;//传统写法，除了null,undefined, 无法兼容0、''、false的情况,使用时要特别小心
const value1 = a || 'default'; // 'default'
const value2 = b || 'default'; // 'default'
const value3 = c || 'default'; // 'default'，因为 0 转布尔类型是 false
const value4 = d || 'default'; // 'default'，因为 '' 转布尔类型是 false
const value5 = e || 'default'; // 'default'const value1 = a ?? 'default'; // 'default'，因为 a 是 null
const value2 = b ?? 'default'; // 'default'，因为 b 是 undefined
const value3 = c ?? 'default'; // 0，因为 c 不是 null 或 undefined
const value4 = d ?? 'default'; // false，因为 d 不是 null 或 undefined

??=

• (空值合并赋值操作符)

结合了空值合并操作符和赋值操作符。它用于将默认值分配给变量，仅当变量的值为 null 或 undefined 时

let a= null;
let b= undefined;
let c= 0;a ??= 'default'; // 'default'，因为 a 是 null
b ??= 'default'; // 'default'，因为 b 是 undefined
c ??= 'default'; // 0，因为 c的初始值不是 null 或 undefined

??、??= 区别

• 是否是复制操作

—	含义
??	在??左边是null或者undefined的时候，返回右边的结果
??=	当左边是null或者undefined的时候，赋值右边的结果。

!. （ts）

• （非空断言操作符符）

在访问对象属性或调用函数时，检查中间的属性是否不存在或不是 null/undefined，表示确定某个标识符是有值的。

function a(value?:string){console.log(value!.length);// console.log(value.length); //错误提醒:value is possibly 'undefined'.} 
a('b')；// 注意： !.不传值, 编译JS后会报错, 建议使用?. 替代 !.

注意

• !. 、 ?.、??、??= 是在 ECMAScript 2020 标准中引入的，因此在旧版本的 JavaScript 中可能不被支持