了解 ES2020（ECMAScript 2020）的更新：nullish coalescing operator 和 optional chaining

随着前端技术的不断发展，JavaScript 也在不断更新和完善。ES2020 是 ECMAScript 的最新版本，其中包含了一些非常有用的新特性。本文将介绍其中两个新特性：nullish coalescing operator 和 optional chaining，以及它们的用法和指导意义。

nullish coalescing operator

在 JavaScript 中，有时候我们需要使用默认值来避免出现 undefined 或 null 的情况。通常情况下，我们可以使用 || 运算符来实现这个功能，例如：

const foo = null || 'default value';
console.log(foo); // 输出 'default value'

但是，当变量的值为 falsy 值时，|| 运算符并不能正确地处理。例如：

const foo = '' || 'default value';
console.log(foo); // 输出 ''

在这种情况下，我们需要使用 nullish coalescing operator（?? 运算符）来实现正确的默认值处理。例如：

const foo = '' ?? 'default value';
console.log(foo); // 输出 'default value'

nullish coalescing operator 只有在变量的值为 null 或 undefined 时才会返回默认值，否则返回变量的值。这样可以避免出现 falsy 值的情况。

optional chaining

在 JavaScript 中，我们经常需要访问对象的属性或方法。但是，如果对象的某个属性不存在，我们就会遇到 undefined 的情况。例如：

const foo = {
  bar: {
    baz: 'value'
  }
};
console.log(foo.bar.baz); // 输出 'value'
console.log(foo.bar.qux); // 抛出异常

在这种情况下，我们需要使用 if 语句或三元运算符来判断属性是否存在。例如：

const foo = {
  bar: {
    baz: 'value'
  }
};
if (foo.bar && foo.bar.qux) {
  console.log(foo.bar.qux);
} else {
  console.log('default value');
}

ES2020 中新增了 optional chaining（?. 运算符），可以方便地处理这种情况。例如：

const foo = {
  bar: {
    baz: 'value'
  }
};
console.log(foo.bar?.baz); // 输出 'value'
console.log(foo.bar?.qux); // 输出 undefined，不会抛出异常

optional chaining 可以在访问属性或方法时，自动判断属性是否存在，避免了出现 undefined 的情况。这样可以使代码更加简洁和易读。

总结

ES2020 中的 nullish coalescing operator 和 optional chaining 是非常有用的新特性，可以帮助我们更好地处理变量的默认值和对象属性的访问。使用这些新特性可以使代码更加简洁、易读和健壮。建议开发者在实际开发中积极使用这些新特性，提高代码的质量和效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658c236feb4cecbf2d183b6b