阅读 151

使用箭头函数编写简洁的匿名函数

在我们遇到不需要给函数命名的情况时,尤其是需要将一个函数作为参数传递给另外一个函数时,我们可以创建匿名函数。

举个栗子:

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);
复制代码

这段代码完成了上面同样的任务,却变得更加简短易懂了。 箭头函数虽然语法简洁,但也有很多场合不适用。箭头函数不能使用 argumentssupernew.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() 这两个方法。

  1. filter():会回传一个数组,条件是returntrue 的元素。很适合用于搜索功能,能找到符合条件的元素。
  2. 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 新增的指数操作符。

文章分类
前端