Array内置方法reduce/map原理与实现

103 阅读1分钟

Array包含了大量的内置方法:forEach、map、filter、reduce等。我们将实现相应方法。

reduce

定义

Another common thing to do with arrays is to compute a single value from them 通过一个数组计算计算出一个单一的值

求值

传入数组

//1.求和
function add(array) {
    let result = 0;
    for (let i = 0; i < array.length; i++) {
        result = result + array[i]; 
    }
    return result;
}
// 2.求乘集
function multi(array) {
    let result = 1;
    for (let i = 0; i < array.length; i++) {
        result = result * array[i]; 
    }
    return result;
}

重点在于返回值result, 和对应的处理逻辑 result + array[i] 或者 result * array[i]

reduce实现

// 第一版
function reduce(array,reducer) {
    let result = 1;
    for (let i = 0; i < array.length; i++) {
        result = reducer(result , array[i]); 
    }
    return result;
}

// 第二版 新增初始化
function reduce(array,reducer,initVal) {
    let result = initVal;
    for (let i = 0; i < array.length; i++) {
        result = reducer(result , array[i]); 
    }
    return result;
}

//第三版
function reduce(array,reducer,initVal) {
    let start = 0
    if(initVal === undefined) {
        initVal = array[0]
        start = 1 // 从1开始
    }
    let result = initVal;
    for (let i = start; i < array.length; i++) {
        result = reducer(result , array[i]); 
    }
    return result;
}

map

基于reduce的map实现

//系统的方法
let double = [1,2,3,4].map(o => o *2)
//自己实现 reduce + 数组
function map(array,mapper) {
    return array.reduce((result,item)=>{
        result.push(mapper(item))
        return result
    },[]
    ) 
}
map([1,2,3,4], () => o * 2)

其他方法

forEach循环函数

传入数组+需要做的动作

// 便利
function forEach(array,action) {
    for (let i = 0; i < array.length; i++) {
        action(array[i],i)//传入值和索引
    }
}
foreach(["a","b","c"],console.log) 

find函数

function find(array, predicate) {
    let result
    array.forEach(item => {
        if(predicate(item)) {
            result = item
        }
    })
    return result
}

some函数

function some(array, predicate) {
    let result
    for (let i = 0; i < array.length; i++) {
        if(predicate(array[i],i,array)) {
            return true
        }
    }
    return false
}

第三方实现

lodash.js lodash.com/docs/4.17.1…

underscore.js underscorejs.org/#reduce