js中对数组处理的常见三种高阶函数:filter、map、reduce
常见编程范式有:命令式/声明式;面向对象编程/函数式编程。
命令式编程:告诉计算机第一步做什么,第二部做什么。声明式编程:声明式编程是以数据结构的形式来表达程序执行的逻辑。它的主要思想是告诉计算机应该做什么,但不指定具体要怎么做。面向对象编程:第一公民是对象。面向函数编程:第一公民是函数;
高阶函数:其中对于函数式编程在JavaScript中函数都是指向变量,即函数的参数可以接收变量,变量可以指向函数,那么对于高阶函数就是一个函数可以接收另一个函数作为参数的函数。
filter
filter传入的函数作用用每一个元素然后过滤掉数组中某些元素返回剩下的元素组成的新数组。filter中的回调函数有一个要求: 必须返回一boolean值, true: 当返回true时, 函数内部会自动将这次回调的n加入到新的数组中,false: 当返回false时, 函数内部会过滤掉这次的n。
const nums = [10, 20, 111, 222, 444, 40, 50];
// 如果n<100都返回true,加入新的数组,反之返回false被过滤掉.
//最后用newNums去接收新的数组。
let newNums = nums.filter(function (n) {
return n < 100
})
//新数组中的结果:10,20,40,50.
你可能想到如果不用高阶函数filter:
// for循环遍历再判断
const nums = [10, 20, 111, 222, 444, 40, 50];
for (let i = 0; i < nums.length; i++) {
if (nums[i] < 100)
{
......
}
}
的确也可以这样写,但是代码的可读性大大减小。
map
map()返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。注意:由于map()接收的回调函数可以有3个参数:callback(currentValue, index, array),通常我们仅需要第一个参数。
const newNums = [10, 20, 40, 50];
//将nums数组中的每一个*2然后返回一个新的数组
//用new2Nums接收
let new2Nums = newNums.map(function (n) {
return n * 2
})
//[20,40,80,100]
map()作为高阶函数,事实上它把运算规则抽象了,不仅可以简单的数字运算,还可以复杂的字符串操作,比如把数字转换成字符串:
const newNums = [10, 20, 40, 50];
newNums.map(String); // ['10', '20', '40', '50']
reduce
reduce() 方法接收一个函数作为累积器,把结果继续和序列的下一个元素做累积计算,其中有4个参数:初始值(上一次回调的返回值),当前元素值,当前索引,原数组 。语法:arr.reduce(callback,[initialValue])
callback:函数中包含四个参数
- previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
- currentValue (数组中当前被处理的元素)
- index (当前元素在数组中的索引)
- array (调用的数组)
initialValue (作为第一次调用 callback 的第一个参数。)
const new2Nums = [20, 40, 80, 100];
//将数组中的元素进行累加运算
let total = new2Nums.reduce(function (preValue, n) {
return preValue + n
}, 0)
//tatal=240