es6筛选函数的用法（妙用es6中的箭头函数）
es6筛选函数的用法（妙用es6中的箭头函数）const powerOf2 = [1 2 3 4].map(el => el ** 2) // [ 1 4 9 16 ] 使用ES5的写法:如下：const add1 = (x) => x 1; const sum = (num1 num2) => num1 num2; const sum = (num1 num2) => { return num1 num2; } 与单个参数不同的是，多个参数必须用括号包含起来，单个参数括号是可选的如果箭头函数返回对象，则需要将它们包括在括号中，如下const details = name => ({ firstName: name });//如果不加大括号返回的则为undefined 作为回调使用箭头函数再将回调传递给像map、filter之类的方法时，会更加简单
在ES6中ECMAScript引入了一种新的创建和使用函数的方法——箭头函数，本文我们将对比一下传统函数的写法和箭头函数之间的一些差异。
箭头函数的出现目的是为了解决传统函数写法中的几个痛点，箭头函数的优势在于：
- 更简短的写法()=>{}对比function(){}
- 不绑定this
在箭头函数中，参数列表和函数体由=>符号分隔。也就是说，function关键字有效地被替换为=>。首先是参数，然后是=>符号，在然后是函数体。如下简要概述：
- 空函数（当函数执行的时候会返回undefined）
const func1 = () => { };
- 单参数
const add1 = x => x 1;
在参数本身基础上加一。函数主体是x 1 这个地方没有return语句，当只有一行表达式的时候会默认返回表达式结果。
- 多参数
const add1 = (x) => x 1; const sum = (num1 num2) => num1 num2; const sum = (num1 num2) => { return num1 num2; }
与单个参数不同的是，多个参数必须用括号包含起来，单个参数括号是可选的
- 返回对象
如果箭头函数返回对象，则需要将它们包括在括号中，如下
const details = name => ({ firstName: name });//如果不加大括号返回的则为undefined
- 作为回调
使用箭头函数再将回调传递给像map、filter之类的方法时，会更加简单
如下：
const powerOf2 = [1 2 3 4].map(el => el ** 2) // [ 1 4 9 16 ]
使用ES5的写法:
const powerOf2 = [1 2 3 4].map(function(el) { return el ** 2; }); 箭头函数中的this
箭头函数和传统函数最大的区别就是this的使用，箭头函数中没有this的概念，在箭头函数中使用this，相当于是使用了父作用域的this，我们来看下一段代码直接了当的来理解
const details = { name: 'Arfat' friends: ['Bob' 'Alex'] getFriends: function () { this.friends.forEach(friend => { console.log(this.name " is friends with " friend); }); } } details.getFriends(); // Arfat is friends with Bob // Arfat is friends with Alex
从上面的结果显示this.拿到的是父作用域中name的值。
箭头函数与传统函数的区别箭头函数在某些方面和传统函数不同
- 不能使用arguments特殊变量
arguments变量的目的是在类似数组的对象中公开所有参数。在ES6中，我们有rest参数来代替
- 不能用作构造函数
箭头函数没有自己的new.target属性，因此不能用作构造函数，如下代码会报错
const Person = name => { this.name = name; } const person1 = new Person('Arfat'); // Will throw an error ‘Person is not a constructor’
- 无法使用this绑定
在箭头函数中this受到了约束，所以无法手动分配this，但仍然可以使用.bind()或.apply()
const add = (a b) => a b; const add5 = add.bind(null 5); add5(7); // 12
- 不能使用generator 函数
generator 必须使用function*语法。
总结箭头函数的出现只是为了简化传统函数，但是并不能取代它，有些情况下，箭头函数无法重写传统函数。只是在大多数情况下，不依赖于动态的this值或者当函数依赖父作用域的this时可以有效的利用好箭头函数，本文简单的介绍了ES6中的箭头函数，如果对你有帮助可以点个关注呦，在这里你可以学到更多！
