数组的解构赋值
基础用法
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]
- 取出函数返回的多个值
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")
- 函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值
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}
