如何使用最新的 ECMAScript 2021 中的 Optional Chaining 语法

ECMAScript 2021（也称为ES12）已经发布，其中包含了许多新的功能和语法功能。这篇文章将介绍其中一个新的语法特性，即Optional Chaining（可选链）语法，它可以使我们在代码中更安全、更容易地访问嵌套的对象。

Optional Chaining的概念

在JavaScript中，当我们想要访问一个深层次的嵌套对象的属性时，通常需要使用多个点操作符（.）来访问每一个属性。例如：

const person = {
  name: {
    first: 'John',
    last: 'Doe'
  }
};

const firstName = person.name.first; // 'John'

这很好用，但是如果我们在中间使用小写字母的变量，可能会出现意外错误：

const person = {
  name: {
    first: 'John',
    last: 'Doe'
  }
};

const firstName = person.nam.first; // TypeError: Cannot read property 'first' of undefined

在这种情况下，虽然我们的代码是合法的，但是它会在运行时抛出一个错误。Optional Chaining语法就是为了解决这种问题而引入的。

Optional Chaining的语法

Optional Chaining语法使我们可以避免在访问深层嵌套对象时出错。通过使用问号（?）操作符，我们可以在属性或值为undefined或null时跳过对应的访问。例如：

// www.javascriptcn.com code example
const person = {
  name: {
    first: 'John',
    last: 'Doe'
  }
};

const firstName = person.name?.first; // 'John'

const middleName = person.name?.middle; // undefined

上面的代码中，我们使用了?.操作符来获取person.name对象的first属性。如果name属性为undefined或null，则Javascript引擎会自动忽略这个访问，并返回undefined。

当然，我们可以根据需要使用任意数量的?.操作符来访问多层深度的嵌套属性：

// www.javascriptcn.com code example
const person = {
  name: {
    first: 'John',
    last: 'Doe'
  },
  address: {
    street: {
      name: 'Elm',
      number: 123
    },
    city: 'New York'
  }
};

const streetNumber = person.address.street?.number; // 123

const country = person.address.city?.country?.name; // undefined

在这个例子中，我们使用了两个?.操作符。第一个用来避免访问一个不存在的属性，第二个用于访问一个不存在的对象。Javascript引擎会自动忽略掉整个操作，返回undefined。

Optional Chaining的用途

使用Optional Chaining语法可以避免访问不存在的属性时抛出的错误。这个特性在访问嵌套的对象时极为有用，可以在代码中提高安全性和可读性。

另外，Optional Chaining的特性可以用来简化一些代码：

// www.javascriptcn.com code example
const user = {
  name: 'Alice',
  age: 24,
  address: {
    country: 'Canada'
  }
};

const country = user.address && user.address.country; // 'Canada'

const simplifiedCountry = user.address?.country; // 'Canada'

在这个例子中，我们使用了之前的方式访问用户对象的地址信息（user.address && user.address.country），而在新的语法下，我们可以使用更简洁的方式实现相同的功能（user.address?.country）。

Optional Chaining的兼容性

尽管Optional Chaining的语法相对于传统的属性访问语法更加安全和简洁，但是它并不是在所有的Javascript引擎和浏览器都可以使用的。你需要确保你的代码可以在支持这个特性的环境下正常运行。

目前（截至2021年6月），Optional Chaining已经被所有主流浏览器和Node.js支持，但是在一些旧的环境中可能仍然存在兼容性问题。你可以使用Babel等工具将你的代码转换成更广泛的兼容格式。

示例代码

以下是一个使用Optional Chaining的示例代码，它提供了一个SafeGet函数，用于从给定的对象中获取属性，并在访问不存在的属性时返回一个默认值：

// www.javascriptcn.com code example
function safeGet(obj, path, defaultValue) {
  return path.split('.').reduce(function(acc, curr) {
    return acc?.[curr] ?? defaultValue;
  }, obj);
}

const user = {
  name: 'Alice',
  age: 24,
  address: {
    country: 'Canada'
  }
};

const name = safeGet(user, 'name', 'Unknown'); // 'Alice'

const city = safeGet(user, 'address.city', 'Unknown'); // 'Unknown'

在这个例子中，我们使用了?.操作符和逻辑nullish合并（??）操作符来实现SafeGet函数。如果我们访问一个不存在的属性或对象，它会返回一个默认值。这个函数可以用于更加安全地访问嵌套的对象，并避免出现TypeError或ReferenceError等问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d69f0fa941bf7134c67c0a