摘要：解構，一種黑魔法解構是從對象中提取出更小元素的過程。賦值是對解構出來的元素進行重新賦值?？偨Y本章講解了對象解構賦值和數組解構賦值，以及對象和數組混合情況下的解構賦值操作，最后一個知識點是解構函數的參數。

解構，一種黑魔法

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

下面的代碼你可能無法在瀏覽器上實時測試，推薦在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 
{a}-
  }
}

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

嵌套對象解構

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

let obj = {
  a: {
    b: {
      c: 5
    }
  }
}
const {a: } = 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

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

=> 返回文章目錄