一些操作符的用法举例

78 阅读1分钟

首先我们要了解 false,null,undefined,空字符串 即 “”,0, NaN 都会被判为空

1. &&

说明:&&(&& 左侧是true , 则返回右侧数据,左侧false ,则返回左侧数据)

image.png

2. ||

说明:(|| 左侧是true ,返回左侧数据,是false 返回右侧数据;与&& 相反)

image.png

3. ?:

说明:?: 三目运算符;if else (问号左侧为true ,返回: 左侧,反之返回冒号右侧)

image.png

4. ?.

说明:?.  可选链操作符,允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。在引用 null 或者 undefined 的情况下不会引起错误 除了对属性的检查,还可以用于对数组下标及函数的检查

const obj = {
 foo: {
   bar: {
     baz: 42
   }
 },
 xyz: []
};

// 使用可选链操作符
const value1 = obj?.foo?.bar?.baz; // 如果任何中间属性不存在或为空,value 将为 undefined
//除了对属性的检查,还可以用于对数组下标及函数的检查
const value2 = obj?.xyz?.[0]?.fn?.();
   
// 传统写法
 const value1 = obj && obj.foo && obj.foo.bar && obj.foo.bar.baz; // 需要手动检查每个属性
 const value2 = obj && obj.xyz && obj.xyz[0] && obj.xyz[0].fn && obj.xyz[0].fn();

5. ??

说明:?? 空值合并操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数; 注意和 || 用法的区别

image.png