js中! 、 !. 、!、?.、.?、??、??=的用法及使用场景
- !
- !!
- ?.
- ??
- ??=
- ??、??= 区别
- !. (ts)
- 注意
!
- (非空断言符号)
用于取反一个布尔值或将一个值转换为布尔类型并取反
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 中可能不被支持