ES6學習(二)---變數的解構賦值
阿新 • • 發佈:2018-11-12
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.圓括號的使用
注意:賦值語句下的非模式部分可以使用圓括號。(變數宣告,以及函式宣告,模式部分是不能使用圓括號的,會報錯)