翻译：猖獗的手艺宅
本文首发微信民众号：jingchengyideng
迎接关注，天天都给你推送新颖的前端手艺文章
把函数以数据的情势去运用，并解锁一些壮大的形式。
高阶函数
接收和/或返回别的一个函数的函数被称为高阶函数。
之所以是高阶，是由于它并不是字符串、数字或布尔值，而是从更高条理来操纵函数。美丽的元。
运用 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种体式格局：
- 把它们看成参数传给别的函数
- 把他们设定成对象属性
- 保存在数组中
- 把它们设为变量的情势
作为参数的函数
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 是典范的例子 —— 而且使变更、搜刮和列表乞降等罕见形式越发轻易！
本文首发微信民众号：jingchengyideng
迎接扫描二维码关注民众号，天天都给你推送新颖的前端手艺文章
