ES6學習之 -- 解構（使數據訪問更便捷）

數組的解構賦值

ES6規定：容許按照必定模式，從數組和對象中提取值對變量進行賦值，咱們稱之爲解構。
之前賦值只能直接指定值

let a = 1;
let b = 2;
let c = 3;

ES6容許如下這種作法

let [a, b, c] = [1, 2, 3];

上面代碼表示能夠從數組中抽取值賦給對應位置的變量
固然若是解構不成功，變量的值就爲undefined

let [foo] = [];
let [bar, line] = [1];
//foo是undefined bar是1 line是undefined

若是等號右邊的不是數組（或者說不可遍歷的解構），就會報錯

//如下都會報錯
let [foo] = null;
let [foo] = undefined;
let [foo] = 1;
let [foo] = NaN;
let [foo] = false;
let [foo] = {};

默認值
數組解構能夠賦默認值
當數組解構進行賦值的時候會先判斷對應位置上是否有值（判斷規則是嚴格等於===），若是不存在的話默認值纔會生效

let [foo] = [true];//foo = true;
let [x, y = 'b'] = ['a'];//x = 'a'; y = 'b';
let [x, y = 'b'] = ['a', undefined];//x = 'a'; y = 'b';
let [x, y = 'b'] = ['a', null];//x = 'a'; y = null;

若果默認值是一個表達式，那麼這個表達式是惰性的，只有在用到的時候纔會求值

function getFoo() {
    console.log('log: doing');
    return 'foo';
}
let [x = getFoo()] = [1];//getFoo並未執行，由於解構的時候發現有對應的值 x = 1

固然默認值能夠取已經存在的變量的值，記住是已經存在的。

let [x = 0, y = x] = [];//x = 0; y = 0;
let [x = y, y = 0] = [];//報錯由於x須要默認值的時候y還不存在
let [x = y, y = 0] = [1];//x = 1;y = 0;由於x能取到值 因此默認值的賦值操做壓根不會執行

對象的解構賦值

第一部分咱們知道數組解構賦值是按照順序來的，對象就不同了，對象的屬性並無順序，對象的解構賦值是按照屬性名來的。
變量名與屬性名同樣的狀況：

let {foo, bar, line} = {foo: 'Hello', bar: 'ES6'};
foo //'Hello'
bar //'ES6'
line//undefined

變量名與屬性名不同的狀況：

let {foo: fooTest} = {foo: 'Jason'};
fooTest//'Jason'

固然同名的徹底能夠理解成

let {foo: foo, bar: bar, line: line} = {foo: 'Hello', bar: 'ES6'};

對象與數組結合後能夠組成嵌套模式

let { 
    test: [
        name
    ],
    mod
} = {
    test: ['Jason'],
    mod: 'Hello'
}
mod//'Hello'
name//'Jason'
test//報錯 test is not defined

上個例子中若是想要獲取test須要先定義

let {
    test, 
    test: [
        name
    ],
    mod
} = {
    test: ['Jason'],
    mod: 'Hello'
}
mod//'Hello'
name//'Jason'
test//['Jason']

一樣的對象的解構也能夠設置默認值，默認值生效的條件是，對象的屬性值嚴格等於undefined。

let {x = 0} = {};
let {obj = {}} = {obj: null};
x//0
obj//null

解構失敗的話變量被賦予undefined

let { x } = {};
x//undefined

若是解構模式是嵌套的對象，子對象所在的父屬性不存在就會報錯。

let {user: { name }} = {foo: 'test'};
//報錯 由於name的父屬性不存在

若是對一個已經聲明的變量進行解構賦值必定要注意

let x;
{ x } = { x: 0 };
//報錯 語法錯誤 JavaScript會把{x}看成代碼塊

爲了不以上的錯誤應該避免大括號位於行首，咱們應該將解構賦值放在圓括號內。

let x;
({ x } = { x: 0 });
x//0

對象的解構賦值能夠很方便的將已有的方法賦值到變量中方便使用

let {sin,cos,log,PI} = Math;
sin(PI/6)

由於數組是一種特殊的對象，因此能夠對數組使用對象進行解構

let arr = [1, 2, 3];
let {0: test, [arr.length - 1]: name} = arr;
test//1
name//3

字符串的解構賦值

字符串也能夠解構賦值，由於此時字符串會被當作一個相似數組的對象

let [first, , , ,last] = '12345';
first//'1'
last//'5'

相似數組的對象都有長度length屬性

let { length } = '12345';
length//5

數值與布爾值的解構賦值

若果是對數字或者布爾值進行解構，會先將數字或者布爾值轉換成對象

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

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

特別注意undefined與null沒法轉換爲對象，對他們進行解構都會報錯

let { prop: x } = undefined; // 報錯
let { prop: y } = null; // 報錯

函數參數的解構賦值

function test([x, y]) {
    return x + y;
}
test([1, 2]);//3
參數傳遞到函數的那一刻被解構成x和y了

圓括號問題（摘自阮一峯老師《ECMAScript 6 入門》）

解構賦值雖然很方便，可是解析起來並不容易。對於編譯器來講，一個式子究竟是模式，仍是表達式，沒有辦法從一開始就知道，必須解析到（或解析不到）等號才能知道。

由此帶來的問題是，若是模式中出現圓括號怎麼處理。ES6 的規則是，只要有可能致使解構的歧義，就不得使用圓括號。

可是，這條規則實際上不那麼容易辨別，處理起來至關麻煩。所以，建議只要有可能，就不要在模式中放置圓括號。
不能使用圓括號的狀況
（1）變量聲明語句

// 所有報錯
let [(a)] = [1];

let {x: (c)} = {};
let ({x: c}) = {};
let {(x: c)} = {};
let {(x): c} = {};

let { o: ({ p: p }) } = { o: { p: 2 } };

（2）函數參數

// 報錯
function f([(z)]) { return z; }
// 報錯
function f([z,(x)]) { return x; }

（3）賦值語句的模式

// 所有報錯
({ p: a }) = { p: 42 };
([a]) = [5];
// 報錯
[({ p: a }), { x: c }] = [{}, {}];

可使用圓括號的狀況
可使用圓括號的狀況只有一種：賦值語句的非模式部分，可使用圓括號。

[(b)] = [3]; // 正確
({ p: (d) } = {}); // 正確
[(parseInt.prop)] = [3]; // 正確

用途

（1）交換變量的值

let x = 1;
let y = 2;
[x, y] = [y, x];

（2）從函數返回多個值

function getParams() {
    return {name: 'Jason', id: 411, age: 24};
}
let {name, id, age} = getParams();

（3）函數參數的定義

function test([x, y, z]) {}
test([1, 2, 3]);

function test({ x, y, z }) {}
test({ x: 1, y: 2, z: 3 });

（4）提取 JSON 數據

const jsonData = {
    name: 'Jason',
    id: 411,
    age: 24
};
let {name, id, age: yearOld} = jsonData;
console.log(name, id, yearOld);//Jason 411 24

（5）函數參數的默認值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true
}) {
};

（6）遍歷 Map 結構

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

（7）輸入模塊的指定方法

import {mapState, mapGetters, mapMutations, mapActions, createNamespacedHelpers} from 'vuex';