ES9 解构对象

在现代前端开发中，解构对象是一种非常常见的操作。在 ES6 中，我们已经可以使用解构对象来从数组或者对象中提取想要的值。在 ES9 中，解构对象的功能得到了更强大的拓展，使得我们能够更加灵活地进行数据处理。

什么是对象解构？

对象解构是指将一个对象中的属性值赋值到新的变量中，这些变量将映射到原始对象的属性。这个过程需要通过解构表达式来完成，解构表达式有点像模式匹配。

ES9 对象解构拓展

嵌套的解构对象

ES9 中新增了对嵌套对象的解构，使得我们可以从嵌套对象中提取所需的值。这个特性看起来很简单，但却很实用，在处理嵌套的对象时可以大大减少代码的复杂度。

// javascriptcn.com 代码示例
const person = {
   name: 'John Doe',
   age: 26,
   address: {
      country: 'United States',
      city: 'San Francisco'
   }
};

const {name, age, address: { country, city }} = person;
console.log(name, age, country, city);

输出结果为：

John Doe 26 United States San Francisco

剩余的解构对象

另一个 ES9 新增的解构对象的特性是剩余的解构对象。这个功能允许我们将未匹配的属性值赋值给新的变量。

// javascriptcn.com 代码示例
const person = {
   name: 'John Doe',
   age: 26,
   address: {
      country: 'United States',
      city: 'San Francisco'
   },
   height: '185cm'
};

const {name, age, ...rest} = person;
console.log(name, age, rest);

输出结果为：

John Doe 26 { address: { country: 'United States', city: 'San Francisco' }, height: '185cm' }

默认值的解构对象

除了上述两个功能，ES9 还新增了默认值的解构对象。这个功能可以指定一个默认值，当属性值不存在时会使用默认值。

// javascriptcn.com 代码示例
const person = {
   name: 'John Doe',
   age: 26
};

const {name, age, height = '175cm'} = person;
console.log(name, age, height);

const {country = 'China'} = person;
console.log(country);

输出结果为：

John Doe 26 175cm
China

总结

ES9 解构对象的拓展极大地增强了我们操作数据的能力，在数据处理时可以很方便地提取、赋值和添加默认值。在日常开发中，我们可以更加灵活和高效地处理数据，提高代码质量和工作效率。

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