ES6之变量的解构赋值用途

---

1 交换变量的值

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

2 使函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便了。

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

function example() {
  return {
    foo: 1,
    bar: 2
  }
}
var {foo, bar} = example();

3 函数参数的定义

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

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

4 提取JSON数据
解构赋值对提取JSON对象中的数据，尤其有用。

var jsonData = {
  id: 42,
  status: 'OK',
  data: [867, 5309]
}
var {id, status, data: number} = jsonData;
console.log(id, status, number);
//42, OK, [867, 5309]

5 函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  ....
}){};

6 遍历Map结构
任何部署了 Iterator 接口的对象，都可以用 for...of 循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便

var map = new Map();
map.set('first', 'hello');

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");

参考文献：http://wiki.jikexueyuan.com/project/es6/set-map.html