首页 > 网络编程 > JavaScript > javascript技巧 > JS ?. 和??和??=

详解JavaScript中?.、??和??=的用法及使用场景

2023-08-25 14:24:51 作者：阿虎儿

这篇文章主要为大家详细介绍了JavaScript中?.、??和??=的用法及使用场景,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

下面这个错误，相信前端开发工程师应该经常遇到吧，要么是自己考虑不全造成的，要么是后端开发人员丢失数据或者传输错误数据类型造成的。因此对数据访问时的非空判断就变成了一件很繁琐且重要的事情，下面就介绍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'; // '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'; // 'default'，因为 foo 是 null
bar ??= 'default'; // 'default'，因为 bar 是 undefined
baz ??= 'default'; // 0，因为 baz 的初始值不是 null 或 undefined

3.2 使用场景

在变量没有被赋值或被赋值为 null 或 undefined 时，将默认值分配给变量。

4. 注意

这些运算符在处理可能为 null 或 undefined 的值时非常有用，可以简化代码并提高可读性。然而，需要注意的是，它们是在 ECMAScript 2020 标准中引入的，因此在旧版本的 JavaScript 中可能不被支持。

到此这篇关于详解JavaScript中?.、??和??=的用法及使用场景的文章就介绍到这了,更多相关JS ?. 和??和??=内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！