ES6標準入門之變量的解構賦值簡單解說

　　首先咱們來看一看解構的概念，在ES6標準下，容許按照必定模式從數組和對象中提取值，而後對變量進行賦值，這被稱做解構，簡而言之粗糙的理解就是變相賦值。

　　解構賦值的規則是，只要等號右邊的值不是對象或者數組，就先將其轉爲對象。

　　1、數組的結構賦值

　　之前爲變量賦值只能直接指定。而ES6容許從數組中提取值，按照對應位置對變量賦值，咱們先來看下面一段代碼

　　

　　

 1 //ES5對變量賦值只能直接指定
 2 var a = 10；
 3 var b = 20；
 4 var c = 30；
 5 //ES6容許寫成下面這樣
 6 let [a, b, c] = [10, 20, 40]
 7 //a: 10
 8 //b: 20
 9 //c: 30
10 //本質上，這種寫法屬於「模式匹配」

ES6經過數組解構對變量賦值

　　在上面的代碼段中提到了模式匹配，所謂模式匹配就是隻要等號兩邊模式相同，左邊的變量就會被賦予對應的值，看下面代碼

　　

　　

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

模式匹配說明

　　若是解構不成功，變量的值就等於underfined。解構賦值容許指定默認值，可是默認值生效的條件是一個數組成員嚴格等於（===）underfined，默認值纔會生效，let [x = 1] = [underfined]，此時x = 1生效。

　　2、對象的解構賦值

　　對象的解構賦值與數組有一個重要的不一樣，數組的元素是按照次序排列的，變量的取值是由它的位置決定的；而對象的屬性沒有次序，變量必須與屬性值同名才能取到正確的值。咱們先來看一段對象賦值的代碼

　　

　　

let { bar,  foo } = { foo: "aaa", bar: "bbb" }

foo    //  "aaa"
bar    //  "bbb"


let { baz } = { foo: "aaa", bar: "bbb" }

baz    //  underfined

對象解構賦值

　　從上面的代碼中能夠看出，等號左邊的兩個變量的次序和等號右邊兩個同名屬性的次序不一致，可是對取值徹底沒有影響。第二個例子的變量沒有對應的同名屬性，致使去不致使，最後等於underfined。若是變量名與屬性名不一致，必須寫成下面這樣:

　　let { foo: baz } = { foo: "aaa", bar: "bbb" }；這樣baz就能取到值，這種也是模式匹配，foo是模式，baz纔是變量。對象解構中模式匹配經常使用於嵌套對象模式匹配。

　　3、字符串解構賦值

　　字符串也能夠解構賦值，這是由於此時字符串被轉換成了一個相似數組的對象。看下面一段代碼

　　

const [a, b, c, d, e] = 'hello'

a    // h
b    // e
c    // l
d    // l
e    // o

字符串解構賦值

　　數值和布爾值姐解構賦值業火先將數值和布爾值轉爲對象在進行解構賦值。

　　4、用途

　　一、交換變量的值

　　let x = 1;

　　let y = 2;

　　[x, y] = [y, x];

　　此時x和y的值已經發生了替換，換作之前，只能經過中間變量來實現。

　　二、從函數返回多個值

　　function example () {

　　　　return [1, 2, 3]

　　}

　　let [a, b, c] = example ();此時a=1，b=2，c=3

　　三、函數參數的定義

　　function f ([x, y, z]) { ... }

　　f([1, 2, 3])

　　四、提取JSON數據

　　

 1 let jsonData = {
 2   id: 42,
 3   status: "OK",
 4   data: [867, 5309]
 5 };
 6 
 7 let { id, status, data: number } = jsonData;
 8 
 9 console.log(id, status, number);
10 // 42, "OK", [867, 5309]

JSON數據提取