JavaScript 高阶函数快速入门

翻译：疯狂的技术宅

原文：medium.freecodecamp.org/a-quick-int…

把函数以数据的形式去使用，并解锁一些强大的模式。

高阶函数

接受和/或返回另一个函数的函数被称为高阶函数。

之因此是高阶，是由于它并不是字符串、数字或布尔值，而是从更高层次来操做函数。漂亮的元。

使用 JavaScript 中的函数，你能够

• 将它们存储为变量
• 在数组中使用它们
• 将它们指定为对象属性（方法）
• 将它们做为参数进行传递
• 将它们从其余函数中返回

就像全部的其余数据同样。这是关键所在。

函数操做数据

字符串是数据

sayHi = (name) => `Hi, ${name}!`;
result = sayHi('User');
console.log(result); // 'Hi, User!'
复制代码

数字是数据

double = (x) => x * 2;
result = double(4);
console.log(result); // 8
复制代码

布尔型是数据

getClearance = (allowed) => allowed ?
  'Access granted' :
  'Access denied';
result1 = getClearance(true);
result2 = getClearance(false);
console.log(result1); // 'Access granted'
console.log(result2); // 'Access denied'
复制代码

对象是数据

getFirstName = (obj) => obj.firstName;
result = getFirstName({
  firstName: 'Yazeed'
});
console.log(result); // 'Yazeed'
复制代码

数组是数据

len = (array) => array.length;
result = len([1, 2, 3]);
console.log(result); // 3
复制代码

这5种类型是全部主流语言中的一等公民。

是什么使他们成为一等公民的？你能够传递它们，将它们存储在变量和数组中，将它们用做计算的输入。你能够像使用任何数据同样去使用它们。

函数也能够做为数据的形式去用

在javascript中把函数用做数据的4种方式：

1. 把它们看成参数传给其它函数
2. 把他们设定成对象属性
3. 保存在数组中
4. 把它们设为变量的形式

做为参数的函数

isEven = (num) => num % 2 === 0;
result = [1, 2, 3, 4].filter(isEven);
console.log(result); // [2, 4]
复制代码

看看 filter是如何用 isEven 来决定保留哪些数字的？ isEven是一个函数，是另外一个函数的参数。

它由每一个数字的 filter 调用，并使用返回值 true 或 false 来肯定这个数字是否应该保留或丢弃。

返回函数

add = (x) => (y) => x + y;
复制代码

add 须要两个参数，但不是一次所有提供。这是一个只须要 x 的函数，它返回一个只须要y的函数。由于 JavaScript 容许函数成为返回值 —— 就像字符串、数字、布尔值那样。

若是你愿意，仍然能够当即提供 x 和 y，并进行双重调用

result = add(10)(20);
console.log(result); // 30
复制代码

或者先 x 后 y：

add10 = add(10);
result = add10(20);
console.log(result); // 30
复制代码

让咱们回过头来看最后一个例子。 add10 是用一个参数调用 add 的结果。并控制台中输出它。

add10 是一个函数，它接受一个 y 并返回 x + y。在你提供 y 以后，它会立刻计算并返回你所要的最终结果。

更高的可重用性

高阶函数的最大好处多是更高的可重用性。没有它，JavaScript 数组的主要方法 —— map，filter 和 reduce 将不存在！

这是一个用户列表。咱们将对他们的信息进行一些计算。

users = [{
  name: 'Yazeed',
  age: 25
}, {
  name: 'Sam',
  age: 30
}, {
  name: 'Bill',
  age: 20
}];
复制代码

Map

若是没有高阶函数，咱们须要用循环来模仿 map 的功能。

getName = (user) => user.name;
usernames = [];
for (let i = 0; i < users.length; i++) {
  const name = getName(users[i]);
  usernames.push(name);
}
console.log(usernames);
// ["Yazeed", "Sam", "Bill"]
复制代码

或者咱们能够这样作！

usernames = users.map(getName);
console.log(usernames);
// ["Yazeed", "Sam", "Bill"]
复制代码

Filter

在没有高阶函数的世界中，咱们仍然须要循环来从新实现 filter 的功能。

startsWithB = (string) => string
  .toLowerCase()
  .startsWith('b');
namesStartingWithB = [];
for (let i = 0; i < users.length; i++) {
  if (startsWithB(users[i].name)) {
    namesStartingWithB.push(users[i]);
  }
}
console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]
复制代码

或者咱们能够这样作！

namesStartingWithB = users
  .filter((user) => startsWithB(user.name));
console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]
复制代码

Reduce

是的，reduce......没有更高阶的功能，实现不了那么多很酷的东西!!😁

total = 0;
for (let i = 0; i < users.length; i++) {
  total += users[i].age;
}
console.log(total);
// 75
复制代码

这个怎么样？

totalAge = users
  .reduce((total, user) => user.age + total, 0);
console.log(totalAge);
// 75
复制代码

总结

• 字符串、数字、bool、数组和对象能够存储为变量，数组和属性或方法。
• JavaScript 以相同的方式处理函数。
• 这容许在其余函数上运行另一个函数：高阶函数。
• Map、filter 和 reduce 是典型的例子 —— 而且使变换、搜索和列表求和等常见模式更加容易！

欢迎关注京程一灯公众号：京程一灯，获取更多前端干货。