DailyENJS 致力于翻译优秀的前端英文技术文章，为技术同学带来更好的技术视野。
image
如果你正在学习JavaScript，那么你肯定遇到过高阶函数这个术语。虽然听起来很复杂，但事实并非如此。
使JavaScript适合函数式编程的原因是它拥有高阶函数。
高阶函数在JavaScript中被广泛使用。如果你已经使用了 JavaScript 一段时间，你可能不知不觉已经使用了它们。要完全理解这个概念，首先必须了解函数式编程是什么以及 First-Class Functions 的概念。
函数式编程是什么
在大多数简单的术语中，函数式编程是一种编程形式，你可以将函数作为参数传递给其他函数，并且也可以将它们作为值返回。在函数式编程中，我们以函数思维进行思考和写代码。
JavaScript，Haskell，Clojure，Scala和Erlang都是实现函数式编程的语言。
First-Class Functions
如果你一直在学习JavaScript，你可能听说过JavaScript将函数视为一等公民。那是因为在JavaScript或任何其他函数式编程语言中，函数都是对象。
在JavaScript中，函数是一种特殊类型的对象。它们是Function对象。例如：
function greeting() {
console.log('Hello World');
}
// Invoking the function
greeting(); // prints 'Hello World'
为了证明函数是JavaScript中的对象，我们可以这么做：
// We can add properties to functions like we do with objects
greeting.lang = 'English';
// Prints 'English'
console.log(greeting.lang)
注意: 虽然这在JavaScript中完全OK，但这被认为是一种有害的做法。你不应该向函数对象添加随机属性，如果必须添加属性，请使用对象。
在JavaScript中，你可以使用使用函数就像使用其他类型（如对象，字符串或数字）一样。你可以将它们作为参数传递给其他函数（回调），将它们分配给变量并传递它们等等。这就是JavaScript中的函数被称为一等公民的原因。
将函数赋值给变量
我们可以在JavaScript中将函数赋值给变量，例如：
const square = function(x) {
return x * x;
}
// prints 25
square(5);
我们也可以传递它们。例如：
const foo = square;
// prints 36
foo(6);
将函数作为参数传递
我们可以将函数作为参数传递给其他函数。例如:
function formalGreeting() {
console.log("How are you?");
}
function casualGreeting() {
console.log("What's up?");
}
function greet(type, greetFormal, greetCasual) {
if(type === 'formal') {
greetFormal();
} else if(type === 'casual') {
greetCasual();
}
}
// prints 'What's up?'
greet('casual', formalGreeting, casualGreeting);
现在我们知道了什么是 first-class functions ，让我们深入了解JavaScript中的高阶函数。
高阶函数
高阶函数是对其他函数进行操作的函数，可以将函数作为参数传递或者返回一个函数。简单来说，高阶函数是一个函数，它接收函数作为参数或将函数作为输出进行返回。
例如，Array.prototype.map，Array.prototype.filter 和 Array.prototype.reduce 是语言中内置的一些高阶函数。
实践高阶函数
让我们看一下内置高阶函数的一些例子，看看它与我们不使用高阶函数的解决方案的比较。
Array.prototype.map
map() 方法通过调用一个回调函数来创建一个新数组。map() 方法将从回调函数中获取每个返回的值，并使用这些值创建一个新数组。
map()方法的回调函数接受3个参数：element，index 和 array。
来看一些例子：
例子1
假设我们有一个数组，我们想要创建一个新数组，这个数组的值是第一个数组的每个值的两倍。让我们看看如何使用和不使用高阶函数来解决问题：
不使用高阶函数：
const arr1 = [1, 2, 3];
const arr2 = [];
for(let i = 0; i < arr1.length; i++) {
arr2.push(arr1[i] * 2);
}
// prints [ 2, 4, 6 ]
console.log(arr2);
使用高阶函数：
const arr1 = [1, 2, 3];
const arr2 = arr1.map(function(item) {
return item * 2;
});
console.log(arr2);
我们甚至可以使用箭头函数使其变得更加简洁：
const arr1 = [1, 2, 3];
const arr2 = arr1.map(item => item * 2);
console.log(arr2);
例子2
假设我们有一个包含不同人的出生年份的数组，我们想要创建一个包含其年龄的数组。例如：
不使用高阶函数：
const birthYear = [1975, 1997, 2002, 1995, 1985];
const ages = [];
for(let i = 0; i < birthYear.length; i++) {
let age = 2018 - birthYear[i];
ages.push(age);
}
// prints [ 43, 21, 16, 23, 33 ]
console.log(ages);
使用高阶函数：
const birthYear = [1975, 1997, 2002, 1995, 1985];
const ages = birthYear.map(year => 2018 - year);
// prints [ 43, 21, 16, 23, 33 ]
console.log(ages);
Array.prototype.filter
filter() 方法创建了一个通过函数过滤操作后组成的新数组，filter() 的回调函数接受三个参数：element, index 和 array。
来看一些例子：
例子1
假设我们有一个包含名称和年龄属性的对象的数组。我们想要创建一个仅包含成年人（年龄大于或等于18）的数组。
不使用高阶函数：
const persons = [
{ name: 'Peter', age: 16 },
{ name: 'Mark', age: 18 },
{ name: 'John', age: 27 },
{ name: 'Jane', age: 14 },
{ name: 'Tony', age: 24},
];
const fullAge = [];
for(let i = 0; i < persons.length; i++) {
if(persons[i].age >= 18) {
fullAge.push(persons[i]);
}
}
console.log(fullAge);
使用高阶函数：
const persons = [
{ name: 'Peter', age: 16 },
{ name: 'Mark', age: 18 },
{ name: 'John', age: 27 },
{ name: 'Jane', age: 14 },
{ name: 'Tony', age: 24},
];
const fullAge = persons.filter(person => person.age >= 18);
console.log(fullAge)
Array.prototype.reduce
reduce 方法对调用数组的每个成员执行回调函数，产生一个输出值。reduce方法接受两个参数：1）reducer函数（回调），2）和一个可选的 initialValue。
reducer 函数（回调）接受四个参数：accumulator，currentValue，currentIndex，sourceArray。
如果提供了 initialValue，则累加器将等于initialValue，currentValue将等于数组中的第一个元素。
如果没有提供initialValue，则累加器将等于数组中的第一个元素，currentValue将等于数组中的第二个元素。
例子1
假设我们必须累加一组数字得到和：
使用高阶函数：
const arr = [5, 7, 1, 8, 4];
const sum = arr.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
});
// prints 25
console.log(sum);
每次在数组中的每个值上调用reducer函数时，累加器都会保留reducer函数返回的先前操作的结果，并将currentValue设置为数组的当前值。最后，结果存储在sum变量中。
我们还可以为此函数提供初始值：
const arr = [5, 7, 1, 8, 4];
const sum = arr.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 10);
// prints 35
console.log(sum);
不使用高阶函数：
const arr = [5, 7, 1, 8, 4];
let sum = 0;
for(let i = 0; i < arr.length; i++) {
sum = sum + arr[i];
}
// prints 25
console.log(sum);
你可以看到使用高阶函数使我们的代码更清晰，更简洁，更简单。
创建我们自己的高阶函数
到目前为止，我们看到了语言中内置的各种高阶函数。现在让我们创建自己的高阶函数。
我们假设JavaScript没有原生 map 方法。我们可以自己创建它，从而创建我们自己的高阶函数。
假设我们有一个字符串数组，我们希望将此数组转换为整数数组，其中每个元素表示原始数组中字符串的长度。
const strArray = ['JavaScript', 'Python', 'PHP', 'Java', 'C'];
function mapForEach(arr, fn) {
const newArray = [];
for(let i = 0; i < arr.length; i++) {
newArray.push(
fn(arr[i])
);
}
return newArray;
}
const lenArray = mapForEach(strArray, function(item) {
return item.length;
});
// prints [ 10, 6, 3, 4, 1 ]
console.log(lenArray);
在上面的例子中，我们创建了一个高阶函数 mapForEach，它接受一个数组和一个回调函数fn。
回调函数 fn 接收数组的当前元素并返回该元素的长度，该元素存储在newArray中。for 循环完成后，返回 newArray 并将其赋值给 lenArray
结论
我们已经了解了高阶函数和一些内置的高阶函数。我们还学习了如何创建自己的高阶函数。简而言之，高阶函数是一个函数，可以接收函数作为参数，甚至可以返回一个函数。高阶函数就像常规函数一样，具有接收和返回其他函数的额外能力，即参数和输出。
原文： https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad
网友评论