es6 最佳入門實踐 2

什麼是解構賦值？這裡的關鍵字還是賦值，這是說如何去賦值的問題，這裡說的解構可以理解為解散重新構造，所以解構賦值可以理解為解散重新構造後進行賦值，通常是左邊一種結構，右邊一種結構，左右的結構拆開來一一對應進行賦值，例如：

let a, b
[a, b] = [1, 2]
console.log(a, b)

這裡就相當於把1賦值給a，把2賦值給b，這樣的操作就叫做解構賦值，從本質上來說，結構解構賦值是一種匹配模式，只要等號兩邊的模式相同，那麼左邊的變數就可以被賦值給右邊對應的值

為什麼要使用解構賦值？在沒有解構賦值的時候，多個賦值會比較麻煩，為了書寫更加方便，加入解構賦值是非常有必要的，例如：沒有解構賦值的時候，互動兩個變數的值，我們是這樣做的

let a = 10;
let b = 20;
let temp = a;
a = b;
b = temp;
console.log(a, b);

有了解構賦值以後，我們的**可以這樣寫：

let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b);

左右兩邊是陣列這種結構，我們稱為陣列的解構賦值，這樣也是非常常用的一種形式

注意1: 解構不成功，值為undefined

let [a, b] = [10]
console.log(a, b)  // 10, undefined

注意2: 解構的時候可以設定預設值

let [a, b=20] = [10]
console.log(a, b)  // 10 20

注意3: 值比變數多的情況可以使用"..."符號

let [a, b, ...rest] = [1, 2, 3, 4, 5, 6]
console.log(a,b,rest)
//rest元素必須放在最後，下面這種寫法會報錯
let [a, b, ...rest, c] = [1, 2, 3, 4, 5, 6]

如果等號左右兩邊是物件的結構，我們稱之為物件的解構賦值，也是非常常用的形式

let  = 
console.log(a, b)

注意1: 物件的解構賦值和陣列不同，陣列的賦值是以位置為對應關係進行賦值的，必須按順序來寫，而物件的賦值是以屬性名為對應關係的，因此，不用考慮順序,其內部的機制就是，先找到同名的屬性，再把右邊的值賦值給左邊的變數

注意2: 如果左邊的（）屬性名和變數名一樣，那麼可以簡寫成下面的形式

// let  = 
//上面這種寫法和下面的寫法是等價的
let  = 
console.log(a, b)
//如果屬性名和變數名是不同的，那必須寫完整，例如下面這種寫法
let  =   
// 這裡的機制是 根據x的對應關係 把1賦值給m 根據y的對應關係，把2賦值給n

注意3: 物件的解構賦值也可以設定預設值

let  = 
console.log(a, b) //1, 20

// 陣列的解構賦值巢狀
let [a, [b, c],d] = [1, [2, 3], 4]
console.log(a, b, c, d)
// 物件的解構賦值巢狀
let obj = 
]};let ] } = obj;
//p=['hello', ] x='hello' y = 'world'

1.變數交換

let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b);

2.函式返回多個值

function fn() 
let [a, b, c] =  fn();

3.引數定義

// 引數是一組有次序的值
function f([x, y, z]) 
f([1, 2, 3]);
// 引數是一組無次序的值
function f() 
f();

4.提取json資料

let jsondata = ;
let  = jsondata;
console.log(id, status, number);
// 42, "ok", [867, 5309]

es6 最佳入門實踐 2

es6 最佳入門實踐 6

es6 最佳入門實踐 12

es6 最佳入門實踐 10

es6 最佳入門實踐 2

es6 最佳入門實踐 6

es6 最佳入門實踐 12

es6 最佳入門實踐 10

相關推薦