【重温基础】21.高阶函数

本文是 重温基础 系列文章的第二十一篇。 今日感受：想家。 本人自己整理的【Cute-JavaScript】资料，包含：【ES6/ES7/ES8/ES9】，【JavaScript基础（初级/中级/高级）】以及后面会添加的【JS面试题】三个系列。 欢迎您的支持！ 系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)【重温基础】1-14篇【重温基础】15.JS对象介绍【重温基础】16.JSON对象介绍【重温基础】17.WebAPI介绍【重温基础】18.相等性判断【重温基础】19.闭包【重温基础】20.事件本章节复习的是JS中的高阶函数，可以提高我们的开发效率。1.介绍个人简单理解为，一个函数可以接收其他函数作为参数，这种函数便称为高阶函数，而主要目的就是为了能接收其他函数作为参数。Q： 为什么可以接收一个函数作为参数？ A： 因为函数可以接收变量作为参数，而变量可以声明一个方法。简单实例：function a (x){ return ‘hi ’ + x;}function f (a, b){ return a(b);}f(a, ’leo’); // “hi leo"这段代码的意思：定义方法f，接收两个参数，方法a和变量b，在方法a中返回一段字符串，当执行方法f并传入参数方法a和参数b的时候，返回"hi leo”。 也可以直接调用JS内置方法：let a = 3, b = -2;function my_abs (val, fun){ return fun(val);}my_abs(a, Math.abs); // 3my_abs(b, Math.abs); // 2 2.常用高阶函数2.1 map()map()方法的作用是：接收一个函数作为参数，对数组中每个元素按顺序调用一次传入的函数并返回结果，不改变原数组，返回一个新数组。 通常使用方式：arr.map(callback())，更多详细介绍可以参考 MDN Array.map()。 参数：arr : 需要操作的数组；callback(currentValue, index, array, thisArg) : 处理的方法，四个参数；currentValue 当前处理的元素的值index 当前处理的元素的索引，可选array 调用map()方法的数组，可选currentVthisArgalue 执行 callback 函数时使用的 this 值，可选返回值： 返回一个处理后的新数组。 实例：let arr = [1, 3, -5];let a1 = arr.map(Math.abs); // a1 => [1, 3, 5];let a2 = arr.map(String);// a2 => [“1”, “3”, “-5”]let a3 = arr.map(function (x){ return x + 1;})// 等价于 a3=arr.map(x => x+1)// a3 => [2, 4, -4]对比 for…in 循环，map()书写起来更加简洁：let arr = [1, 3, -5];let a1 = [];for (var i=0; i<arr.length; i++){ a1.push(arr[i] + 1); }// a1 => [2, 4, -4]map()作为高阶函数，事实上它把运算规则抽象了。2.2 reduce()reduce()方法的作用是：接收一个函数，对数组进行累加操作，把累计结果和下一个值进行操作，最后返回最终的单个结果值。 通常使用方式：arr.reduce(callback(), initValue)，更多详细介绍可以参考 MDN Array.reduce()参数：callback(returnValue, currentValue, currentIndex, array) : 累记器的方法，四个参数：returnValue 上一次处理的返回值，或者初始值currentValue 当前处理的元素的值，可选currentIndex 当前处理的元素的索引，可选array 调用reduce()方法的数组，可选initValue 初次调用callback()时候returnValue参数的初始值，默认数组第一个元素，可选返回值： 返回一个最终的累计值。 实例：数组求和let arr = [1, 3, -5];let sum1 = arr.reduce((res, cur) => res + cur);// sum1 => -1let sum2 = arr.reduce((res, cur) => res + cur , 1);// sum1 => 0二维数组转化为一维let arr = [[1, 2], [3, 4], [5, 6]];let con = arr.reduce((res, cur) => res.concat(cur));// con => [1, 2, 3, 4, 5, 6]2.3 filter()filter()方法的作用是：接收一个函数，依次作用数组每个元素，并过滤符合函数条件的元素，将剩下的数组作为一个新数组返回。 通常使用方式：arr.filter(callback(), thisArg)，更多详细介绍可以参考 MDN Array.filter()参数：callback(ele, index, array) : 过滤条件的方法，当返回true则保存该元素，反之不保留，三个参数：ele 当前处理的元素index 当前处理的元素的索引，可选array 调用filter()方法的数组，可选thisArg 执行 callback 时的用于 this 的值，可选返回值： 返回一个过滤剩下的元素组成的新数组。 实例：过滤奇数值let arr = [1, 2, 3, 4, 5, 6];let res = arr.filter(x => x % 2 != 0);// res => [1, 3, 5]过滤不满足条件的值let arr = [1, 2, 3, 4, 5, 6];let res = arr.filter(x => x > 3);// res => [4, 5, 6]过滤空字符串let arr = [‘a’, ‘’, null, undefined, ‘b’, ‘’];let tri = arr.filter(x => x && x.trim());// tri => [“a”, “b”]总结下： filter()主要作为筛选功能，因此核心就是正确实现一个“筛选”函数。2.4 sort()sort()方法的作用是：接收一个函数，对数组的元素进行排序，并返回排序后的新数组。默认排序顺序是根据字符串Unicode码点。 通常使用方式：arr.sort(fun())，更多详细介绍可以参考 MDN Array.sort()compareFunction 可选用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。参数：fun(a, b) : 指定按某种顺序进行排列的函数，若省略则按照转换为的字符串的各个字符的Unicode位点进行排序，两个可选参数：fun() 返回 a和b两个值的大小的比较结果，sort()根据返回结果进行排序：若 fun(a, b) 小于 0 ，则 a 排在 b 前面；若 fun(a, b) 等于 0 ，则 a b 位置不变；若 fun(a, b) 大于 0 ，则 a 排在 b 后面；返回值： 返回排序后的新数组，并修改原数组。 实例：升序降序数组let arr = [1,5,2,3];let sort1 = arr.sort();// 等同于 let sort1 = arr.sort((a, b) => a - b);// sort1 => [1, 2, 3, 5]let sort2 = arr.sort((a, b) => b - a);// sort2 => [5, 3, 2, 1]字符串排序let arr1 = [‘AA’, ‘CC’, ‘BB’];let sort1 = arr1.sort();// sort1 => [“AA”, “BB”, “CC”]let arr2 = [‘AA’, ‘aa’, ‘BB’];let sort2 = arr2.sort();// sort2 => [“AA”, “BB”, “aa”]let arr3 = [‘AA’, ‘aa’, ‘BB’];let sort3 = arr3.sort((a, b) => a.toLowerCase() > b.toLowerCase());// sort3 => [“AA”, “aa”, “BB”]// 也可以写成：let sort3 = arr3.sort((a, b) => { let s1 = a.toLowerCase(); let s2 = b.toLowerCase(); return s1 > s2 ? 1 : s1 < s2 ? -1 : 0;})总结下： sort()主要作为排序功能，因此核心就是正确实现一个“排序”函数。3. 参考文章阮一峰 JS高阶函数Author王平安E-mailpingan8787@qq.com博 客www.pingan8787.com微 信pingan8787每日文章推荐https://github.com/pingan8787…JS小册js.pingan8787.com