es6之變量的解構賦值

es5中一般咱們聲明變量都是如下的方式：

 1 var a = 10;
 2 var b = 20;
 3 var c = 30;
 4 
 5 //或者
 6 
 7 var a = 10,b = 20,c = 30;
 8 
 9 //或者
10 
11 var arr = [1,2,3,4,5];
12 var a = arr[0];
13 var b = arr[1];
14 var c = arr[3];
15 
16 //或者
17 
18 var obj = {
19   name: 'gary',
20   age: 20
21 }
22 
23 var a = obj.name;
24 var b = obj.age;
25 
26 //或者
27 
28 //等等

有時變量多寫起來真的很麻煩，不少繁瑣的差很少的重複工做，es6爲咱們提供了多種更加便利的聲明變量的形式——變量的解構賦值

es6容許按照必定的模式，從數組和對象中提取值，對變量進行賦值。本質是模式匹配。

變量的聲明和賦值是一體的，使用let或者const不能夠重複定義

數組的解構賦值

數組的解構賦值須要左邊的變量結構須要等於右邊的值的結構，即給對應位置的變量聲明對應位置的值，變量的取值由位置決定

只要某種數據類型具備迭代器(iterator)接口，就可使用數組的解構賦值，不必定非是數組

es6中具備iterator接口的數據類型有：數組，類數組對象，字符串，Set，Map，Generator函數

注：對象不具備iterator接口，須要本身配置

 1 var [a,b,c] = ['a','b'];
 2 console.log(a); //a
 3 console.log(b); //b
 4 
 5 var [a,[[b],c]] = [1,[[2],3]];
 6 console.log(a); //1
 7 console.log(b); //2
 8 console.log(c); //3
 9 
10 //不徹底解構，左邊只是右邊的一部分，可是模式是正確的
11 var [a,,c] = ['a1','b1','c1','d1'];
12 console.log(a); //a1
13 console.log(c); //c1
14 
15 var [a,...b] = ['a2','b2','c2','d2']; 
16 //rest參數：...b 獲取多餘的數組元素，組成一個新數組，經常使用於函數參數中，做用與arguments相似，arguments是類數組
17 console.log(a); //a2
18 console.log(b); //['b2','c2','d2']
19 
20 var [a,b,...c] = ['a3'];
21 //rest參數必須是最後一個元素
22 console.log(a); //a3
23 console.log(b); //undefined 解構不成功就是undefined
24 console.log(c); //[] rest參數解構不成功是空數組[]
25 
26 //字符串具備iterator接口
27 var [a,b,c] = 'hello';
28 console.log(a); //h
29 console.log(b); //e
30 console.log(c); //l
31 
32 var [a,b,c] = new Set(['aa','bb','cc']);
33 console.log(a); //aa
34 console.log(b); //bb
35 console.log(c); //cc

對象的解構賦值

對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值，即變量名與屬性名一一對應，次序不重要

 1 var {foo,bar} = {bar: 'aaa', foo: 'bbb'}
 2 console.log(foo); //bbb
 3 console.log(bar); //aaa
 4 
 5 var {foo} = {baz: 'ccc'}
 6 console.log(foo); //undefined 由於變量與屬性名不一致
 7 //解決辦法
 8 //在變量前指定對應的屬性名使用：隔開
 9 var {baz:foo} = {baz: 'ddd'}
10 console.log(foo); //ddd  foo指向baz屬性對應的值
11 
12 //還能夠用於嵌套結構對象, 不過應該不多會這麼作吧。。。
13 var obj = {
14   p: [
15     'Gary',
16     {
17       y: 'Guo'
18     }
19   ]
20 }
21 
22 var {
23   p: [
24     x,
25     {
26       y
27     }
28   ]
29 } = obj;
30 
31 console.log(x); //Gary
32 console.log(y); //Guo

若是是先聲明瞭變量再進行對象解構賦值則須要加上括號，不然js回你認爲{}是一個代碼塊，而不是解構賦值

1 var bar;
2 {bar} = {bar:1} //SyntaxError: expected expression, got '='
3 console.log(bar);
4 
5 var bar;
6 ({bar} = {bar:111})
7 console.log(bar);  //111 實際開發中不推薦這麼作

對象解構賦值的小應用：求最大值

 1 //正常方法
 2 var arr = [2,5,1,8,4,2];
 3 console.log(Math.max.apply(this, arr)); //8
 4 
 5 //簡化
 6 
 7 var {max} = Math;
 8 console.log(max.apply(this, arr)); //8
 9 
10 便是將現有方法賦值到變量上使用

函數參數的解構賦值

結合數組和對象的解構賦值，進行函數參數的解構賦值

 1 function f([x,y]){
 2   return x+y;
 3 }
 4 
 5 f([1,2]); //3
 6 
 7 function d({name = 'g',age = '2'} = {}){ //undefined會觸發默認值
 8   return `${name} ${age}`; //此處至關於name+' '+age
 9 }
10 
11 d({name: 'Gary',age: '20'}); //Gary 20

默認值

當變量的值嚴格等於(===)undefined時默認值會生效

數組解構默認值設置：

 1 var [a=1, b=2] = [,4];
 2 console.log(a); //1 默認值
 3 console.log(b); //4
 4 
 5 var [a = 1, b = 2] = [4, undefined];
 6 var [i = 10, s = 20] = [5,null];
 7 console.log(a); //4
 8 console.log(b); //2  默認值
 9 console.log(i); //5
10 console.log(s); //null  null !== undefined
11 
12 //若是默認值是表達式，那麼會進行惰性求值，即用到纔會進行計算，用不到就不理它
13 function f(){
14   return 'Gary';
15 }
16 var [a = f()] = [2];
17 console.log(a) //2 f()不會執行

對象解構默認值設置：

在變量後面使用＝進行默認值的賦值 var {foo = 默認值} ＝ {}

1 var {foo = 3} = {}
2 console.log(foo); //3
3 
4 var {baz:foo = 3} = {baz: null}
5 console.log(foo); //null
6 
7 var {baz:foo = 5} = {baz: undefined}
8 console.log(foo); //5

用途：

1. 交換變量的值

 1 //正常
 2 var a = 10;
 3 var b = 20;
 4 var c;
 5 c = a;
 6 a = b;
 7 b = c;
 8 
 9 console.log(a); //20
10 console.log(b); //10
11 
12 //使用解構賦值
13 
14 var x = 10;
15 var y = 20;
16 
17 [x,y] = [y,x];
18 console.log(x); //20
19 console.log(y); //10

2. 從函數返回多個值

3. 函數參數的定義

函數的參數若是是對象的成員，優先使用解構賦值

4. 提取JSON數據

5. 函數參數的默認值

在參數中指定默認值

避免 var a = obj || {}的語句

6. 遍歷Map解構

7. 輸入模塊的指定方法