數組的解構賦值
基礎用法
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}
