摘要：前言前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接變量的解構(gòu)賦值解構(gòu)賦值解構(gòu)賦值允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為解構(gòu)。對象的解構(gòu)賦值是根據(jù)對象值進(jìn)行匹配。

前言

該篇筆記是第二篇 變量的解構(gòu)賦值。
這一章原文鏈接： 變量的解構(gòu)賦值

解構(gòu)賦值

ES6 允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。

解構(gòu)賦值是對賦值運(yùn)算符的擴(kuò)展。
這是一種針對數(shù)組或者對象進(jìn)行模式匹配，然后對其中的變量進(jìn)行賦值。
在代碼書寫上簡潔且易讀，語義更加清晰明了；也方便了復(fù)雜對象中數(shù)據(jù)字段獲取。

數(shù)組的解構(gòu)賦值

為變量賦值。

let sample1 = 1;let sample2 = 2;let sample3 = 3;

上面代碼使用ES6的數(shù)組解構(gòu)賦值可以寫成下面這樣。從數(shù)組中提取值，按照對應(yīng)位置，對變量賦值。

let [sample1, sample2, sample3] = [1, 2, 3]; console.log(sample1, sample2, sample3); // 1， 2， 3

這種寫法屬于“模式匹配”，只要等號兩邊的模式相同，左邊的變量就會被賦予對應(yīng)的值。
上面代碼在聲明變量同時進(jìn)行了賦值，ES6也可以先聲明變量再進(jìn)行解構(gòu)賦值，

let sample1, sample2, sample3;  // 先申明[sample1, sample2, sample3] = [1, 2, 3];console.log(sample1, sample2, sample3);  // 1， 2， 3

數(shù)組解構(gòu)

有幾種情況

• 成功解構(gòu)
  • 完全解構(gòu)賦值
  • 不完全解構(gòu)賦值
  • 嵌套數(shù)組解構(gòu)賦值
  • 變量聲明并賦值解構(gòu)
  • 先聲明變量再進(jìn)行解構(gòu)賦值
• 不成功解構(gòu)

注意：

• 數(shù)組形式解構(gòu)賦值 等號右邊必須為可遍歷結(jié)構(gòu)，也就是說具有 Iterator 接口的數(shù)據(jù)結(jié)構(gòu)。
• 數(shù)組形式解構(gòu)賦值 需要按照對應(yīng)位置，對對象賦值。
• 數(shù)組形式解構(gòu)賦值 不成功變量的值等于undefined。
• 數(shù)組形式解構(gòu)賦值 的數(shù)組可以是多維數(shù)組。
• 數(shù)組形式解構(gòu)賦值 不用將等號右邊的數(shù)組全部解構(gòu)出來。
• 數(shù)組形式解構(gòu)賦值 允許等號左邊模式不全部匹配等號右邊的數(shù)組。

// 解構(gòu)成功let [sample1, [sample2, sample3]] = [1, [2, 3]]; console.log(sample1, sample2, sample3); // 1， 2， 3// 解構(gòu)不成功，變量的值就等于undefined。let [sample] = []; // sample 的值為 undefined let [sample1, sample2] = [1]; // sample2 的值為 undefined // 如果等號右邊不是數(shù)組，也就是不可遍歷結(jié)構(gòu)，將會報錯let [sample] = 1;  // 直接報錯，因為等號右邊的值是個字面量不可遍歷

let sample1, sample2, sample3, sampleN;  // 先聲明變量再進(jìn)行解構(gòu)賦值[[sample1, sample2], sample3, ...sampleN] = [[1, 2], 3, 4, 5]; // 嵌套數(shù)組console.log(sample1, sample2, sample3, sampleN); // 1 2 3 [4, 5]let [sample11, sample12] = [1, 2, 3]; // 變量聲明并賦值解構(gòu)let [sample21, ,sample23] = [1, 2, 3];console.log(sample11, sample12); // 不完全解構(gòu) 1 2console.log(sample21, sample23); // 不完全解構(gòu) 1 3

默認(rèn)值

當(dāng)你不想從數(shù)組中解構(gòu)出的值為undefined，解構(gòu)賦值允許指定默認(rèn)值。

注意：

• 當(dāng)一個數(shù)組成員嚴(yán)格等于undefined，默認(rèn)值才會生效。
• 默認(rèn)值不一定為字面量，也可以引用解構(gòu)賦值的其他變量，但該變量必須已聲明。
• 默認(rèn)值是一個表達(dá)式，那么這個表達(dá)式是惰性求值的，即只有在用到的時候，才會求值。

// 當(dāng) 值 不存在時，默認(rèn)值生效let [sample1 = 10, sample2 = 11] = [2];console.log(sample1, sample2); // 2 11 // 當(dāng) 值 === undefined 時，默認(rèn)值才會生效let [sample10 = 10, sample11 = 11, sample13 = 12] = [undefined, "", null];console.log(sample10, sample11, sample13); // 10, , null, let [sample21 = 1, sample22 = sample21] = [];console.log(sample21, sample22);let sample30 = 31;let [sample31 = sample30, sample32 = 3] = [];console.log(sample31, sample32);

