ES6对象结构赋值精讲

01. 解构赋值简介

解构: ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。

例如，传统方式对象中对变量赋值可以用

var obj = {a: 1, b: 2}

ES6变量解构赋值 允许写成下面这样。

var {name: username, age: userage} = {name: 'lisi', age: 21};
console.log(username); // lisi 
console.log(userage); // 21

02. 对象解构赋值是可以简写的

var {name,age} = {name: 'lisi', age: 21};
console.log(name); // lisi 
console.log(age); // 21

03. 对象解构赋值是不受顺限制的

var {name: username, age: userage} = { age: 21, name: 'lisi'};
console.log(username); // lisi 
console.log(userage); // 21

04. 对象解构赋值是可以嵌套的

var {username: username, person: {personName: personName}} = 
{username: 'lisi', person: {personName: 'zhangsan'}};
console.log(username, personName); // lisi zhangsan

简写形式：

var {username, person: {personName}} = 
{username: 'lisi', person: {personName: 'zhangsan'}};
console.log(username, personName); // lisi zhangsan

05. 如果变量解析不成功为undefined

var {name,age,title} = {name: 'lisi', age: 21};
console.log(name,age,title); // lisi 21 undefiend

06. 给变量添加默认值

var {name,age=21} = {name: 'lisi'};
console.log(name, age); // lisi 21

如果变量已默认值，后赋值了新值，此时变量值为新赋值的值。

var {name,age=21} = {name: 'lisi',age: 22};
console.log(name, age); // lisi 22

07. 当赋值为null时，变量值不解析为undefined，解析为null

var {name,age,title} = {name: null, age: null};
console.log(name,age); // null null

08. 当赋值为undefined时，解析为undefined

var {name,age=21} = {name: undefiend, age: undefined};
console.log(name,age); // undefiend 21

09. 与剩余参数一起使用

var { name, age, ...title } = 
{ name: 'lisi', age: 21, title: { a: 1, b: 2 } , d: 8};
console.log(name, age, title); 
// lisi 21  title: { a: 1, b: 2 } , d: 8

10. 用对象解构赋值提取JSON对象值

let json = '{"name": "lisi", "age": 21}';
let {name, age} = JSON.parse(json);
console.log(name, age); // lis 21

下一篇：
1. ES6字符串方法扩展精讲
2. ES6数组方法扩展精讲
3.ES6数组解构赋值精讲
4. 一篇理解前端模块化：AMD、CMD、CommonJS、ES6
推荐阅读：
1. 【建议收藏】最简洁全面的git教程
2. 【建议收藏】你一定会用到的数组的31个方法
3. 【新年福利】滴！你有19本前端开发书籍待收货