探索一下数组的map()、filter()、reduce()含原理

数组中reduce()函数与过滤filter()和映射map()有什么区别？

先来看看reduce()这个函数，废话不多说，直接上代码

const arr = [1,2,3,4]

const res = arr.reduce((acc,cur,idx,src)=>{
  return acc+cur
},1)

console.log(res)

在这里，你很好奇为什么是11，让我们来看下，首先reduce（）这个方法里装的依旧是个函数，但是还有第二个参数，作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。

那么（acc,cur,idx,src）什么鬼

• 第一个参数：初始值，或者计算后返回的值
• 第二个参数：就是当前的元素嘛
• 第三个元素：就是当前元素的索引
• 第四个元素：数组

再来欣赏下filter（）

不难发现

• 第一个参数：就是数组中的每个元素
• 第二个参数：索引嘛
• 第三个参数：就是数组

那么我们实际过滤一下，

显然，大于4的没有 返回返回的是空的数组

最后map()

还是同样的道理

• 参数一：循环的时候，当前的数组元素
• 参数二：就是元素
• 参数三：数组

此时有一个需求：[1,2,3]如何变成[2,3,4]

 // map()方法源码解读
        /**
        需求是一个数组[1,2,3]，怎么变成[2,3,4]
        */
        Array.prototype.myMap = function(callback){ // 参数是一个回调
            console.log(this) // [1,2,3]
            let len = this.length
            // 创建一个空的数组
            let initArr = []
            for(let i = 0; i < len; i++){
                initArr.push(callback(this[i],i))
            }
            return initArr
        }
        // 初始化一个需要处理的数组
        let arr = [1,2,3]
        // 调用
        const res = arr.myMap((ele,index)=>{
            return ele+1
        })

        //打印输出结果
        console.log(res)