最近一周遇到的项目代码里面有一些es6的语法不是很熟悉，遂查找并理解一番，在此记录一二，本章内容涉及到展开运算符和箭头函数的内容。
展开运算符
展开运算符（spread）是三个点（…）,可以将数组转为用逗号分隔的参数序列。如同rest参数的逆运算。
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5);
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>...]
用于数组字面量：
[...iterableObj, 4, 5, 6]
展开运算符主要用于函数调用，如下：
function func(x, y, z, a, b) {
console.log(x, y, z, a, b);
}
var args = [1, 2];
func(0, ...args, 3, ...[4]);
// 0 1 2 3 4
用法
1.更强大的数组字面量操作
var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]
2.替换apply方法
function func(x, y, z) { }
var args = [0, 1, 2];
// ES5写法
func.apply(null, args);
// ES6写法
func(...args);
箭头函数
// ES5
var selected = allJobs.filter(function (job) {
return job.isSelected();
});
// ES6
var selected = allJobs.filter(job => job.isSelected());
// ES5
var total = values.reduce(function (a, b) {
return a + b;
}, 0);
// ES6
var total = values.reduce((a, b) => a + b, 0);
// ES5
$("#confetti-btn").click(function (event) {
playTrumpet();
fireConfettiCannon();
});
// ES6
$("#confetti-btn").click(event => {
playTrumpet();
fireConfettiCannon();
});
小窍门
// 为与你玩耍的每一个小狗创建一个新的空对象
var chewToys = puppies.map(puppy => {}); // 这样写会报Bug！
var chewToys = puppies.map(puppy => ({})); //
箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域
// ES5
{
...
addAll: function addAll(pieces) {
var self = this;
_.each(pieces, function (piece) {
self.add(piece);
});
},
...
}
// ES6
{
...
addAll: function addAll(pieces) {
_.each(pieces, piece => this.add(piece));
},
...
}
// ES6的方法语法
{
...
addAll(pieces) {
_.each(pieces, piece => this.add(piece));
},
...
}
