对象解构赋值

ES6 许可根据肯定情势，从数组和对象中提取值，对变量举行赋值，这被称为解构(Destructuring)。
--- 阮一峰《ECMAScript 6 入门》

细致的对象解构赋值的划定规矩可以参考 对象的解构赋值, 说的很细致。

作为一个前端顺序员，关于ES6这个新的语法表达式，肯定是须要闇练运用的，下面是我个人的一些邃晓。给人人分享一下。

在ES6没有涌现之前，我们是如许把对象中的值赋给变量的。

// 初版
var obj = {name: '小明', age: 12, sex: '男'};
var name = obj.name;
var age = obj.age;
var sex = obj.sex;
var phone = obj.phone // phone => undefined

然后有人说这里，var被运用屡次, 不好。 因而修改成下面如许?

// 第二版
var obj = {name: '小明', age: 12, sex: '男'};
var name = obj.name,
    age = obj.age,
    sex = obj.sex,
    phone = obj.phone;

有人说，obj这个对象被屡次挪用，不好…… 因而ES6来了。被修改成下面如许?

// 第三版
let obj = {name: '小明', age: 12, sex: '男'};
let {name, age, sex, phone} = obj

临时没有人说不好了。

当我们想把对象中的属性值赋给变量的时刻。平常须要斟酌两个要素。分别是属性值、变量。而属性是经由过程属性名决议的，变量是经由过程变量名决议的。所以，末了决议要素就是属性名，变量名。当我们可以肯定属性名和变量名的时刻，它们对应的属性值和变量值之间的赋值关联也就肯定了。

所以在ES6的解构赋值中，大抵可以分为两种状况。属性名与被赋值的变量名一致与不一致

1. 属性名与变量名不一致

当属性称号与变量称号不一致的，须要显式的指定属性名。如许才能把属性值给赋值到变量中。
比方:

let user = {name: '小明', age: 12};
let {name: userName, age: userAge} = user;
console.log(userName); // '小明'
console.log(userAge);  // 12  

2. 属性名与变量名一致

当属性称号与变量称号一致的，就只须要显现的指定变量名。

let user = {name: '小明', age: 12};
let {name, age} = user;
console.log(name);
console.log(age);

这里的语法结构跟前面也不一样，把变量名和属性名兼并在一起。

固然了，上面是罕见的赋值状况，另有一些其他条件下也是须要斟酌的。

其他关注点

1. 属性不存在，然则依旧赋给变量

当要给变量赋值的属性不存在，会给变量供应一个默认值undefined

let user = {name: '小明', age: 12};
let { address: userAddress} = user;
console.log(userAddress);  //userAddress的就是undefined

2. 变量给予默认值

当要给变量赋值的属性不存在的时刻，变量是可以被给予默认值

// 属性不存在
let user = {name: '小明', age: 12};
let {address: userAddress = '上海'} = user;
console.log(userAddress); // 由于user中不存在address属性，所以userAddress的值是默认值 `上海`

// 属性存在
let user = {name: '小明', age: 12};
let {name: userName = '小天'} = user;
console.log(userName); // userName => '小明'
// 由于属性存在，变量没法猎取默认值

3. 同一个属性赋给多个变量

对象中的一个属性值是可以同时给予给多个变量。

let user = {name: '小明', age: 12};
let { name: userName, name: user1Name} = user; 
console.log(userName); // '小明'
console.log(user1Name); // '小明'

4. 嵌套赋值

解构赋值是可以嵌套，而且是从对象最外层最先查找

let user = {name: '小明', age: 12, course: {name: '数学', score: 90}};
let {course} = user;
console.log(course);  // {name: "数学", score: 90}

let {course: { score }} = user
console.log(score) // 90

5. let 是不是必要

前面的例子中，都是是let {xxx} = {xxx} 的情势。因而就会以为运用解构赋值就肯定须要运用let、const、var。 实在不是的。let {xxx} = {xxx} 这只是个中的一种方, 声明完变量后就对其举行赋值。 解构赋值是对变量的赋值，只如果变量都是可以举行赋值的。
比方:

let name;
let user = {name: '小明', age: 12};
{name} = user;
// Uncaught SyntaxError: Unexpected token =
// 顺序报错了，照样须要运用let ?。 
// 这里顺序报的毛病是SyntaxError(语法毛病)，在顺序预编译的时刻发作的。细致的剖析临时不议论

处理的体式格局很简单，把上面的代码块变成一段表达式就OK

let name;
let user = {name: '小明', age: 12};
({name} = user); 
console.log(name)

总结

解构赋值是ES6供应一个非常轻易的表达式。 在最先的时刻，上面那么多的划定规矩，很难记着。因而为了邃晓。我把ES6代码转变成下面这类体式格局，因而很快就邃晓了。

// ES6 的解构赋值
let user = {name: '小明', age: 12};
let {name: userName} = user;

// ES5 的对象赋值
let userName; (这里可以被给予初始值)
let user = {name: '小明', age: 12};
if (user.name !== undefined) {   // 对象的属性不存在
    userName =  user.name  // user.name 可以赋值给多个变量