關(guān)鍵詞：解構(gòu)賦值
我們之前聲明變量怎么聲明清寇？
var a = 10;
var b = 20;
var c = 30;
//或者
var a = 10,b = 20,c = 30;
//或者
var arr = [1,2,3,4,5];
var a = arr[0];
var b = arr[1];
var c = arr[3];
//或者
var obj = {
name: 'gary',
age: 20
}
var a = obj.name;
var b = obj.age;
這樣如果聲明太多變量會(huì)很麻煩币呵，es6給我們提供了一種清新脫俗的方法:解構(gòu)賦值
數(shù)組解構(gòu)賦值
var [a,b,c] = ['美帝','阿三'];
console.log(a); //美帝
console.log(b); //阿三
es6還支持嵌套賦值
var [a,[[b,c],d]] = [1,[[2,3],4]];
console.log(a); //1
console.log(b); //2
console.log(c); //3
console.log(d); //4
不完全解構(gòu)
//不完全解構(gòu)胰舆，左邊只是右邊的一部分昧碉，但是模式是正確的
var [a,,c] = ['a1','b1','c1','d1'];
console.log(a); //a1
console.log(c); //c1
rest參數(shù)
var [a,...b] = ['a2','b2','c2','d2'];
//rest參數(shù)：作用與arguments類(lèi)似睬罗，arguments是類(lèi)數(shù)組
console.log(a); //a2
console.log(b); //['b2','c2','d2']
var [a,b,...c] = ['a3'];
//rest參數(shù)必須是最后一個(gè)元素
console.log(a); //a3
console.log(b); //undefined 解構(gòu)不成功就是undefined
console.log(c); //[] rest參數(shù)解構(gòu)不成功是空數(shù)組[]
字符串具有iterator接口
var [a,b,c] = 'hello';
console.log(a); //h
console.log(b); //e
console.log(c); //l
var [a,b,c] = new Set(['aa','bb','cc']);
console.log(a); //aa
console.log(b); //bb
console.log(c); //cc
對(duì)象解構(gòu)賦值
對(duì)象的屬性沒(méi)有次序苍姜，變量必須與屬性同名，才能取到正確的值曼月，即變量名與屬性名一一對(duì)應(yīng)谊却，次序不重要
var {foo,bar} = {bar: 'aaa', foo: 'bbb'}
console.log(bar); //aaa
console.log(foo); //bbb
var {foo} = {baz: 'ccc'}
console.log(foo); //undefined 因?yàn)樽兞颗c屬性名不一致
var {baz:foo} = {baz: 'ddd'}
console.log(foo); //ddd foo指向baz屬性對(duì)應(yīng)的值
console.log(bar); // 報(bào)錯(cuò)
來(lái)個(gè)復(fù)雜點(diǎn)的
var obj = {p: ['風(fēng)清揚(yáng)',{y: '趙無(wú)極'}]}
var {p: [x,{y}]} = obj;
console.log(x); //風(fēng)清揚(yáng)
console.log(y); //趙無(wú)極
函數(shù)解構(gòu)賦值
function f([x,y]){
return x+y;
}
console.log(f([1,2])); //3
function d({name = 'n',age = '2'} = {}){ //undefined會(huì)觸發(fā)默認(rèn)值
return `${name} ${age}`; //此處相當(dāng)于name+' '+age
}
console.log(d()); //n 2
console.log(d({name: '張無(wú)夢(mèng)',age: '120'})); //張無(wú)夢(mèng) 120
默認(rèn)值
var [a=1, b=2] = [,4];
console.log(a); //1 默認(rèn)值
console.log(b); //4
var [a = 1, b = 2] = [4, undefined];
var [i = 10, s = 20] = [5,null];
console.log(a); //4
console.log(b); //2 默認(rèn)值
console.log(i); //5
console.log(s); //null null !== undefined
//如果默認(rèn)值是表達(dá)式，那么會(huì)進(jìn)行惰性求值十嘿，即用到才會(huì)進(jìn)行計(jì)算，用不到就不理它
function f(){
return '呂歸塵';
}
var [a = f()] = [];
console.log(a) // 呂歸塵
var [a = f()] = [2];
console.log(a) //2 f()不會(huì)執(zhí)行
var {foo = 3} = {}
console.log(foo); //3
var {baz:foo = 3} = {baz: null}
console.log(foo); //null
var {baz:foo = 5} = {baz: undefined}
console.log(foo); //5
例子
1.求最大值
//正常方法
var arr = [2,5,1,8,4,2];
console.log(Math.max.apply(this, arr)); //8
//簡(jiǎn)化
var {max} = Math;
console.log(max.apply(this, arr)); //8
// 即是將現(xiàn)有方法賦值到變量上使用
2.交換變量
//正常
var a = 10;
var b = 20;
var c;
c = a;
a = b;
b = c;
console.log(a); //20
console.log(b); //10
//使用解構(gòu)賦值
var x = 10;
var y = 20;
[x,y] = [y,x];
console.log(x); //20
console.log(y); //10
其他用法
- 從函數(shù)返回多個(gè)值
- 函數(shù)參數(shù)的定義
函數(shù)的參數(shù)如果是對(duì)象的成員岳锁，優(yōu)先使用解構(gòu)賦值 - 提取JSON數(shù)據(jù)
- 函數(shù)參數(shù)的默認(rèn)值,在參數(shù)中指定默認(rèn)值,避免 var a = obj || {}的語(yǔ)句
- 遍歷Map解構(gòu)
- 輸入模塊的指定方法
