前言
JavaScript 作为一门动态语言，其操作符的多样性为我们提供了强大的编程能力，同时也给我们带来了一定的挑战。ES2020 版本引入了一些新的操作符，让我们的编程能力更加强大。本文将针对这些操作符进行详细的介绍和实战演示，希望能对你的前端开发有所帮助。
Optional Chaining 操作符
Optional Chaining 操作符是 ES2020 版本引入的新操作符之一，它可以简化我们在访问对象属性时的代码。在旧版 JavaScript 中，如果我们需要访问一个对象的嵌套属性，需要写出冗长的代码来保证其安全性，例如：
if (object && object.property && object.property.nestedProperty) {
// Do something with object.property.nestedProperty
}而在 ES2020 版本中，我们可以使用 Optional Chaining 操作符 ?. 来简化这个过程，代码如下：
if (object?.property?.nestedProperty) {
// Do something with object.property.nestedProperty
}这样，如果 object 或 property 或 nestedProperty 不存在，程序也不会抛出异常。
Nullish Coalescing 操作符
Nullish Coalescing 操作符也是 ES2020 版本引入的新操作符之一，它可以帮助我们更好地处理空值。在旧版 JavaScript 中，我们通常使用 || 运算符来判断一个变量是否为空，例如：
const value = null || 'default value';
但是，如果变量的值为 0 或空字符串 ''，上述代码仍然会返回 'default value'，这可能会导致一些错误。而 Nullish Coalescing 操作符 ?? 可以确保只有变量为 null 或 undefined 时才返回默认值，例如：
const value = null ?? 'default value';
这样，当 value 的值为 0 或空字符串 '' 时，它的值仍然为 0 或 ''。
BigInt 类型操作符
BigInt 类型操作符是 ES2020 版本引入的另一个新特性，它可以处理更大的整数。在旧版 JavaScript 中，整数的范围是 -2^53 到 2^53，而超出这个范围的整数就会出现精度问题。而 BigInt 类型操作符可以处理比这个范围更大的整数，例如：
const bigInt = 9007199254740991n + 1n;
在上述代码中，我们使用 n 后缀来表示一个 BigInt 类型的整数。这样，我们就可以处理更大范围的整数了。
实战演示
下面我们来实战演示一下上述操作符的使用。
Optional Chaining 操作符
假设我们有一个对象 person，它包含了一个 address 属性，而 address 属性又包含了一个 city 属性。我们可以使用 Optional Chaining 操作符来访问这个属性，例如：
-- -------------------- ---- ------- ----- ------ - - ----- ------- ---- --- -- -------- - -- ----- ---- ------ -- ------ ----- -- ---- ------- -- - -- ----- ---- - ---------------------- ------------------ -- ---------
在上述代码中，我们使用 Optional Chaining 操作符来访问 person.address.city 属性，即使 address 属性不存在，程序也不会抛出异常，而是返回 undefined。
Nullish Coalescing 操作符
假设我们有一个变量 value，它的值可能为 null、undefined、0 或空字符串 ''。我们可以使用 Nullish Coalescing 操作符来确保只有变量为 null 或 undefined 时才返回默认值，例如：
const value = null ?? 'default value'; console.log(value); // 'default value' const value2 = 0 ?? 'default value'; console.log(value2); // 0
在上述代码中，我们使用 Nullish Coalescing 操作符来判断 value 和 value2 的值，确保只有它们的值为 null 或 undefined 时才返回默认值。
BigInt 类型操作符
假设我们需要处理一个很大的整数，超出了 JavaScript 的整数范围。我们可以使用 BigInt 类型操作符来处理这个整数，例如：
const bigInt = 9007199254740991n + 1n; console.log(bigInt); // 9007199254740992n
在上述代码中，我们使用 BigInt 类型操作符来处理超出了 JavaScript 整数范围的整数，确保程序能够正确处理这个整数。
总结
ES2020 版本引入了一些新的操作符，它们可以帮助我们更好地处理空值、访问对象属性和处理更大范围的整数。在实际开发中，我们可以根据需要使用这些操作符，简化代码并提高程序的可读性和健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6631b56dd3423812e4f67484