《ECMAScript 6 入門》【二、變量的解構(gòu)賦值】（持續(xù)更新中……）

前言：

讓我們看下es6的新語(yǔ)法解構(gòu)，跟模式匹配類似。
一、數(shù)組的解構(gòu)賦值

舉個(gè)例子給多個(gè)變量賦值的寫法：

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



需要寫多個(gè)變量特別麻煩，我們先使用以前的簡(jiǎn)化方法。

var a=1,b=2,c=3;


現(xiàn)在es6引入了解構(gòu)，我們可以使用數(shù)組的解構(gòu)賦值來(lái)更簡(jiǎn)便的進(jìn)行賦值。
1、完全解構(gòu)

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



可以從數(shù)組中提取值，按照對(duì)應(yīng)位置，對(duì)變量賦值。本質(zhì)上，這種寫法屬于“模式匹配”，只要等號(hào)兩邊的模式相同，左邊的變量就會(huì)被賦予對(duì)應(yīng)的值。
接下來(lái)，我們?cè)倥e幾個(gè)例子：

// 1、一一對(duì)應(yīng)
let [,,v]=[,,1];
console.log(v) // 1
// 2、可以利用擴(kuò)展符合并數(shù)組項(xiàng)
let [a,...b]=[1,2,3];
console.log(a) // 1
console.log(b) //[2,3]
// 3、如果左邊不能一一對(duì)應(yīng)右邊的話，使用擴(kuò)展符并且位置在末尾時(shí)，打印的為空數(shù)組，c沒(méi)有對(duì)應(yīng)，則是undefined;
let [a,c,...b]=[1];
console.log(a); // 1
console.log(b); // []
console.log(c); // undefined
// 4、如果沒(méi)有一一對(duì)應(yīng)的情況下，擴(kuò)展符在中間，就會(huì)出錯(cuò) `let [a,...b,d,c]=[1];`這種情況也一樣
let [a,...b,c]=[1];
// Uncaught SyntaxError: Rest element must be last element



如果解構(gòu)不成功，變量的值就等于undefined。在第4種情況中，我們把...b的位置放在中間，就會(huì)出錯(cuò)，而放在末尾只是打印空數(shù)組。

我們?cè)倥e幾個(gè)實(shí)際用到的例子，比如說(shuō)交換值。以前交換值必須再聲明定義一個(gè)變量，就像這樣。

var a = 10;
var b = 20;
var temp = a;
a = b;
b = temp;


看起來(lái)，比較繞而且代碼長(zhǎng)，現(xiàn)在我們使用了es6的解構(gòu)，可以這樣。

let a = 10;
let b = 20;
[a,b] = [b,a];



2、不完全結(jié)構(gòu)

接下來(lái)，我們來(lái)看下一個(gè)特殊的例子，叫做不完全解構(gòu)。就是等號(hào)左邊的模式，只匹配一部分的等號(hào)右邊的數(shù)組

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

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4



3、默認(rèn)值

    let [x, y = 'b'] = ['a', 'c'];
    console.log(y) // 'c'
    let [x, y = 'b'] = ['a'];
    console.log(y) // 'b'
    let [x, y = 'b'] = ['a', undefined];
    console.log(y) // 'b'


總結(jié)：數(shù)組的元素是按次序排列的，變量的取值由它的位置決定。
二、對(duì)象的解構(gòu)賦值

解構(gòu)不僅可以用于數(shù)組，而且還可以用于對(duì)象。就像這樣。

 let { a, b } = { a: '1', b: '2' };
   console.log(a); // '1'
   console.log(b); // '2'



對(duì)象的屬性沒(méi)有次序，變量必須與屬性同名，才能取到正確的值。
否則會(huì)彈出 undefined

  let { a, c } = { a: '1', b: '2' };
   console.log(c); // undefined



如果非得輸出c的話，必須寫成這樣:

   let { a, b:c } = { a: '1', b: '2' };
   console.log(c); // 2



這里模式匹配的是b，真正被賦值的是變量是c。

這里我們講一下一個(gè)實(shí)用的例子，就是將現(xiàn)有對(duì)象的方法，賦值到某個(gè)變量。

// 數(shù)學(xué)對(duì)象中的幾個(gè)方法
let { log, sin, cos } = Math;

// 這里必須是log。不能是log1或者其他的變量，因?yàn)閘og是console的一個(gè)方法。
const { log } = console;
log('hello') // hello



再講一個(gè)例子。

// 獲取到的數(shù)據(jù)
let jsonData = {
id: 1,
status: "OK",
data: [1, 2]
};

let { id, status, data: number } = jsonData;
console.log(id, status, data); // 1，“OK”，[1,2]



對(duì)象的解構(gòu)也可以指定默認(rèn)值。

var {x: y = 3} = {x: 5};
console.log(y) // 5
var {x: y = 3} = {};
console.log(y) // 3



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

const [a, b, c, d, e] = 'hello';
console.log(a); // "h"
console.log(b); // "e"
let {length : x} = 'hello'; // 我們可以使用字符串自帶的length屬性，來(lái)獲取值。
console.log(x) // 5



結(jié)語(yǔ)：

最后，我們根據(jù)數(shù)組跟對(duì)象自身的特性講一下兩個(gè)實(shí)用的例子：
1、

// 返回?cái)?shù)組
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回對(duì)象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();



2、

// 參數(shù)是一組有次序的值，利用數(shù)組的解構(gòu)賦值。
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 參數(shù)是一組無(wú)次序的值，利用對(duì)象的解構(gòu)賦值。
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號(hào)：前端歷劫之路