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

??、??= 区别

• 是否是复制操作

!. （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 中可能不被支持