js手写数组方法之map(),reduce(),filter(),foreach()

javascript语言中,foreach、filter、map和reduce是常用的集合操作方法。本文详细介绍了这四种数组方法的使用方式,和手写方法

forEach

forEach 方法用于对数组中的每个元素执行指定的操作或代码块，它接受一个回调函数作为参数，对数组的每一项都运行传入的函数。无返回值,不会改变原始数组

forEach(callback(item, index, arr))
item：数组元素,回调函数在每次迭代中处理的当前元素。
index：数组索引(可选),回调函数在每次迭代中处理的当前元素的索引。
arr：数组本身(可选),正在被迭代的原始数组。

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(item,index,arr) {//用foreach遍历数组的每个元素
    console.log(item);//1 2 3 4 5
});

手写foreach

Array.prototype.my_forEach = function(callback) {
   for(let i = 0; i < this.length; i++) {
       callback(this[i], i, this);    // 循环为每一项元素执行传入函数callback，无返回值
   }
}

通过在 Array.prototype 上定义新的方法，可以将这些方法添加到所有数组实例中，使得所有数组对象都可以使用这些自定义方法。
this引用的是调用该方法的数组实例,换句话说，当你在一个数组对象上调用 my_forEach 方法时，this 将引用该数组对象本身。this[i] 表示数组中的当前元素，i 表示当前元素的索引，this 表示原始数组对象。

const numbers = [1, 2, 3, 4, 5];
numbers.my_forEach(function(item,index,arr) {
    console.log(item);//1 2 3 4 5
});

filter

filter 方法用于根据指定的条件筛选数组中的元素，并返回满足条件的元素子集。它接受一个回调函数作为参数，该函数用于检查每个元素是否符合条件。返回新数组,不会修改原始数组

filter(callback(item, index, arr))
item：数组元素
index：数组索引(可选)
arr：数组本身(可选)

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function (number) {
    return number % 2 === 0;
});
console.log(evenNumbers);//[2,4]

手写filter

Array.prototype.my_filter = function(callback) {
    const filterArr = []    // 声明过滤后的新数组
    for(let i = 0; i < this.length; i++) {
        // 循环为每一项元素执行传入函数callback，并将函数返回true的项添加进filterArr       
        callback(this[i], i, this) && filterArr.push(this[i]);    
    }
    return filterArr;    // 返回过滤后的新数组
}

map

map 方法用于对数组中的每个元素应用指定的操作，并返回一个新的数组，该数组包含经过操作后的元素。返回新数组,不会修改原始数组

map(callback(item, index, arr))
item：数组元素
index：数组索引(可选)
arr：数组本身(可选)

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(number) {
    return number * 2;//[2,4,6,8,10]
});
const doubledNumbers = numbers.map(number => number * 2);//也可以用箭头函数

手写map

Array.prototype.my_map = function(callback) {
    const mapArr = []    // 声明每一项元素都操作过后的新数组
    for(let i = 0; i < this.length; i++) {
        // 循环为每一项元素执行传入函数callback，并将每次函数执行的结果添加进mapArr
        mapArr.push(callback(this[i], i, this));
    }
    return mapArr;    // 返回每一项元素都操作过后的新数组
}

reduce

reduce 方法用于将数组中的元素逐个合并为单个值。它通过指定的回调函数对数组中的每个元素进行迭代，并将迭代的结果累积到一个最终值中。返回值是最终值,不会改变原数组

reduce(callback(accumulator, currentValue, currentIndex,array),initialValue)
callback: 回调函数,用于对数组的每个元素进行操作
accumulator：累积值，也称为累加器，它是上一次回调函数的返回值或初始值（如果提供了初始值）。
currentValue：当前元素，表示数组中当前被处理的元素。
currentIndex：当前索引，表示数组中当前元素的索引（可选参数）
array：数组本身(可选)
initialValue：作为初始值的累积值(可选),如果提供了初始值，则第一次调用回调函数时，累积值将等于初始值,从第一个元素开始迭代。如果没有提供初始值，则第一次调用回调函数时，累积值将等于数组的第一个元素，并从第二个元素开始迭代。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(accumulator, current) {
    return accumulator + current;
}, 0);//initialValue=0
//15,对数组进行求和

举例来说,在第一次迭代时,accumlator=0(等于initialValue), current=1, currentindex=0, array=[1,2,3,4,5]
此时return = accumulator + current=0+1=1, 这个返回值1将作为下一次迭代的accumaltor
第二次迭代,accumaltor=1. current=2, currentindex=1
此时return = accumulator + current=1+2=3, 这个返回值3将作为下一次迭代的accumaltor
若我们没有传入初始值initialvalue,在第一次迭代时,accumlator=1, current=2, currentindex=1, array=[1,2,3,4,5]

手写reduce

Array.prototype.my_reduce = function(callback, initialValue) {
    let result = initialValue;
    for (let i = 0; i < this.length; i++) {
      if (result === undefined && i === 0) {//如果没传初始值
        result = this[i];//accumulator的值设为数组的第一项
        continue;// 如果没传初始值，第一次将不会执行下面的回调函数
      }
      result = callback(result, this[i], i, this);
    }
    return result;
}