上面这个错误,相信前端开发工程师应该经常遇到吧,要么是自己考虑不全造成的,要么是后端开发人员丢失数据或者传输错误数据类型造成的。因此对数据访问时的非空判断就变成了一件很繁琐且重要的事情,下面就介绍ES6一些新的语法来方便我们开发。
1. 可选链操作符 (Optional Chaining Operator - ?.):
可选链操作符允许您在访问对象属性或调用函数时,检查中间的属性是否存在或为 null/undefined。如果中间的属性不存在或为空,表达式将短路返回 undefined,而不会引发错误。
1.1 用法示例:
const obj = {
foo: {
bar: {
baz: 42
}
},
xyz: []
};
const value1 = obj?.foo?.bar?.baz;
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();
1.2 使用场景:
-
链式访问对象属性,而不必手动检查每个属性是否存在。
-
调用可能不存在的函数。
2. 空值合并操作符 (Nullish Coalescing Operator - ??):
空值合并操作符用于选择性地提供默认值,仅当变量的值为 null 或 undefined 时,才返回提供的默认值。否则,它将返回变量的实际值。
2.1 用法示例:
const foo = null;
const bar = undefined;
const baz = 0;
const qux = '';
cosnt xyz = false;
const value1 = foo ?? 'default';
const value2 = bar ?? 'default';
const value3 = baz ?? 'default';
const value4 = qux ?? 'default';
const value5 = xyz ?? 'default';
const value1 = foo || 'default';
const value2 = bar || 'default';
const value3 = baz || 'default';
const value4 = qux || 'default';
const value5 = xyz || 'default';
2.2 使用场景:
-
提供默认值,而不使用 falsy 值(如空字符串、0 等)。
-
在处理可能为 null 或 undefined 的变量时,选择性地提供备用值。
3. 空值合并赋值操作符 (Nullish Coalescing Assignment Operator - ??=):
空值合并赋值操作符结合了空值合并操作符和赋值操作符。它用于将默认值分配给变量,仅当变量的值为 null 或 undefined 时。
3.1 用法示例:
let foo = null;
let bar = undefined;
let baz = 0;
foo ??= 'default';
bar ??= 'default';
baz ??= 'default';
3.2 使用场景:
-
在变量没有被赋值或被赋值为 null 或 undefined 时,将默认值分配给变量。
4. 注意:
这些运算符在处理可能为 null 或 undefined 的值时非常有用,可以简化代码并提高可读性。然而,需要注意的是,它们是在 ECMAScript 2020 标准中引入的,因此在旧版本的 JavaScript 中可能不被支持。