ECMAScript 2020 中的对象合并方式

在 ECMAScript 2020 中，新增了一种对象合并方式，可以更方便地将两个对象合并成一个新对象。这个新特性被称为 “可选链式操作符”（Optional Chaining Operator）。

可选链式操作符

可选链式操作符是一个问号 ?，用于判断一个对象是否存在某个属性或方法，如果存在则返回该属性或方法的值，如果不存在则返回 undefined。这个操作符可以与点操作符 . 或方括号操作符 [] 一起使用，形成链式操作。

下面是一个示例：

// javascriptcn.com 代码示例
const person = {
  name: 'Alice',
  address: {
    city: 'New York',
    street: 'Broadway'
  }
};

const city = person?.address?.city;
console.log(city); // 输出 'New York'

const country = person?.address?.country;
console.log(country); // 输出 undefined

在上面的代码中，我们使用了可选链式操作符 ?.，来判断 person 对象是否存在 address 属性和 city 属性。如果存在，则返回对应的值；如果不存在，则返回 undefined。

对象合并

除了判断属性或方法是否存在，可选链式操作符还可以用于对象合并。我们可以使用可选链式操作符和对象展开运算符 ...，将两个对象合并成一个新对象。

下面是一个示例：

// javascriptcn.com 代码示例
const person = {
  name: 'Alice',
  address: {
    city: 'New York',
    street: 'Broadway'
  }
};

const newPerson = {
  ...person,
  address: {
    ...person.address,
    zipCode: '10001'
  }
};

console.log(newPerson);

在上面的代码中，我们使用了对象展开运算符 ... 和可选链式操作符 ?.，将 person 对象和一个新对象合并成一个新对象 newPerson。在新对象中，我们添加了一个新的属性 zipCode，并将 person 对象中的 address 属性也进行了合并。

指导意义

可选链式操作符为我们提供了一种更加简便的方式来判断对象的属性或方法是否存在。它可以帮助我们避免在访问对象时出现 TypeError 错误，从而提高代码的稳定性和可读性。

在对象合并方面，可选链式操作符和对象展开运算符的组合，可以帮助我们更加方便地进行对象合并，从而减少代码的复杂度和冗余度。

总的来说，可选链式操作符是 ECMAScript 2020 中一个非常实用的新特性，可以帮助我们更加高效地编写 JavaScript 代码。

总结

本文介绍了 ECMAScript 2020 中的可选链式操作符，包括它的语法和用法。我们还通过示例代码，演示了如何使用可选链式操作符进行对象合并。希望本文能够对大家理解和掌握这个新特性有所帮助。

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