1. 程式人生 > >ES6標準入門之變數的解構賦值簡單解說

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

  首先我們來看一看解構的概念,在ES6標準下,允許按照一定模式從陣列和物件中提取值,然後對變數進行賦值,這被稱作解構,簡而言之粗糙的理解就是變相賦值。

  解構賦值的規則是,只要等號右邊的值不是物件或者陣列,就先將其轉為物件。

  一、陣列的結構賦值

  以前為變數賦值只能直接指定。而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生效。

  二、物件的解構賦值

  物件的解構賦值與陣列有一個重要的不同,陣列的元素是按照次序排列的,變數的取值是由它的位置決定的;而物件的屬性沒有次序,變數必須與屬性值同名才能取到正確的值。我們先來看一段物件賦值的程式碼

  

  
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才是變數。物件解構中模式匹配常用於巢狀物件模式匹配。

  三、字串解構賦值

  字串也可以解構賦值,這是因為此時字串被轉換成了一個類似陣列的物件。看下面一段程式碼

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

a    // h
b    // e
c    // l
d    // l
e    // o
字串解構賦值

  數值和布林值姐解構賦值業火先將數值和布林值轉為物件在進行解構賦值。

  四、用途

  1、交換變數的值

  let x = 1;

  let y = 2;

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

  此時x和y的值已經發生了替換,換做以前,只能通過中間變數來實現。

  2、從函式返回多個值

  function example () {

    return [1, 2, 3]

  }

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

  3、函式引數的定義

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

  f([1, 2, 3])

  4、提取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資料提取