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本前端开发书籍待收货