ES6之解构赋值详解

数组的解构赋值

基础用法

let [a ,b ,c] = [1, 2 ,3]
// 上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。 本质上属于模式匹配。
console.log('a', a, 'b', b, 'c', c)  // => a = 1, b = 2 ,c = 3
// 1.1 解构不成功  返回undefined  即左边大于右边
let [bar, foo] = [1]
console.log('foo', foo)  // => foo返回undefined
// 1.2 不完全解构  可以成功  即左边小于右边
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('解构不成功，undefined后取默认值', x1) // => x2 = 1
console.log('解构成功， null不严格等于undefined', x2) // => x2_null = null

对象的解构赋值

基础用法

// 变量必须与属性同名，才能取到正确的值。
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
// 因此 ，对象的解构赋值，本质上是下面形式的简写
// 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

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量

应用

1.交换变量的值

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

2. 取出函数返回的多个值

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

3.提取 JSON 数据
解构赋值对提取 JSON 对象中的数据，尤其有用。

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 数据的值。

4.函数参数的默认值

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

5.遍历 Map 结构
任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

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.输入模块的指定方法
加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

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

7. 函数参数的定义
   解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

以上参考来源：阮一峰的ES6入门指南

我的实践：
1.函数参数的定义

// 函数设置默认参数
fetchSalesAreaBlock ({page = 0, pageSize = 10, areaId = '', areaName = ''} = {}) {
  let params = {
    area_id: areaId,
    area_name: areaName,
    page: page,
    size: pageSize
  }
  let params2 = {page}
  console.log('获取销售区域接口-参数', params2)
  fetchSalesArea(params).then(res => {
    console.log('获取销售区域接口-数据', 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('获取销售区域接口-报错', err)
  })
}

//  调用函数时只传指定参数即可
this.fetchSalesAreaBlock({page: page})
this.fetchSalesAreaBlock({areaName: this.searchJson.area_name})

2.当对象的键值与键名一致的时候

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