前言
從前我們對變數賦值時，都是通過賦值運算子，右邊賦值給左邊這樣操作的，
let a = 1;
let b = 2;
let c = 3;
let obj = {};
obj.name = 'mm';
obj.age = 18;
現在我們通過模式匹配的方式來賦值，
左邊是解構目標，右邊是解構源，
左右結構要保持一致，
一、陣列解構賦值：基本方式
1.1 一一對應
陣列的解構是有順序的，是一一對應的，（等號右邊直接寫陣列的變數名也可以，）
let [a,b,c] = [1,2,3];
console.log(a,b,c);
let arr = [4,5,6];
let [x,y,z] = arr;
1.2 可嵌套
只要右邊的模式和左邊相同，那么左邊對應的變數就會被賦予對應的值，
let [a,[b,[c,d]],e] = [1,[2,[3,4]],5];
console.log(a,b,c,d,e);
1.3 不完全解構
如果右邊沒有給值，就當做undefined處理，
let [a,b,c] = [1,2]; // let [a,b,c] = [1,2,undefined];
1.4 可忽略
let [a, , b] = [1,2,3];
二、陣列解構賦值：剩余運算子
2.1 定義
語法：
...變數名
作用：可以將右邊陣列中剩余的值解構到左邊，而且是以陣列的形式保存，
let [a, ...b] = [1,2,3,4,5,6];
console.log('a為：', a);
console.log('b為：', b);
2.2 注意
剩余運算子只能放在最后一個引數的位置上，否則報錯，
let [...b, a] = [1,2,3];
console.log(b);
三、陣列解構賦值：默認值
3.1 規則
指定默認值，默認值產生的條件是：右邊陣列中對應的資料（====）嚴格等于undefined，
例如下面，y=10就表示，y的默認值為10，
let [x,y=10] = [1]; // let [x,y=10] = [1, undefined];
console.log(x,y);
3.2 特殊情況
let [a=10, b=a] = []; // a=10，b=10
let [a=10, b=a] = [1]; // a=1, b=1
let [a=10, b=a] = [1,2]; // a=1, b=2
let [a=b, b=20] = []; // 報錯（在用b之前還沒初始化值）
分析：
第一行：a和b匹配到undefined，所以采用默認值，a是10，b的值是a，也就是10；
第二行：a匹配到1，b匹配到undefined，所以b的值就是a，也就是1；
第三行：a和b均匹配到數值，因此a為1，b為2；（這里b不會是默認給到a的值，因為它自己有匹配的值）
第四行：a=b，但是b還沒有初始化，因此報錯，
四、物件解構賦值：基本方式
4.1 映射對應
只有左邊物件的變數名和右邊物件的屬性名相同時，才會取到值，（等號右邊寫物件的變數名也可以，）
let {a, b} = {a:'foo', b:'bar'}; // a='foo' b='bar'
let obj = {
name: 'mm',
age: 18
}
let {name, age} = obj; // name='mm' age=18
let {say} = {jump:'jump', sing:'sing'}; // say='undefined' （找不到對應的屬性名，那就給undefined）
4.2 可嵌套
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj; // x='hello' y='world'
左邊：p是一種模式匹配，真正解構的是后面的陣列中的x和物件中的y，
因此按照陣列解構'hello'賦值給x，按照物件解構'world'賦值給y，
那么要想獲取物件中p的屬性值呢，直接寫p就行，
let {p} = obj; // p=['hello', {y: 'world'}]
4.3 不完全解構
let {a,b,c} = {a:1,b:2}; // a=1 b=2 c=undefined
4.4 可忽略
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { }] } = obj; // x='hello'
五、物件解構賦值：剩余運算子
剩下的屬性以物件的形式保留，
let {a, b, ...res} = {a:1, b:2, c:3, d:4, e:5}; // a=1 b=2 res={c:3, d:4, e:5}
六、物件解構賦值：默認值
指定默認值，默認值產生的條件是：物件屬性名（====）嚴格等于undefined，
let {a,b=10,c} = {a:1}; // a=1 b=10 c=undefined
let {x=3} = {x:undefined}; // x=3
let {y=4} = {y:null}; // y=null
七、物件解構賦值：易錯點
物件的解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變數，真正被賦值的是后者，而不是前者，
例如，等號左邊foo對應右邊的同名屬性是foo，它的值是'foo'，這個值最后賦值給foo對應的變數f而非foo，
簡而言之，這個f和b相當于是一個別名，
let {foo:f, bar:b} = {foo:'foo', bar:'bar'}; // f='foo' b='bar'
八、解構賦值的應用
8.1 交換變數
let x=1, y=2;
[x, y] = [y, x];
console.log(x,y); // 2 1
8.2 接識訓傳值
function foo() {
return [1,2,3];
}
let [a,b,c] = foo();
console.log(a,b,c); // 1 2 3
function bar() {
return {
b1: 'bar1',
b2: 'bar2'
}
}
let {b1, b2} = bar();
console.log(b1, b2); // 'bar1' 'bar2'
8.3 獲取JSON資料
var json = {
name: 'mm',
age: 18
}
let {name, age, say='暫無資料'} = json;
console.log(name, age); // 'mm' 18 '暫無資料'
8.4 獲取模塊資料
匯出模塊時用export，匯入模塊時用import，
模塊匯出：（檔案名為：module.js）
let [a,b,c] = [1,'second',true];
export {
a,b,c
}
模塊匯入：
import {a,b,c} from './module.js';
console.log(a,b,c); // 1,'second',true
總結
- 等號左右結構和形式要對應；
- 陣列解構賦值時，左邊變數的順序和右邊變數值的順序是一一對應的；物件結構賦值時，左右兩側的順序不重要，只要找到就行；
- 如果左邊沒有匹配到右邊的值，那么當做undefined處理，把undefined賦值給左邊；
- 剩余運算子要放在引數末尾的位置上，如果是陣列，那么會以陣列的形式賦值給左邊的變數，如果是物件，則以物件形式賦值，
- 默認值生效的前提是，右邊對應陣列位置或者物件屬性名的資料嚴格等于undefined，（===）
- 用途：ajax后臺大量的json資料傳遞到瀏覽器客戶端，用解構賦值可以方便地獲取資料，
- 用途：功能模塊匯入，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/98448.html
標籤：JavaScript