es6 函数解构的用途

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'

 

转载于:https://www.cnblogs.com/garfieldzhong/p/8046626.html