ES6 函数参数的 destructuring

更新日期: 2017-06-20 阅读次数: 3368 分类: Javascript

在 weex 中使用 vuex 的 actions 时,发现了 ES6 的一种新语法

export function FETCH_USER ({ commit, state }, { id }) {
  return state.users[id]
    ? Promise.resolve(state.users[id])
    : fetchUser(id).then(user => commit('SET_USER', { user }))
}

之前从未见过函数可以这样定义, 参数居然都是 object。查了一下,发现是 ES6 的新特性

函数参数 destructuring - 即,解构赋值

写了一个 demo 测试一下

function hello(frameworks) {
	console.log("hello " + frameworks.f1);
	console.log("hello " + frameworks.f2);
}

function hello2({f1, f2}) {
	console.log("hello " + f1);
	console.log("hello " + f2);
}

console.log("ES5");
hello({f1: 'vuejs', f2: 'weex'});
console.log("ES6");
hello2({f1: 'vuejs', f2: 'weex'});

node 下的运行结果

$ node fun.js
ES5
hello vuejs
hello weex
ES6
hello vuejs
hello weex

函参 destructuring 的好处

首先,可读性大大提高,否则,没有注释的情况下,需要阅读代码才知道具体的参数解构。 文档中提到的其他好处,暂时没有实际体会到。

参考

领取618阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年06月05日 世界环境日
2020年06月05日 芒种
2020年06月06日 全国爱眼日
2020年06月11日 中国人口日
2020年06月20日 世界难民日
2020年06月21日 父亲节
2020年06月21日 夏至
2020年06月22日 中国儿童慈善活动日
2020年06月23日 国际奥林匹克日
2020年06月25日 全国土地日
2020年06月25日 端午节
2020年06月26日 国际禁毒日
查看更多节日