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;
}