ES6 变量的解构赋值用途

1、交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

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]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

4、提取 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]

5、设置函数参数的默认值

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

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

6、遍历 Map 结构

任何部署了Iterator接口的对象（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) {
  // ...
}

7、引入模块的指定方法

加载模块时，往往需要指定引入哪些方法。解构赋值使引入语句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

ES6 变量的解构赋值用途

猜你喜欢