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'
05-17 11:06