對象的解構(gòu)賦值

對象解構(gòu)

數(shù)組的解構(gòu)賦值與對象的解構(gòu)賦值有很大區(qū)別

注意：

• 對象的解構(gòu)賦值不再和順序有關(guān)，是與變量名有關(guān)，變量必須與屬性同名，才能取到正確的值。
• 對象的解構(gòu)賦值是根據(jù)對象key值進(jìn)行匹配。
• 如果解構(gòu)不成功，那么值為undefined。
• 和數(shù)組解構(gòu)賦值一樣，可以對嵌套結(jié)構(gòu)的對象進(jìn)行解構(gòu)賦值。

表達(dá)式等號左右兩邊，都要有互相匹配的屬性值，才能將右邊匹配成功key的value值賦值給左邊相對應(yīng)key的value，左邊的value值作為變量。

let { sample: sample, sample1: sample2 } = { sample: 10, sample1: 11 }console.log(sample); // 10console.log(sample1) // 報錯 sample1 is not definedconsole.log(sample2) // 11

ES6 對對象進(jìn)行了擴(kuò)展，對象里的屬性與value值可以簡寫(以后會提到，目前只要知道可以這樣用)，
ES6 允許在大括號里面，直接寫入變量和函數(shù)，作為對象的屬性和方法。這樣的書寫更加簡潔。
當(dāng)屬性名與值或方法名相同時，可以簡寫為一個。

const { log: log } = console; // 可以解構(gòu)現(xiàn)有對象log(hello); // hello// 上面代碼可以簡寫為下面const { log } = console;log(hello) // hello

在嵌套的對象中使用解構(gòu)賦值。

// 多重嵌套，還可以嵌套數(shù)組let obj = {  sample: [    Hello,    { sample1: World }  ]};let { sample: [sample, { sample1 }] } = obj; console.log(sample,sample1); // Hello World// 或者像這樣？給數(shù)組或?qū)ο筇砑有聝?nèi)容let obj = {};let arr = [];({ sample: obj.a, sample1: arr[0] } = { sample: 123, sample1: true });console.log(obj); // {a: 123}console.log(arr); // [true]

默認(rèn)值

和數(shù)組解構(gòu)賦值默認(rèn)值類似，對象的默認(rèn)值

注意：

• 當(dāng)一個對象的屬性嚴(yán)格等于undefined，默認(rèn)值才會生效。
• 默認(rèn)值不一定為字面量，也可以引用解構(gòu)賦值的其他變量，但該變量必須已聲明。

// 當(dāng) 對象的屬性值 不存在時，默認(rèn)值生效let {sample1 = 10, sample2 = 11} = {sample1:2};console.log(sample1, sample2); // 2, 11 //當(dāng) 對象的屬性值 === undefined 時，默認(rèn)值才會生效let { sample10 = 10, sample11 = 11, sample12 = 12 } =     { sample10: "", sample11: undefined, sample12: null };console.log(sample10, sample11, sample12); // 11, , null// 默認(rèn)值為變量let {sample21 = 1, sample22 = sample21} = {};console.log(sample21, sample22); // 1, 1let sample30 = 31;let {sample31 = sample30, sample32 = 3} = {};console.log(sample31, sample32); // 31, 3

注意

1. 如果要將一個已經(jīng)聲明的變量用于解構(gòu)賦值，必須非常小心。
2. 解構(gòu)賦值允許等號左邊的模式之中，不放置任何變量名。
3. 由于數(shù)組本質(zhì)是特殊的對象，因此可以對數(shù)組進(jìn)行對象屬性的解構(gòu)。

// 1. 語法錯誤let sample;{sample:sample} = {sample: 1}; // 直接報錯/* 	因為 JavaScript 引擎會將{sample}理解成一個代碼塊，從而發(fā)生語法錯誤。只有不將大括號寫在行首，避免 JavaScript 將其解釋為代碼塊，才能解決這個問題。*/// 2. 雖然無意義但是合法({} = [true, false]);({} = abc);({} = []);// 3. 數(shù)組使用對象的解構(gòu)賦值，let { 0: sample0, 1: sample1 } = [1, 2];console.log(sample0, sample1); // 1, 2

字符串的解構(gòu)賦值

字符串也可以解構(gòu)賦值。
當(dāng)字符串進(jìn)行解構(gòu)賦值的時候，字符串被轉(zhuǎn)換成了一個類數(shù)組。
類數(shù)組也有length屬性，所以還可以通過這個方式獲取字符串的長度

let { length } = sample;console.log(length); // 6

數(shù)值和布爾值的解構(gòu)賦值

解構(gòu)賦值的規(guī)則是，只要等號右邊的值不是對象或數(shù)組，就先將其轉(zhuǎn)為對象。
由于**undefined**和**null**無法轉(zhuǎn)為對象，所以對它們進(jìn)行解構(gòu)賦值，都會報錯。

