JavaScript基础之ES6对象解构赋值

对象解构赋值

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 可以赋值给多个变量