《深刻理解ES6》筆記——解構：使數據訪問更便捷（5）

解構，一種黑魔法

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

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

解構的分類

一、對象解構

二、數組解構

三、混合解構

四、解構參數

對象解構

對象解構簡單的例子

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

總結

本章講解了對象解構賦值和數組解構賦值，以及對象和數組混合狀況下的解構賦值操做，最後一個知識點是解構函數的參數。每個都是重點，特別是最後一個，解構參數恐怕你常常在用了，只是一般你沒發現。

=> 返回文章目錄