重學ES6 解構

解構：ES6按照必定模式，從數組和對象中提取值，而後對變量進行賦值。

數組解構

在以前，咱們聲明變量，都是這樣的

let a = 1
let b = 2
let c = 3
複製代碼

那麼，運用解構，咱們能夠進行這樣的賦值

let [a, b, c] = [1, 2, 3]
複製代碼

兩段代碼的結果是同樣的。

那難道只有這樣嗎？？？固然不是

當咱們想快速的取出某些變量時，只要等號兩邊模式相同，左邊變量就會被右邊賦予相應的值。

咱們如今有這樣一組數據，是一個二維數組,咱們想直接拿到二維數組裏面的值

//[1,[2,3],4,5]
let [a, [b, c], d, e] = [1,[2,3],4,5]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(d) // 4
console.log(e) // 5
複製代碼

解構也不必定就能成功，也是有前提的。

//以下就會失敗
let [foo] = 1
let [foo] = false
let [foo] = undefined
let [foo] = null
let [foo] = {}
//前五種是 轉爲對象以後 不具有 Lterator 接口
//最後一個 是自己就不具有 Lterator 接口
複製代碼

Lterator 接口：負責遍歷和訪問元素的接口

數組解構默認值

咱們可能在一些狀況下，得不到要解構的部分，要採起默認值來填充一些變量。解構賦值也容許咱們指定默認值。

let [x = 1] = []
//正常狀況下，解構是會失敗的，可是賦予了默認值以後，x即爲1
複製代碼

有一點須要注意：只有當 一個數組元素 ==== undefined時，默認值纔會生效

因此，以上代碼變成

// 默認值不會生效~
let [x = 1] = [null]
// x: null 


let [x = 1] = [undefined]
// x: 1
let [x = 1] = []
// x: 1
複製代碼

默認值若是是一個表達式，只有當用到這個表達式時，纔會去求值。

function g() {
  console.log('get val')
  return 'ok'
}

let [ x = g()] = []

let [ y = g()] = [1]
console.log(x) // 'ok'
console.log(y) // 1 這裏是可以經過解構直接拿到值的
複製代碼

對象的解構賦值

先來一個例子看看

let { foo, bar } = { foo: 'hello', bar: 'world'}
console.log( foo ) // hello
console.log( bar ) // world
複製代碼

這也是一個」模式「，和以前的數組模式相似

固然，數組解構能夠失敗，對象解構也是同樣的

let { foo } = { bar: 'hahaha'}
console.log( foo ) // undefined
複製代碼

若是沒有對應的同名屬性，那麼解構失敗，變量值爲 undefined

賦值到某個變量

一般咱們在使用某個對象的某個方法時，例如console.log,若是使用的頻率相對較高，那麼咱們也能夠利用對象解構來簡化方法的調用

let { log } = console
log( 'hello world' )
複製代碼

在一些狀況下，咱們也許有一些別的需求，給方法 設定一個 別名，對應解構出來的某個方法，仍是上面的例子，將 log 更名稱 print

let { log:print } = console
print( 'hello world' ) // 'hello world'
複製代碼

對象解構的默認值

var { x= 3} = {}
x //3

var { y: z = 10 }
z //10
複製代碼

這裏也是要求 對象的屬性 嚴格等於 === undefined 時，默認值才能生效

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null
複製代碼

字符串的解構賦值

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

let { length : len } = 'hello'
len // 5
複製代碼

函數參數的解構賦值

注意！！！！若是傳遞了參數那麼實際上就是要爲傳遞的實參進行解構賦值，當沒有傳遞實參的時候，纔會對函數參數的默認值進行解構賦值！！！

[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [3, 7]
複製代碼

關於默認值

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 move({x, y} = { x: 0, y: 0 }) { // 此處沒有解構默認值
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined] y解構失敗
move({}); // [undefined, undefined] x y 解構失敗
move(); // [0, 0] 沒有傳參，進行解構
複製代碼

用途

說了半天，也該有點用途了吧

交換變量的值

let x = 1
let y = 2
[x, y] = [y, x]
複製代碼

從函數返回多個值

function example() {
    return [1, 2, 3]
}

let [a, b, c] = example()
複製代碼

函數參數定義

//參數有順序，用數組進行解構
function f([x, y, z]){}
f([1, 2, 3])
//參數無順序，用對象進行解構
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
複製代碼

提取JSON數據

實際上就是對象解構

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]
複製代碼

函數參數的默認值

jQuery.ajax = function (url, { async = true, beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) { //默認解構爲{},這樣當傳遞實參進來的時候，屬性爲 undefined 就會 獲得默認解構的值
  // ... do stuff
};
複製代碼

遍歷 Map 解構

const map = new Map()
map.set('first','hello')
map.set('second','world')
for (let [key, value] of map) { //每個元素都是 [key,value] 的結構
    console.log(key + "is" + value)
}

// 獲取鍵名
for (let [key] of map) {
  // ...
}

// 獲取鍵值
for (let [,value] of map) {
  // ...
}
複製代碼

輸入模塊指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");
複製代碼