2.解構賦值
2.1.什麼是解構賦值？
什麼是解構賦值？這裏的關鍵字還是賦值，這是說如何去賦值的問題，這裏說的解構可以理解爲解散重新構造，所以解構賦值可以理解爲解散重新構造後進行賦值，通常是左邊一種結構，右邊一種結構，左右的結構拆開來一一對應進行賦值，例如：
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);2.2.數組的解構賦值
左右兩邊是數組這種結構，我們稱爲數組的解構賦值，這樣也是非常常用的一種形式
注意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]
2.3.對象的解構賦值
如果等號左右兩邊是對象的結構，我們稱之爲對象的解構賦值，也是非常常用的形式
let { a:a, b:b } = { a: 1, b: 2 }
console.log(a, b)注意1: 對象的解構賦值和數組不同，數組的賦值是以位置爲對應關係進行賦值的，必須按順序來寫，而對象的賦值是以屬性名爲對應關係的，因此，不用考慮順序,其內部的機制就是，先找到同名的屬性，再把右邊的值賦值給左邊的變量
注意2: 如果左邊的（{屬性名:變量名}）屬性名和變量名一樣，那麼可以簡寫成下面的形式
// let { a:a, b:b } = { a: 1, b: 2 }
//上面這種寫法和下面的寫法是等價的
let {a, b} = {a:1,b:2}
console.log(a, b)
//如果屬性名和變量名是不同的，那必須寫完整，例如下面這種寫法
let {x:m,y:n} = {x: 1, y: 2}
// 這裏的機制是 根據x的對應關係 把1賦值給m 根據y的對應關係，把2賦值給n注意3: 對象的解構賦值也可以設置默認值
let {a, b=20} = {a: 1}
console.log(a, b) //1, 202.4.數組和對象解構賦值嵌套
// 數組的解構賦值嵌套
let [a, [b, c],d] = [1, [2, 3], 4]
console.log(a, b, c, d)
// 對象的解構賦值嵌套
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p, p: [x, { y }] } = obj;
//p=['hello', {y: 'world'}] x='Hello' y = 'World'2.5.解構賦值應用
1.變量交換
let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b);2.函數返回多個值
function fn() {
return [1, 2, 3];
}
let [a, b, c] = fn();3.參數定義
// 參數是一組有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 參數是一組無次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});4.提取json數據
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]