网站后台生成静态页面,优秀的logo设计案例,传统企业网站建设,网上银行入口上面这个错误#xff0c;相信前端开发工程师应该经常遇到吧#xff0c;要么是自己考虑不全造成的#xff0c;要么是后端开发人员丢失数据或者传输错误数据类型造成的。因此对数据访问时的非空判断就变成了一件很繁琐且重要的事情#xff0c;下面就介绍ES6一些新的语法来方便… 上面这个错误相信前端开发工程师应该经常遇到吧要么是自己考虑不全造成的要么是后端开发人员丢失数据或者传输错误数据类型造成的。因此对数据访问时的非空判断就变成了一件很繁琐且重要的事情下面就介绍ES6一些新的语法来方便我们开发。
1. 可选链操作符 (Optional Chaining Operator - ?.):
可选链操作符允许您在访问对象属性或调用函数时检查中间的属性是否存在或为 null/undefined。如果中间的属性不存在或为空表达式将短路返回 undefined而不会引发错误。
1.1 用法示例
const obj {foo: {bar: {baz: 42}}
};// 使用可选链操作符
const value obj?.foo?.bar?.baz; // 如果任何中间属性不存在或为空value 将为 undefined// 传统写法const value obj obj.foo obj.foo.bar obj.foo.bar.baz; // 需要手动检查每个属性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; // default因为 foo 是 null
const value2 bar ?? default; // default因为 bar 是 undefined
const value3 baz ?? default; // 0因为 baz 不是 null 或 undefined
const value4 qux ?? default; // 因为 qux 不是 null 或 undefined
const value5 xyz ?? default; // false因为 xyz 不是 null 或 undefined//可能存在的传统写法除了null,undefined, 无法兼容0、、false的情况,使用时要特别小心
const value1 foo || default; // default
const value2 bar || default; // default
const value3 baz || default; // default因为 0 转布尔类型是 false
const value4 qux || default; // default因为 转布尔类型是 false
const value5 xyz || default; // default2.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; // default因为 foo 是 null
bar ?? default; // default因为 bar 是 undefined
baz ?? default; // 0因为 baz 的初始值不是 null 或 undefined3.2 使用场景
在变量没有被赋值或被赋值为 null 或 undefined 时将默认值分配给变量。
4. 注意
这些运算符在处理可能为 null 或 undefined 的值时非常有用可以简化代码并提高可读性。然而需要注意的是它们是在 ECMAScript 2020 标准中引入的因此在旧版本的 JavaScript 中可能不被支持。
