更新

Question

我有以下对象：

id,  <-- _id
name: { 
  first,  <-- first_name
  last    <-- last_name
}

我想将其解构为以下变量：

const {
  id: _id,
  name: {
    first: first_name,
    last:  last_name
  }
} = personObj

（我希望first_name和last_name驻留在'name'对象中）

我尝试了以下语法：

{{1}}

然而，这会导致错误。我做错了什么？

Answer 1

更新

本书10. Destructuring的第"Exploring ES 6"章提供了许多关于如何使用解构的高级示例，并解释了它如何在内部工作。

解构可以直接将值提取到对象的属性中。不需要存在属性，但是当解构赋值发生时，所有目标对象必须已经存在。

有了这些知识，回答问题的代码是：

let personObj = {
    _id: '123',
    first_name: 'John',
    last_name: 'Doe',
}

// Create the objects that receive the values on destructuring
let c = { name: {} }

// Do the magic
({ _id: c.id, first_name: c.name.first, last_name: c.name.last } = personObj)

console.log(c)
// {id: "123", name: {first: "John", last: "Doe"}}

需要使用解构的赋值表达式周围的括号，如果没有它们，引擎会在第一个:报告语法错误。

原始答案如下。它没有完全回答这个问题，但我把它留在这里供参考。它显示了如何在解构表达式中使用rest properties (...)并且它被OP接受，尽管它不完整。

原始答案

Destructuring with properties renaming反过来说：原始名称放在冒号之前，新名称就在它之后。

let personObj = {
    _id: '123',
    first_name: 'John',
    last_name: 'Doe',
}

// Destructure personObj using different names for the properties
const {
    _id: id,
    first_name: first,
    last_name: last
} = personObj


console.log('id: ' + id);
console.log('first: ' + first);
console.log('last: ' + last);

// Output
//    id: 123
//    first: John
//    last: Doe

然后，您可以将这些部分（id，first，last）组合到一个新对象中：

let c = {
    id,
    name: {
        first,
        last
    }
}

console.log(c);

// Output
//    { id: '123', name: { first: 'John', last: 'Doe' } }

更新

与您在问题中描述的内容最相似的结果可以通过以下方式实现：

let { _id: id, ...name } = personObj

console.log(id)
console.log(name)
// Output
//    123
//    { first_name: 'John', last_name: 'Doe' }

但是这样name的属性使用了personObj中的相同名称。更重要的是，如果您在personObj之后添加last_name属性而不想在name中复制，则它不再有效。

ES6中对象的高级解构

1 个答案:

更新

原始答案

更新