ES6學習（二）---變量的解構賦值

1.數組的解構賦值

（1）等式左右兩邊結構相同，等式右邊的值就會被賦值給等式左邊的

let [a,b,c] = [1,2,3];
//相當於a =1 ,b =2, c =3
let [head,...tail] = [1,2,3,4];
//tail 4
//head 1

let [a, b ,...c] = ['a'];
//a "a"
//b undefined
//c []

（2）不完全結構的情況

//情況1
let [a,b,c] = [,,1];
//a undefined,b undefined, c 1;

//情況2
let [foo] = [];
//foo undefined

//情況3
let [x,y] = [1,2,3];
//x 1
//y 2

//情況4
let [x,[y],z] = [1,[3,4],5];
//x 1
//y 3
//z 5

（3）默認值的處理。當變量嚴格上 === undefined時,變量就會變賦於默認值

let [x,y=5] = [1,];
//x 1
//y 5

let [x, y=5] = [1,1];
//x 1
//y 1 

let [x,y=5] = [1,null];
//當賦值爲null時，而null === undefined  爲false,因此
//x 1
//y null

2、對象的解構賦值

（1）我們先看簡單的對象結構賦值

let {a, b} = {a: 1, b: 2};
//a   1
//b   2
//a的值爲1，b的值爲2

在理解對象的結構賦值時，只需要把左邊的等式看做一個模式就可以了，其實上面的等式等價於

let {a: a, b: b} = {a: 1, b: 2};
//a   1
//b   2
//a的值爲1，b的值爲2

其中a: a和b: b的第一個a和b都可以看成模式，此時它們是不可以被賦值的，理解了這一點，我們看下面的複雜一點的。

let first = {
    name: ['hello',{age: 18}];
};
let {name: [a, {age}]} = first;
// a    'hello'
// age   18
//這是一個數組和對象的嵌套模式，只要弄清楚，這裏的name和age只是對象解構賦值中的一種模式就可以了。理解起來就很簡單的。。。

下面還有個例子

const x = { a: 
    {
    b: {
        c: 'zhangsan'
        }
    }
};
let {a, a: {b}, a: {b: {c}}} = x;
//a  Object  {b:{c:'zhangsan'}}
//b Object  {c: 'zhangsan'}
//c  'zhangsan'

還有就是不能在已經直接用花括號直接對象的賦值，如下

let x;
{x} = {x: 1}
//這裏肯定是會報錯的，因爲es6語法會默認把首行花括號當成一個作用域解析。


//正確的寫法應該是用一個括號包裹起來
let x;
({x} = {x: 1});

（2）對象的賦值也有默認值
實例如下

let {a, b = 3} = {a: 1};
//a   1
// b   3

同樣也遵循賦值時完全等於undefined（====）才取默認值。

let {x: 3} = {x: undefined};
// x    3

值得注意的是當子對象的父屬性不存在時，這個時候會報錯

let {name: { bar } } = {baz: 'baz'}
//這個時候name模式後的屬性值是匹配不到的。所以會報錯。
其實就相當於
let _obj = { baz: 'baz'};
_obj.name.bar //undefined

3.字符串的解構賦值

(1)在解構賦值的時候，字符串會被轉變成類似數組的對象

const [a,b,c,d,e] = 'length';
//a   l
//b   e
//c   n
//d   g
//e   t

（2）字符串類似數組對象一樣有length屬性

const {lenght: len} = 'abcdef';
//len  6

4.數值和布爾值的解構賦值

let [toString: a] = 123;
let [toString: b] = true
//只要等號右邊不是數組和對象，解構賦值時，等號右邊就會先轉爲對象。
//注意： 由於undefined和null不能轉爲對象，所以他們解構賦值時會報錯。
//a [Function: toString]
//b [Function: toString]

5.函數參數的解構賦值

（1）

function sum([a,b]) {
    return a + b;
}
sum([3, 4]);//7
//函數會直接把a和b解構爲變量

（2）函數參數的默認值問題

function sum ({a=3,b=3} = {}) {
    return a + b;
}
sum({});//a 3, b 3
sum({a:1,b:2});//a 1,b 2
sum({a:4});// a 4,b 3
sum();//a 3, b 3

6.圓括號的使用

注意：賦值語句下的非模式部分可以使用圓括號。（變量聲明，以及函數聲明，模式部分是不能使用圓括號的，會報錯）