ES6------解構賦值的介紹

 

這裏先記點精華部分：（解構賦值：數組按順序；對象按屬性名）

常考的面試題中：
已知 x =3,y=5 在不聲明其他變量的情況下交換其值；
解法1:老式解法
x =x+y;
y =x-y
x= x-y

解法2：（解構賦值）
[y,x] = [x,y]  // 注意：一定是數組的解構賦值，因爲它按順序而非屬性名相同；符合預期

定義： 按照一定的模式從數組和對象中提取值，然後對變量進行賦值，這被稱爲解構（Destructuring）

以前要這樣：

let a = 1;
let b = 2;
let c = 3; 

現在：

形式多種多樣，但一定要遵循一條原則，就是左右的格式結構要相同！！！

1.這幾個都屬於完全解構，即數量和格式完全匹配
let [a, b, c) = [1, 2 , 3];  //  a= 1 b=2 c=3
 
let [foo, [[bar], baz]] = [l , [[2], 3]]; // foo = 1 bar= 2 baz=3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

2.不完全解構，但是格式結構也一定要一樣！！！
let [x, y] = [1, 2, 3];
x // 1
y // 2 

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

---

 

注意：如果等號的右邊不是數組（或者嚴格來說不是可遍歷的結構）將會報錯：

／／ 報錯
let [foo] = 1;
let [foo] = false ; 
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {}; 

---

 解構賦值允許指定默認值

let [foo = true] = [];
foo // true

let [x, y ='b']=['a', undefined]; // x='a', y='b' 

let [x, y = 'b'] = ['a'] //  x='a', y='b' 


比較注意的：
ES6 內部使用嚴格相等運算符（＝＝＝）判斷一個位置是否有值 所以，如果一個數組成員
不嚴格等於 undefined ，默認位是不會生效的

第一個是等於undefined,第二個不嚴格等於，則默認值無效
let [x = 1] = [undefined]; // x = 1
let [x = 1] = [null]; // x =null


默認值是表達式時，表現爲惰性賦值，即只有在真正用到時纔會調用：
function f(){
    console.log('aaaaa')
}
let [x = f() ] = [1] // x=1
let [x = f() ] = [undefined] // x = 'aaaaa'
let [x = f() ] = [null] // x=null

默認值可以引用解構賦值的其他變量，但該變量必須己經聲明。
let [x = 1 , y = x] = []; // x=1 ; y=1
let [x = 1, y = x] = [2]; // x=2 ; y=2
let [ x = 1 , y = x] = [ 1 , 2] ; // x=1; y=2 

 

對象的解構賦值：

對象的解構與數組有個重要的不同。

數組的元素是按次序排列的，變量的取值是由它的位置決定的；

而對象的屬性沒有次序，變量必須與屬性同名才能取到正確的值。

 屬性名左右對應才能打印出對應的值

屬性名對應的均可以打印出對應的值
let { bar, foo } = { foo :'aaa', bar :'bbb'};
too //  'aaa'
bar // 'bbb' 

無對應的屬性名：
let { bazo } = { foo :'aaa', bar :'bbb'}; // bazo = undefined 

給解構出來的屬性起別名： {右邊對應屬性名（模式）: 別名}

var {foo: bgm, boo: cgm } = { foo:'aaa', boo:'bbb' }
// bgm = 'aaa' cgm = 'bbb'

實際上說明 ，對象的解構賦值是下面形式的簡寫
let { foo : foo , bar : bar } = { foo :”aaa ”, bar :”bbb”};

對象的解構也可以指定默認值。默認值生效的條件是，對象的屬性值嚴格等於 undefined; 和數組規則相同

 

var {x = 3) = {};
x // 3 

var { x, y = 5} = { x: 1 } ;
x // 1
y // 5 

var { x: y = 3} = {};
y // 3 

var { x: y = 3} = { x: 5} ;
y // 5 

var { message: msg ＝'mething went wrong'} ={};
msg // 'Something went wrong' 


注意事項：默認值生效的條件是，對象的屬性值嚴格等於 undefined
var {x = 3) = {x: undefined};
x // 3
var {x = 3) = {x: null};
x // null 

如果解構失敗 變量的值等於 undefined
let {foo) = {bar :’baz ’ ) ;
foo // undefined 

／／ 報錯 
let {foo: {bar} } = {baz :'baz' } ;  // 不存在foo屬性名,報錯

由於數組本質是特殊的對象 因此可以對數組進行對象屬性的解構。

 

let arr = [1, 2, 3] ; 
let { 0: first, [ arr.length -1 ] : last } = arr
first // 1    
last // 3

字待串的解構賦值

字符串也可以解構賦值。這是因爲此時字符串被轉換成了一個類似數組的對象。

 

直接對字符串解構賦值，遵循的規則還是和數組對象的規則一樣，不過格式比較單一，對象形式以及自定義變量名
const {a,b,c,d} = 'love'
a // 'l'
b // 'o'
c // 'v'
d // 'e'

可以對字符串中的長度屬性解構獲取對應的值：
let {length : len} = 'hello';
len // 5 

 

實際用途舉例：

 

交換變量的值
let x= 1;
let y =2;
[y, x] = [x, y]  // y=1 x=2

從函數返回多個值
function example() {
return [1, 2 , 3] ;
let [a, b, c] =example() // a=1 b=2 c=3

提取 JSON 數據(解構賦值對提取 JSON 對象中的數據尤其有用)
let JsonData = {
id: 42,
status :'OK',
data: [867 , 5309] 
}

let {id, status, data: number} = JsonData
console.log(id, status, number)  // 這裏的data是模式