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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容