es6的变量解构赋值很方便,那具体有哪些用途呢?
1、变换变量的值
let n = 10;
let m = 20; [n, m] = [m, n]
这样n , m 的值 会互换, 即:n = 20, m = 10, 这种写法简洁,易读,语义清晰。
2、从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或者对象里返回,有了解构赋值,取出这些值就非常方便。
// 返回一个数组
function example() {
return [1, 2, 3]
} let [a, b, c] = example() // 返回一个对象
function example() {
return {
foo: 1,
bar: 2
}
} let {foo, bar} = example()
3、函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来
// 参数是一组有次序的值
function f([x, y, z]) {
return x + y + z;
}
f([1, 2, 3]) // 参数是一组无次序的值
function f({x, y, z}) {
return x + y + z;
}
f(z: 3, x: 1, y: 2)
4、提取JSON数据
解构赋值对提取JSON对象的数据,尤其有用
let jsonData = {
id: 42,
status: 'OK',
data: [123, 456]
} let {id, status, data: number} = jsonData; console.log(id, status, number)
// 42, 'OK', [123, 456]
可以快速提取JSON数据的值
5、函数参数的默认值
jQuery.ajax = function (url, {
async = true,
beforeSend = function() {},
cache = true,
complete = function() {},
crossDomain = false,
global = true
}) { }
6、遍历Map 结构
const map = new Map()
map.set('first', 'hello')
map.set('second', 'world')
for (let [key, value] of map) {
console.log(key + ' is ' + value;
} // 只获取键名
for (let [key] of map) {} // 只获取值
for (let [,value] of map) {}
7、 输入模块的指定方法
加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰
const {SourceMapConsumer, SourceNode} = require('source-map') // vue中使用解构赋值取vuex的方法
import {mapActions, mapState} from 'vuex'