ECMAScript 2019 中的解构：如何使用解构来提取嵌套对象中的值？

在 ECMAScript 2015 中，JavaScript 引入了解构语法，这是一种用于从数组和对象中提取值的语法。在 ECMAScript 2019 中，解构语法得到了一些改进，其中之一就是可以更方便地提取嵌套对象中的值。

本文将介绍使用 ECMAScript 2019 中的解构，如何提取嵌套对象中的值。本文将首先介绍解构语法的基础知识，然后使用具体的示例代码说明如何将嵌套对象从一种形式转换为另一种形式。

解构语法基础

在 JavaScript 中，解构语法是通过花括号（{}）和方括号（[]）来表示的。对于对象，我们可以使用花括号来提取对象中的属性：

const person = { name: '张三', age: 25 }
const { name, age } = person
console.log(name) // 输出 "张三"
console.log(age) // 输出 "25"

对于数组，我们可以使用方括号来提取数组中的元素：

const arr = [1, 2, 3]
const [first, second] = arr
console.log(first) // 输出 "1"
console.log(second) // 输出 "2"

使用解构语法时，我们还可以给变量指定默认值。例如：

const person = { name: '张三' }
const { name, age = 25 } = person
console.log(name) // 输出 "张三"
console.log(age) // 输出 "25"

在上面的代码中，由于 person 对象中没有 age 属性，因此 age 变量会赋值为默认值 25。

提取嵌套对象中的值

有时我们会遇到嵌套对象，即某个属性的值还是一个对象。例如：

const person = { 
    name: '李四',
    age: 29,
    address: {
        city: '北京',
        country: '中国'
    }
}

如果我们想要提取 person 对象中的 city 属性，就需要通过嵌套使用解构语法来提取：

const { address: { city } } = person
console.log(city) // 输出 "北京"

在上面的代码中，我们首先用 address 指定了要提取的嵌套对象，然后使用花括号提取其中的 city 属性。

类似地，如果 person 对象中的某个属性的值是一个数组，我们也可以通过解构来提取其中的元素。例如：

const person = { 
    name: '王五',
    age: 33,
    interests: ['篮球', '足球', '音乐']
}
const { interests: [first, second] } = person
console.log(first) // 输出 "篮球"
console.log(second) // 输出 "足球"

上面的代码中，我们用 interests 指定了要提取的数组，然后使用方括号提取其中的前两个元素。

转换嵌套对象的形式

除了从嵌套对象中提取值外，我们还可以使用解构语法来将嵌套对象从一种形式转换为另一种形式。例如，我们可以将下面这个嵌套对象：

const person = { 
    name: '赵六',
    age: 37,
    address: {
        city: '上海',
        country: '中国'
    }
}

转换为这个数组：

['赵六', '上海']

我们可以使用如下的解构语法来完成这个转换：

const { name, address: { city } } = person
const arr = [name, city]
console.log(arr) // 输出 ["赵六", "上海"]

上面的代码中，我们使用解构语法先从 person 对象中提取 name 和 city 属性，然后将它们放到一个新的数组中。

除了数组，我们也可以使用解构语法将嵌套对象转换为其他形式，例如对象：

const { name, address } = person
const newPerson = { name, city: address.city }
console.log(newPerson) // 输出 { name: "赵六", city: "上海" }

在上面的代码中，我们使用解构语法先从 person 对象中提取 name 和 address 属性，然后创建了一个新的对象 newPerson，其中包含提取的属性 name 和 address.city。

总之，使用 ECMAScript 2019 中的解构语法，我们可以方便地从嵌套对象中提取值，并将嵌套对象转换为其他形式。这些功能让我们在 JavaScript 中处理复杂数据类型更加方便。

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