01. 解構(gòu)賦值簡(jiǎn)介
解構(gòu)
: ES6 允許按照一定模式惯悠,從數(shù)組和對(duì)象中提取值洲胖,對(duì)變量進(jìn)行賦值,這被稱為解構(gòu)
。
例如悴灵,傳統(tǒng)方式對(duì)象中對(duì)變量賦值可以用
var obj = {a: 1, b: 2}
ES6變量解構(gòu)賦值 允許寫成下面這樣扛芽。
var {name: username, age: userage} = {name: 'lisi', age: 21};
console.log(username); // lisi
console.log(userage); // 21
02. 對(duì)象解構(gòu)賦值是可以簡(jiǎn)寫的
var {name,age} = {name: 'lisi', age: 21};
console.log(name); // lisi
console.log(age); // 21
03. 對(duì)象解構(gòu)賦值是不受順限制的
var {name: username, age: userage} = { age: 21, name: 'lisi'};
console.log(username); // lisi
console.log(userage); // 21
04. 對(duì)象解構(gòu)賦值是可以嵌套的
var {username: username, person: {personName: personName}} =
{username: 'lisi', person: {personName: 'zhangsan'}};
console.log(username, personName); // lisi zhangsan
簡(jiǎn)寫形式:
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. 給變量添加默認(rèn)值
var {name,age=21} = {name: 'lisi'};
console.log(name, age); // lisi 21
如果變量已默認(rèn)值,后賦值了新值积瞒,此時(shí)變量值為新賦值的值川尖。
var {name,age=21} = {name: 'lisi',age: 22};
console.log(name, age); // lisi 22
07. 當(dāng)賦值為null時(shí),變量值不解析為undefined茫孔,解析為null
var {name,age,title} = {name: null, age: null};
console.log(name,age); // null null
08. 當(dāng)賦值為undefined時(shí)叮喳,解析為undefined
var {name,age=21} = {name: undefiend, age: undefined};
console.log(name,age); // undefiend 21
09. 與剩余參數(shù)一起使用
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. 用對(duì)象解構(gòu)賦值提取JSON對(duì)象值
let json = '{"name": "lisi", "age": 21}';
let {name, age} = JSON.parse(json);
console.log(name, age); // lis 21
下一篇:
1. ES6字符串方法擴(kuò)展精講
2. ES6數(shù)組方法擴(kuò)展精講
3.ES6數(shù)組解構(gòu)賦值精講
4. 一篇理解前端模塊化:AMD、CMD缰贝、CommonJS馍悟、ES6
推薦閱讀:
1. 【建議收藏】最簡(jiǎn)潔全面的git教程
2. 【建議收藏】你一定會(huì)用到的數(shù)組的31個(gè)方法
3. 【新年福利】滴!你有19本前端開發(fā)書籍待收貨