《深入理解ES6》筆記——解構：使資料訪問更便捷（5）

二月發表於2017-07-18
筆記

解構，一種黑魔法

解構是從物件中提取出更小元素的過程。賦值是對解構出來的元素進行重新賦值。

下面的程式碼你可能無法在瀏覽器上實時測試，推薦在babel官網線上測試程式碼：線上測試ES6程式碼網址

解構的分類

1、物件解構

2、陣列解構

3、混合解構

4、解構引數

物件解構

物件解構簡單的例子

let obj = {
  a: 1,
  b: [1, 2]
}
// 物件解構
const { a, b } = obj
console.log(a, b) //1  [1, 2]

在函式中使用解構賦值

解構是將物件或者陣列的元素一個個提取出來，而賦值是給元素賦值，解構賦值的作用就是給物件或者陣列的元素賦值。

在呼叫test()函式的時候，我們給引數設定了預設值3，如果不重新賦值，則列印出3,3，但是進行解構賦值後，將props物件的引數解構賦值給a和b，所以列印結果是{a: 1, b: 2}

let props = {
  a: 1,
  b: 2
}
function test(value) {
  console.log(value)
}
test({a=3, b=3} = props) // {a: 1, b: 2}

下面這個例子定義了a = 3,b = 3兩個變數，現在我們想修改這2個變數的值，採用解構賦值的方式可以這樣做：定義一個props物件，該物件包含2個屬性a和b，然後進行解構賦值，這時就能更新變數a和b的value。

let props = {
  a: 1,
  b: 2
},
a = 3,
b = 3;
//解構賦值
({ a, b } = props)
console.log(a, b) // 1, 2

在react的父子元件傳遞引數過程中，也使用到了解構賦值。react demo線上測試

class Parent extends React.Component {
  render() {
    const {a = 3, b = 3} = this.props
    return <h1>{a}-{b}</h1>
  }
}

ReactDOM.render(
  <Parent a="1" b="2" />,
  document.getElementById(`root`)
);
//在瀏覽器渲染 1-2，預設值是 3-3，但是因為傳遞了新的props進來，執行了解構賦值之後a和b更新了。

巢狀物件解構

當物件層次較深時，你也可以解構出來。

let obj = {
  a: {
    b: {
      c: 5
    }
  }
}
const {a: {b}} = obj
console.log(b.c) // 5

陣列解構

陣列解構比物件解構簡單，因為陣列只有陣列字面量，不需要像物件一個使用key屬性。

陣列解構
你可以選擇性的解構元素，不需要解構的元素就使用逗號代替。

let arr = [1, 2, 3]

//解構前2個元素
const [a, b] = arr
console.log(a,b) //1 2

//解構中間的元素
const [, b,] = arr
console.log(b) // 2

解構賦值
如果你沒有看明白上面說到的物件解構賦值的含義，那麼看完下面的陣列解構賦值，或許你會有比較清晰的理解。

這個例子中，正常情況下列印a的值是haha，但是將陣列arr的第一個元素解構賦值給a，a的值就變成了1。

//初始化一個變數a
let a = "haha";
//定義一個陣列
let arr = [1, 2, 3];
//解構賦值a，將arr陣列的第一個元素解構賦值給a，
[a] = arr;
console.log(a); // 1

使用解構賦值，還可以調換2個變數的值。

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

巢狀陣列解構

let arr = [1, [2, 3], 4];
let [a, [,b]] = arr;
console.log(a, b) // 1 3

//實際解構過程，左邊的變數和右邊的陣列元素一一對應下標。
var a = arr[0],
_arr$ = arr[1],
b = _arr$[1];

不定元素解構
三個點的解構賦值必須放在所有解構元素的最末尾，否則報錯。

let arr = [1, 2, 3, 4];
let […a] = arr;
console.log(a) //[1,2,3,4] 這種做法就是克隆arr陣列。

混合解構

混合解構指的是物件和陣列混合起來，執行解構操作，沒什麼難度。

let obj = {
  a: {
    id: 1
  },
  b: [2, 3]
}

const {
  a: {id},
  b:[...arr]
} = obj;
console.log(id, arr) //id = 1, arr = [2, 3]

解構引數

當給函式傳遞引數時，我們可以對每個引數進行解構，我給option的引數設定了預設值，這樣可以防止沒有給option傳參導致的報錯情況。

function Ajax(url, options) {
  const {timeout = 0, jsonp = true} = options
  console.log(url, timeout, jsonp)
};
Ajax(`baidu.com`, {
  timeout: 1000,
  jsonp: false
}) // "baidu.com" 1000 false

總結

本章講解了物件解構賦值和陣列解構賦值，以及物件和陣列混合情況下的解構賦值操作，最後一個知識點是解構函式的引數。每一個都是重點，特別是最後一個，解構引數恐怕你經常在用了，只是通常你沒發現。

=> 返回文章目錄

相關文章