ES6中的高级对象分解

Question

I have the following object:

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

I would like to destructure it to the following variables:

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

(I want first_name and last_name to reside inside a 'name' object)

I've tried the following syntax:

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

However this causes an error. What am I doing wrong?

Answer 1

Update

Chapter 10. Destructuring of book "Exploring ES 6" provides many advanced examples of how to use destructuring and explains how it works internally.

Destructuring can extract values directly into the properties of an object. The properties are not required to exist but all destination objects must already exist when the destructuring assignment happens.

Armed with this knowledge, the code that answers the question is:

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"}}

The parentheses around the assignment expression that uses destructuring are required, without them the engine reports a syntax error at the first : .

The original answer follows. It doesn't completely answer the question but I leave it here for reference. It shows how to use the rest properties ( ... ) in destructuring expressions and it was accepted by the OP, as incomplete as it is.

---

The original answer

Destructuring with properties renaming works the other way around: the original name is placed before the colon, the new name is after it.

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

You can then assemble the pieces ( id , first , last ) into a new object:

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

console.log(c);

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

---

Update

The most similar result to what you describe in the question can be achieved by:

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

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

But this way the properties of name use the same names they have in personObj . Even more, it doesn't work any more if you add to personObj properties after last_name that you don't want to copy in name .