數(shù)組的解構(gòu)賦值

基礎(chǔ)用法

let [a ,b ,c] = [1, 2 ,3]
// 上面代碼表示，可以從數(shù)組中提取值，按照對應(yīng)位置，對變量賦值。 本質(zhì)上屬于模式匹配。
console.log('a', a, 'b', b, 'c', c)  // => a = 1, b = 2 ,c = 3
// 1.1 解構(gòu)不成功  返回undefined  即左邊大于右邊
let [bar, foo] = [1]
console.log('foo', foo)  // => foo返回undefined
// 1.2 不完全解構(gòu)  可以成功  即左邊小于右邊
let [x, y] = [1, 2, 3];
console.log('x', x, 'y', y) // => x = 1 , y = 2

指定默認值

let [x1 = 1] = [undefined]
let [x2 = 1] = [null]
console.log('解構(gòu)不成功，undefined后取默認值', x1) // => x2 = 1
console.log('解構(gòu)成功， null不嚴格等于undefined', x2) // => x2_null = null

對象的解構(gòu)賦值

基礎(chǔ)用法

// 變量必須與屬性同名，才能取到正確的值。
let { foo, bar } = { foo: "aaa", bar: "bbb" }
console.log('foo:', foo, 'bar:', bar) // => foo = aaa , bar = bbb
// 如果變量名與屬性名不一致，必須寫成下面這樣
let { foo: baz } = { foo: 'aaa', bar: 'bbb' }
console.log('baz', baz) // => baz = aaa
// 因此 ，對象的解構(gòu)賦值，本質(zhì)上是下面形式的簡寫
// let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }
// foo是匹配的模式，baz才是變量。真正被賦值的是變量baz，而不是模式foo。

指定默認值
默認值生效的條件是，對象的屬性值嚴格等于undefined。

let {x = 3} = {x: undefined} // x = 3

let {x = 3} = {x: null} //x = null

對象的解構(gòu)賦值，可以很方便地將現(xiàn)有對象的方法，賦值到某個變量

應(yīng)用

1.交換變量的值

let x = 1
let y = 2
[x, y] = [y, x]

2. 取出函數(shù)返回的多個值

function example() {
  return [1, 2, 3]
}
let [a, b, c] = example()

3.提取 JSON 數(shù)據(jù)
解構(gòu)賦值對提取 JSON 對象中的數(shù)據(jù)，尤其有用。

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

上面代碼可以快速提取 JSON 數(shù)據(jù)的值。

4.函數(shù)參數(shù)的默認值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
}

5.遍歷 Map 結(jié)構(gòu)
任何部署了 Iterator 接口的對象，都可以用for...of循環(huán)遍歷。Map 結(jié)構(gòu)原生支持 Iterator 接口，配合變量的解構(gòu)賦值，獲取鍵名和鍵值就非常方便。

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

如果只想獲取鍵名，或者只想獲取鍵值，可以寫成下面這樣。

// 獲取鍵名
for (let [key] of map) {
  // ...
}

// 獲取鍵值
for (let [,value] of map) {
  // ...
}

6.輸入模塊的指定方法
加載模塊時，往往需要指定輸入哪些方法。解構(gòu)賦值使得輸入語句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map")

7. 函數(shù)參數(shù)的定義
   解構(gòu)賦值可以方便地將一組參數(shù)與變量名對應(yīng)起來。

// 參數(shù)是一組有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 參數(shù)是一組無次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

以上參考來源：阮一峰的ES6入門指南

我的實踐：
1.函數(shù)參數(shù)的定義

// 函數(shù)設(shè)置默認參數(shù)
fetchSalesAreaBlock ({page = 0, pageSize = 10, areaId = '', areaName = ''} = {}) {
  let params = {
    area_id: areaId,
    area_name: areaName,
    page: page,
    size: pageSize
  }
  let params2 = {page}
  console.log('獲取銷售區(qū)域接口-參數(shù)', params2)
  fetchSalesArea(params).then(res => {
    console.log('獲取銷售區(qū)域接口-數(shù)據(jù)', res)
    if (!res.data) return
    this.tableData = res.data.sale_area_dto_list
    this.total = res.data.total
    this.pageSize = res.data.page_size
  }).catch(err => {
    console.log('獲取銷售區(qū)域接口-報錯', err)
  })
}

//  調(diào)用函數(shù)時只傳指定參數(shù)即可
this.fetchSalesAreaBlock({page: page})
this.fetchSalesAreaBlock({areaName: this.searchJson.area_name})

2.當(dāng)對象的鍵值與鍵名一致的時候

let name = 'heightzhang'
let age = 18
let obj = {name, age}
// => {name: 'heightzhang', age：18}