ES6 变量解构赋值的用途

以下内容整理自 阮一峰 的《ECMAScript 6 入门》 第三章 变量的解构赋值

解构赋值的用法

• 数组

let [a, b, c] = [1, 2, 3];
let [foo = true] = [];

• 对象

let { foo, bar } = { foo: "aaa", bar: "bbb" };
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };

• 字符串

const [a, b, c, d, e] = 'hello';

• 函数

function add([x, y]){
    return x + y;
}
add([1, 2]); // 3

[[1, 2], [3, 4]].map(([a, b]) => a + b);

function move({x = 0, y = 0} = {}) {
    return [x, y];
}
move({x: 3, y: 8}); // [3, 8]

解构赋值的用途

• 交换变量的值

let x = 1;
let y = 2;
[x, y] = [y, x];

• 从函数返回多个值

function example() {
    return [1, 2, 3];
}
let [a, b, c] = example();

function app() {
    return {
        foo: 1,
        bar: 2
    };
}
let { foo, bar } = app();

• 函数参数的定义

function f([x, y, z]) { ... }
f([1, 2, 3]);

function g({ x, y, z }) { ... }
g({ z: 3, y: 2, x: 1 });

• 提取json数据

let jsonData = {
    id: 42,
    status: 'OK',
    data: [867, 5309]
};
let { id, status, data: number } = jsonData;

• 函数参数的默认值

jQuery.ajax = function(url, {
    async = true,
    beforeSend = function() {},
    cache = true,
    complete = function() {},
    crossDomain = false,
    global = true,
    // ... more config
}) {
    // ... do stuff
};

• 遍历Map结构

var 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) {
    console.log(key);
}
for (let [, value] of map) {
    console.log(value);
}

• 输入模块的指定方法

const { SourceConsumer, sourceNode } = require('source-map');

以上内容整理自 阮一峰 的《ECMAScript 6 入门》 第三章 变量的解构赋值