// 數(shù)值與布爾值 進(jìn)行解構(gòu)賦值let { toLocaleString: sampleNum } = 111;console.log(sampleNum === Number.prototype.toLocaleString);let { toString: sampleBol } = true;console.log(sampleBol === Boolean.prototype.toString);// undefined 和 null 進(jìn)行解構(gòu)賦值let { prop: x } = undefined; // 直接報錯 TypeErrorlet { prop: y } = null; // 直接報錯 TypeError

函數(shù)參數(shù)的解構(gòu)賦值

函數(shù)參數(shù)進(jìn)行解構(gòu)賦值，函數(shù)參數(shù)需要為可解構(gòu)賦值的解構(gòu)。

// 參數(shù)為數(shù)組時，參數(shù)在傳入函數(shù)的時候，數(shù)組參數(shù)就被解構(gòu)成變量 sample1 和 sample2 。function addNumberArr([sample1, sample2]) {  return sample1 + sample2;}console.log(addNumberArr([4, 4])); // 8// 參數(shù)為對象時，函數(shù)通過對這個參數(shù)進(jìn)行解構(gòu) 得到變量 sample1 和 sample2 的值。function addNumberObj({ sample1, sample2 }) {  return sample1 + sample2;}console.log(addNumberObj({ sample1: 10, sample2: 20 })); // 30

函數(shù)參數(shù)的解構(gòu)也可以使用默認(rèn)值。

// 函數(shù)通過對這個參數(shù)進(jìn)行解構(gòu)，得到變量sample1和sample2的值。// 如果解構(gòu)失敗，sample1和sample2等于默認(rèn)值。function sample({ sample1 = 0, sample2 = 0 } = {}) {  console.log([sample1, sample2])  return [sample1, sample2];}sample({ sample1: 1, sample2: 2 }); // [1, 2]sample({ sample1: 1 }); // [1, 0]sample({}); // [0, 0]sample(); // [0, 0]

圓括號問題

什么是圓括號問題呢？

原來在編譯器中，無法在解析到等號之前識別一個式子為表達(dá)式還是解構(gòu)賦值等號左邊部分，也就是模式匹配中左邊的key(屬性)值。那么如果識別到了圓括號后，編譯器該按照什么方式去處理圓括號呢？

ES6 規(guī)定，只要有可能導(dǎo)致解構(gòu)的歧義，就不得使用圓括號。
阮一峰老師建議只要有可能，就不要在模式中放置圓括號。

注意：以下三種情況不能使用圓括號

1. 變量聲明語句
2. 函數(shù)參數(shù)也屬于變量聲明，因此不能帶有圓括號。
3. 賦值語句的模式

上面三種情況使用圓括號直接報錯。

// 1. 變量聲明語句let [(sample)] =[1]; // 直接報錯let { sample: ({ sample1: sample1 }) } = { sample: { sample1: 2 } }; // 直接報錯// 2.  函數(shù)參數(shù)也屬于變量聲明，因此不能帶有圓括號。function sampleFn([(sample)]) { return sample; } // 直接報錯// 3. 賦值語句的模式({ sample2: sample21 }) = { sample2: 42 }; // 直接報錯[({ sample3: sample31 }), { sample4: sample41 }] = [{}, {}];

只有一種情況可以使用圓括號
不能有聲明語句，賦值語句的非模式(屬性名)部分，可以使用圓括號。

({ sample: (sample) } = {}); // 正確console.log(sample); // undefined

解構(gòu)賦值的用途

解構(gòu)賦值主要還是用在對象和數(shù)組上，

1. 交換變量的值

不用臨時變量，怎么交換兩個變量的值？可以使用解構(gòu)賦值簡單實現(xiàn)。

// 數(shù)組的解構(gòu)賦值let sample1 = 2;let sample2 = 4;[sample1, sample2] = [sample2, sample1];console.log(sample1, sample2); // 4 , 2

2. 函數(shù)多個返回值的解構(gòu)賦值

// 解構(gòu)函數(shù)返回的對象function sample() {  return [1, 2, 3];}let [sample1, sample2, sample3] = sample();console.log(sample1, sample2, sample3); // 1, 2, 3// 解構(gòu)函數(shù)返回的對象function sample() {  return {    sample11: 1,    sample12: 2,    sample13: 3,  };}let {sample11, sample12, sample13} = sample();console.log(sample11, sample12, sample13); // 1, 2, 3

3. 提取JSON數(shù)據(jù)

可以使用解構(gòu)賦值一次性提取多個數(shù)據(jù)

let sampleJson = {  id: 11,  status: false,  data: [{ name: name1 }, { name: name2 }]}let { id, status, data } = sampleJson;console.log(id, status, data);// 11, false, [{ name: name1 }, { name: name2 }]

4. 輸入模塊的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map"); // 示例代碼