1. 程式人生 > >ES6學習(二)---變數的解構賦值

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.圓括號的使用

注意:賦值語句下的非模式部分可以使用圓括號。(變數宣告,以及函式宣告,模式部分是不能使用圓括號的,會報錯)