ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
摘自:https://muyiy.vip/blog/6/6.1.html ## 高阶函数 高阶函数英文叫 Higher-order function,它的定义很简单,就是至少满足下列一个条件的函数: * 接受一个或多个函数作为输入 * 输出一个函数 也就是说高阶函数是对其他函数进行操作的函数,可以将它们作为参数传递,**或者**是返回它们。 简单来说,高阶函数是一个接收函数作为参数传递**或者**将函数作为返回值输出的函数。 ## 函数作为参数传递 JavaScript 语言中内置了一些高阶函数,比如 Array.prototype.map,Array.prototype.filter 和 Array.prototype.reduce,它们接受一个函数作为参数,并应用这个函数到列表的每一个元素。我们来看看使用它们与不使用高阶函数的方案对比。 ### Array.prototype.map `map()`方法创建一个新数组,其结果是该数组中的每个元素都调用一个**提供的函数**后返回的结果,**原始数组不会改变**。传递给 map 的回调函数(`callback`)接受三个参数,分别是 currentValue、index(可选)、array(可选),除了`callback`之外还可以接受 this 值(可选),用于执行`callback`函数时使用的`this`值。 来个简单的例子方便理解,现在有一个数组`[1, 2, 3, 4]`,我们想要生成一个新数组,其每个元素皆是之前数组的两倍,那么我们有下面两种使用高阶和不使用高阶函数的方式来实现。 #### 不使用高阶函数 ~~~ const arr1 = [1, 2, 3, 4]; const arr2 = []; for (let i = 0; i < arr1.length; i++) { arr2.push( arr1[i] * 2); } console.log( arr2 ); // [2, 4, 6, 8] console.log( arr1 ); // [1, 2, 3, 4] ~~~ #### 使用高阶函数 ~~~ const arr1 = [1, 2, 3, 4]; const arr2 = arr1.map(item => item * 2); console.log( arr2 ); // [2, 4, 6, 8] console.log( arr1 ); // [1, 2, 3, 4] ~~~ ### Array.prototype.filter `filter()`方法创建一个新数组, 其包含通过提供函数实现的测试的所有元素,**原始数组不会改变**。接收的参数和 map 是一样的,其返回值是一个新数组、由通过测试的所有元素组成,如果没有任何数组元素通过测试,则返回空数组。 来个例子介绍下,现在有一个数组`[1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]`,我们想要生成一个新数组,这个数组要求没有重复的内容,即为去重。 #### 不使用高阶函数 ~~~ const arr1 = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]; const arr2 = []; for (let i = 0; i < arr1.length; i++) { if (arr1.indexOf( arr1[i] ) === i) { //索引为2,即i=2; arr1.indexOf( arr1[i] )=1,第一个1 arr2.push( arr1[i] ); } } console.log( arr2 ); // [1, 2, 3, 5, 4] console.log( arr1 ); // [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4] ~~~ #### 使用高阶函数 ~~~ const arr1 = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]; const arr2 = arr1.filter( (element, index, self) => { return self.indexOf( element ) === index; }); console.log( arr2 ); // [1, 2, 3, 5, 4] console.log( arr1 ); // [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4] ~~~ ### add 函数 用 JS 实现一个无限累加的函数`add`: ``` function add(a) { function sum(b) { // 使用闭包 a = a + b; // 累加 return sum; } sum.toString = function() { // 重写toString()方法 return a; } return sum; // 返回一个函数 } add(1)(2)(3)(4) // 10 ```