es6展开运算符及箭头函数

最近一周遇到的项目代码里面有一些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));
  },
  ...
}