对象解构

《深入理解ES6》阅读随笔

在 ES6 中，对于解构对象做了一系列改进，使其用起来更加方面。

1. 提取对象字面量：在 ES5 中，是怎么做的：

var user = { 
    name:"Tom",
    age:18
}
var name = user.name
var age = user.age
console.log(names, age); // Tom 18

而在 ES6 中，进行了如下简化：

var user = { 
    name:"Tom",
    age:18
}
var { name, age } = user
console.log(names, age); // Tom 18

如此一来，既节省了很多重复代码，而且结构也更清晰一些；
注意：在使用 var、let 和 const 解构声明时需要初始化，以下未声明方式初始化方式是错误的：

var user = { 
    name:"Tom",
    age:18
}
var { name, age }
console.log(names, age); // Error

2. 解构赋值：在解构对象时也可以给已存在变量赋值，如下所示：

let user = {
    name: "Tom",
    age: 18,
  },
  name = "Jack",
  age = 17;
({ name, age } = user);
console.log(names, age); // Tom 18

3. 默认解构值：如果在解构对象时，声明未定义变量，那么默认会返回 undefined，也可以在声明时设置默认值，如下所示：

let user = {
  name: "Tom",
  age: 18,
};
let { wight = 60, height } = user;
console.log(wight, height); // 60 undefined

4. 解构重命名：有时候，我们希望在解构对象时变更一下变量名称，在 ES6 中是这么做的：

let user = {
  name: "Tom",
  age: 18,
};
let { name: newName } = user;
console.log(newName); // Tom

5. 嵌套解构：上面的例子中对象都只有一层，实际上，在多次对象嵌套中，上面介绍的改进也都成立，下面是一个简单的例子：

let user = {
  name: "Tom",
  age: 18,
  parent: {
    father: "Jack",
    mother: "Lucy",
  },
};
let {
  parent: { father, mother },
} = user;
console.log(father, mother);    // Jack Lucy