在我们遇到不需要给函数命名的情况时,尤其是需要将一个函数作为参数传递给另外一个函数时,我们可以创建匿名函数。
举个栗子:
const myFunc = function() {
const myVar = "value";
return myVar;
}
ES6 中使用箭头函数的示例:
const myFunc = () => {
const myVar = "value";
return myVar;
}
当不需要函数体,只返回一个值的时候,箭头函数可以省略 return 关键字和外面的大括号:
const myFunc = () => "value";
使用大括号就说明包含 “函数体”,里面可以包含多条语句,和常规的函数一样。如果省略大括号,那么箭头函数后面就只能有一行代码,比如一个赋值操作,或者一个表达式。而且,省略大括号会隐式返回这行代码的值。
带有参数的箭头函数:
const doubler = (item) => item * 2;
const addArr = (arr1, arr2) => arr1.concat(arr2);
如果只有一个参数,那也可以不用括号。没有参数,或者有多个参数时,需要使用括号。
//以下两种写法都有效
let double = (x) => 2 * x;
let triple = x => 3 * x;
高阶箭头函数
箭头函数在类似map() , reduce() , filter() 等需要其他函数作为参数来处理数据的高阶函数里会很好用。
map() , reduce() , filter() 是处理数组的方法。关于它们的说明:Day9- 陣列處理方法: map()、reduce()和filter()
需要将其他函数作为参数来处理的高阶函数示例:
FBPosts.filter(function(post) {
return post.thumbnail !== null && post.shares > 100 && post.likes > 500;
})
改用箭头函数:
FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500);
这段代码完成了上面同样的任务,却变得更加简短易懂了。
箭头函数虽然语法简洁,但也有很多场合不适用。箭头函数不能使用 arguments,super 和 new.targer,也不能用作构造函数。此外,箭头函数也没有 prototype 属性。
练习
有如下数组:
const numberArr = [4, 5.3, 7.8, 30, 3.14, 15.6, 8];
编写一个箭头函数,来计算数组中正整数的平方。
const returnSquare = (arr) => arr.filter(item => (item % 2 == 0 || item % 2 == 1)).map(item => item * item);
console.log(returnSquare(numberArr)); //[16, 900, 64]
这是freeCodeCamp上,ES6:编写高阶箭头函数的题目。解决的思路很简单,需要用到数组中filter() 和 map() 这两个方法。
filter():会回传一个数组,条件是return为true的元素。很适合用于搜索功能,能找到符合条件的元素。map():可以将原有的数组,通过函数内所回传的值组合成另外一个数组。
检索整数我采取的方式是让其模运算2,余数为 1 或者 0。
通关挑战像上面这样就已经可以测试通过了。但出于严谨,还应该添加“大于0”的条件才能确保是正整数。
arr.filter(item => (item % 2 == 0 || item % 2 == 1) && item > 0);
注意:这里需要将 (item % 2 == 0 || item % 2 == 1) 用 () 扩起来。
求平方就很简单了,只需让检索到结果乘以它自己就行了。
const returnSquare = (arr) => arr.filter(item => (item % 2 == 0 || item % 2 == 1) && item > 0).map(item => item * item);
console.log(returnSquare(numberArr)); //[16, 900, 64]
.map() 中的表达式可用下面的替换:
.map(item => Math.pow(item, 2)
// 或者
.map(item => item ** 2)
** 是 ECMAScript 7 新增的指数操作符。