ES6指北【6】——詳談解構賦值【附贈練習題】

ES6指北【6】——詳談解構賦值【附贈練習題】

1、何謂解構賦值？

1. 基本概念

首先咱們看一下MDN給的定義

解構賦值語法是一個 Javascript 表達式，這使得能夠將 值從數組或 屬性從對象 提取到不一樣的變量中

從定義中，咱們能夠發現：
解構賦值的做用是對變量進行賦值
主要經過兩個方面實現這個做用

• 數組【將數組中的值賦給變量】

let [a, b, c] = [0, 1, 2]
console.log(a, b, c) // 0 1 2

• 對象【將對象中屬性的值賦給變量】

let obj = {a: 0, b: 1, c: 2}
// es5咱們想把obj的值給取出來很是麻煩，並且obj的屬性過多的話，還要進行遍歷
let a = obj.a
let b = obj.b
let c = obj.c
// es6經過解構賦值就會很是簡單
let {a: a, b: b, c: c} = obj
// 對象鍵值相同，能夠只寫一個【ES6提供的語法糖】，因此咱們還能夠簡寫成下面這個樣子
let {a, b, c} = obj
console.log(a, b, c) // 0 1 2

2. 模式匹配

不少初學者都很難理解的問題是 左邊是數組/對象，右邊也是數組/對象，是怎麼進行匹配的呢？

其實這是對解構賦值一個很是大的誤解。解構賦值的本質是模式匹配——只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值
因此表達式的左邊並非數組/對象，而是變量的集合，只不過它的模式要與數組/對象相對應，這裏要特別強調的是對象的模式匹配還要保持鍵名【key】相同

那麼如今咱們就能夠從新定義一下解構賦值了： 把一些東西解放出來【解構】，按照模式匹配對應地賦值給其它變量

固然，上述示例適合於普通的變量聲明，工做中咱們會遇到許多特殊狀況，這就須要解構賦值的特殊用法了

2、解構賦值的常見特殊用法

1. 給部分變量賦值

// 數組
let [a, , c, , e] = [1, 2, 3, 4, 5]
console.log(a, c, e) // 1 3 5

// 不適用於對象

2. 設置默認值

這裏相似於函數默認參數值【ES6指北4有講解，感興趣的朋友能夠去看看】，先看個例子

// 數組
let [a, b, c, d] = [1, 2, 3]
console.log(d) // undefined
// 這裏的d未被賦值，因此值爲undefined
// 在這種狀況咱們能夠像對函數參數設置默認值同樣，對d也設置默認值
let [a, b, c, d = 4] = [1, 2, 3]
console.log(d) // 4

// 對象
let {a = {}, b = 1} = {a: undefined, b: 10}
console.log(a, b) // {} 10

3. 與函數返回值結合

// 數組
let f = () => [1, 2, 3]
let [a, b] = f()
console.log(a, b)

// 對象
let f = () => {
  return {a: 0, b: 1, c: 2}
}
let {a, b} = f()
console.log(a, b) // 0 1

4. 與rest參數結合

// 數組
let [a, ...args] = [10, 2, 3, 4, 5]
console.log(args) // [2, 3, 4, 5]
// 對象
let {a, ...args} = {a: 10, b: 5, c: 3}
console.log(args) // {b: 5, c: 3}

5. 與函數參數結合

// 對象
function test({x: y = 2}) {
  console.log(y)
}
// 等價於下面的形式
function test() {
  let {x: y = 2} = arguments[0]
  console.log(y)
}
// 這個時候你會發現，若是參數與結構賦值結合的話，等於對參數作出了數據類型【對象】的約束
// 好比，若是你傳遞的參數爲字符串
test('asdf')
// 那麼代碼的邏輯是這樣的
let {x: y = 2} = 'asdf' // 模式不匹配，解構失敗
// 那麼天然會報錯了

// 若是你但願傳遞其它數據類型不報錯的話，也很簡單，爲參數添加默認值就行【默認值爲對象】
function test({x: y = 2} = {}) {
  console.log(y)
}

// 數組
function test([a = 1, b = 2]) {
  console.log(a, b)
}

3、練習題

練習一

let obj = {a: 1, b: 2, c: {d: {e: 5}}}
let {a, b, c: {d}} = obj
console.log(d) // ?

練習二

function drawES2015Chart({size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}) {
  console.log(size, cords, radius);
}

drawES2015Chart() // ?
drawES2015Chart({size: 'small', cords: {a: 1}, radius: {b: 1}}) // ?