摘要：解構(gòu)，一種黑魔法解構(gòu)是從對(duì)象中提取出更小元素的過程。賦值是對(duì)解構(gòu)出來的元素進(jìn)行重新賦值。總結(jié)本章講解了對(duì)象解構(gòu)賦值和數(shù)組解構(gòu)賦值，以及對(duì)象和數(shù)組混合情況下的解構(gòu)賦值操作，最后一個(gè)知識(shí)點(diǎn)是解構(gòu)函數(shù)的參數(shù)。

解構(gòu)，一種黑魔法

解構(gòu)是從對(duì)象中提取出更小元素的過程。賦值是對(duì)解構(gòu)出來的元素進(jìn)行重新賦值。

下面的代碼你可能無法在瀏覽器上實(shí)時(shí)測(cè)試，推薦在babel官網(wǎng)在線測(cè)試代碼：在線測(cè)試ES6代碼網(wǎng)址

1、對(duì)象解構(gòu)

2、數(shù)組解構(gòu)

3、混合解構(gòu)

4、解構(gòu)參數(shù)

對(duì)象解構(gòu)簡單的例子

let obj = {
  a: 1,
  b: [1, 2]
}
// 對(duì)象解構(gòu)
const { a, b } = obj
console.log(a, b) //1  [1, 2]

在函數(shù)中使用解構(gòu)賦值

解構(gòu)是將對(duì)象或者數(shù)組的元素一個(gè)個(gè)提取出來，而賦值是給元素賦值，解構(gòu)賦值的作用就是給對(duì)象或者數(shù)組的元素賦值。

在調(diào)用test()函數(shù)的時(shí)候，我們給參數(shù)設(shè)置了默認(rèn)值3，如果不重新賦值，則打印出3,3，但是進(jìn)行解構(gòu)賦值后，將props對(duì)象的參數(shù)解構(gòu)賦值給a和b，所以打印結(jié)果是{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}

下面這個(gè)例子定義了a = 3,b = 3兩個(gè)變量，現(xiàn)在我們想修改這2個(gè)變量的值，采用解構(gòu)賦值的方式可以這樣做：定義一個(gè)props對(duì)象，該對(duì)象包含2個(gè)屬性a和b，然后進(jìn)行解構(gòu)賦值，這時(shí)就能更新變量a和b的value。

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

在react的父子組件傳遞參數(shù)過程中，也使用到了解構(gòu)賦值。react demo在線測(cè)試

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

ReactDOM.render(
  ,
  document.getElementById("root")
);
//在瀏覽器渲染 1-2，默認(rèn)值是 3-3，但是因?yàn)閭鬟f了新的props進(jìn)來，執(zhí)行了解構(gòu)賦值之后a和b更新了。

嵌套對(duì)象解構(gòu)

當(dāng)對(duì)象層次較深時(shí)，你也可以解構(gòu)出來。

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

數(shù)組解構(gòu)比對(duì)象解構(gòu)簡單，因?yàn)閿?shù)組只有數(shù)組字面量，不需要像對(duì)象一個(gè)使用key屬性。

數(shù)組解構(gòu)
你可以選擇性的解構(gòu)元素，不需要解構(gòu)的元素就使用逗號(hào)代替。

let arr = [1, 2, 3]

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

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

解構(gòu)賦值
如果你沒有看明白上面說到的對(duì)象解構(gòu)賦值的含義，那么看完下面的數(shù)組解構(gòu)賦值，或許你會(huì)有比較清晰的理解。

這個(gè)例子中，正常情況下打印a的值是haha，但是將數(shù)組arr的第一個(gè)元素解構(gòu)賦值給a，a的值就變成了1。

//初始化一個(gè)變量a
let a = "haha";
//定義一個(gè)數(shù)組
let arr = [1, 2, 3];
//解構(gòu)賦值a，將arr數(shù)組的第一個(gè)元素解構(gòu)賦值給a，
[a] = arr;
console.log(a); // 1

使用解構(gòu)賦值，還可以調(diào)換2個(gè)變量的值。

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

嵌套數(shù)組解構(gòu)

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

//實(shí)際解構(gòu)過程，左邊的變量和右邊的數(shù)組元素一一對(duì)應(yīng)下標(biāo)。
var a = arr[0],
_arr$ = arr[1],
b = _arr$[1];

不定元素解構(gòu)
三個(gè)點(diǎn)的解構(gòu)賦值必須放在所有解構(gòu)元素的最末尾，否則報(bào)錯(cuò)。

let arr = [1, 2, 3, 4];
let [...a] = arr;
console.log(a) //[1,2,3,4] 這種做法就是克隆arr數(shù)組。

混合解構(gòu)指的是對(duì)象和數(shù)組混合起來，執(zhí)行解構(gòu)操作，沒什么難度。

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

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

當(dāng)給函數(shù)傳遞參數(shù)時(shí)，我們可以對(duì)每個(gè)參數(shù)進(jìn)行解構(gòu)，我給option的參數(shù)設(shè)置了默認(rèn)值，這樣可以防止沒有給option傳參導(dǎo)致的報(bào)錯(cuò)情況。

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

本章講解了對(duì)象解構(gòu)賦值和數(shù)組解構(gòu)賦值，以及對(duì)象和數(shù)組混合情況下的解構(gòu)賦值操作，最后一個(gè)知識(shí)點(diǎn)是解構(gòu)函數(shù)的參數(shù)。每一個(gè)都是重點(diǎn)，特別是最后一個(gè)，解構(gòu)參數(shù)恐怕你經(jīng)常在用了，只是通常你沒發(fā)現(xiàn)。

=> 返回文章目錄