ES6系列之解構

本系列是在平時閱讀、學習、實際項目中有關於es6中的新特性、用發的簡單總結，目的是記錄以備往後溫習；本系列預計包含let/const、箭頭函數、解構、經常使用新增方法、Symbol、Set&Map、Proxy、reflect、Class、Module、Iterator、Promise、Generator、async/await。。。

解構我的理解就是相同模式，能夠對應賦值，屬於「模式匹配」

基本用法

// 基本用法
    let [a, b] = [1, 2]; // x = 1, y = 2
    let [, c] = [3, 4]; // c = 4
    let [d, e] = [1]; // d = 1, e = undefined

    // 與...結合使用
    let [f, ...tail] = [1, 2, 3, 4]; // e = 1, tail = [2, 3, 4]

    // 等號右側爲非可遍歷對象，則拋出異常
    let [g, h] = null; // Uncaught TypeError: null is not iterable
    // 設定默認值
    let [i = 'i'] = []; // i = 'i'

 

對象解構

// 基本用法
    let {a, b} = {a: 'aa', b: 'bb'}; // a = 'aa', b = 'bb'

    // 若是變量名和屬性名不一致
    let {foo: bar} = {foo: 1, baz: 2}; // bar = 1 (注意：這裏foo這個變量仍然沒有被定義，若是試圖訪問變量foo，則會拋出異常： Uncaught ReferenceError: foo is not defined)

    // 上面的異常狀況實際上是證實對象的解構實際上是下面這種寫法的簡寫，也就是說： 對象的解構賦值的內部機制，是先找到同名屬性，而後再賦給對應的變量
    let {a: _$, b: $_} = {a: 1, b: 2}; // _$ = 1, $_ = 2

    // 指定默認值
    let {c, d = 'dd'} = {c: 'cc'} // c = 'cc', d = 'dd'

    // 下面這種狀況會拋出錯誤
    let x;
    {x} = {x: 'xx'}; // Uncaught SyntaxError: Unexpected token =
    // 由於上面的狀況開頭的{會被解析爲代碼塊，應該改爲這樣
    ({x} = {x: 'xx'});

字符串解構

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

 

數值、布爾值解構

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

// 對於數值和布爾值的解構，會先將其轉化爲包裝對象，而後進行模式匹配、賦值

 

函數參數的解構

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

// 指定默認值
function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

function move1({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move1({x: 3, y: 8}); // [3, 8]
move1({x: 3}); // [3, undefined]
move1({}); // [undefined, undefined]
move1(); // [0, 0]

// 上面函數move和move1默認值的區別是： move的參數是一個對象，併爲參數對象的屬性指定默認值；move1的參數是一個對象，併爲參數指定默認值，該默認值是{x: 0, y: 0}

 

用途

（1）交換變量值

let x = 1;
let y = 2;

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

（2）函數返回多個值

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

（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;

（5）爲函數參數指定默認值（這個以前的例子已經有所體現）