ES6 函数参数的 destructuring

更新日期: 2017-06-20 阅读次数: 6525 分类: 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 的好处

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

参考

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式