前端javasript——forEach、map、filter和reduce的使用场景

(文章目录)

⭐前言

大家好，我是yma16，不止前端，本文分享关于前端javasript——forEach、map、filter、reduce区别与使用。 自我介绍 前端->全栈开发，csdn 内容合伙人，2023 csdn新星计划 Node赛道 Top1，csdn 2023 新星计划vue3+ts赛道导师，阿里云社区专家博主，华为云享专家，前端技术栈：vue2 vue3 react18，后端技术栈：django springCloud。 个人搭建的主页：https://yongma16.xyz

⭐forEach用法

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。 参数：

1. callbackfn 回调函数返回值void即空
2. thisArg 回调函数的引用对象

查看函数定义

    /**
      * Performs the specified action for each element in an array.
      * @param callbackfn  A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the array.
      * @param thisArg  An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
      */
    forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;

demo实例：

const array=[1,2,3,4,5,6,7,8]

console.log(array.forEach(function(item){
    console.log(item)
    console.log('this',this)
},{
    name:"yam16"
}))

运行结果

forEach传递引用对象进去，作为回调函数的this指向对象 forEach使用场景一般是遍历对象用，也可以传递一个对象作为回调函数引用进行处理

⭐map用法

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，按照原始数组元素顺序依次处理元素。 map() 不会改变原始数组 参数：

1. callbackfn 回调函数返回值是一个数组
2. thisArg 回调函数的引用对象

函数定义

    /**
      * Calls a defined callback function on each element of an array, and returns an array that contains the results.
      * @param callbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.
      * @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
      */
    map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];

demo示例

const array=[1,2,3,4,5,6,7,8]
console.log(array.map(function(item){
    console.log('this',this)
    if(item%2){
        return item
    }
},{
    name:"yam16"
}))

运行结果，不return，则对于的元素的undefined map使用场景一般是对数据进行重组，返回同等长度的数组

⭐filter用法

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素， filter不会改变原数组 参数：

1. callbackfn 回调函数返回值是一个数组
2. thisArg 回调函数的引用对象

函数定义

    /**
      * Returns the elements of an array that meet the condition specified in a callback function.
      * @param callbackfn A function that accepts up to three arguments. The filter method calls the callbackfn function one time for each element in the array.
      * @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
      */
    filter(callbackfn: (value: T, index: number, array: T[]) => any, thisArg?: any): T[];

demo示例，返回奇数数组

const array=[1,2,3,4,5,6,7,8]
console.log(array.filter(function(item){
    console.log('this',this)
    return item%2
},{
    name:"yam16"
}))

运行结果

⭐reduce用法

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 reduce() 可以作为一个高阶函数，用于函数的 compose。 参数：

1. function(previousValue,currentValue, index,arr)
2. initValue

function

• previousValue 必需。初始值, 或者计算结束后的返回值。
• currentValue 必需。当前元素
• currentIndex 可选。当前元素的索引
• arr 可选。当前元素所属的数组对象。

initValue 初始化值对应 previousValue

函数定义：

    /**
      * Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
      * @param callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.
      * @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
      */
    reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
    reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;

demo示例，取出奇数的平方数组

const array=[1,2,3,4,5,6,7,8]
console.log(array.reduce((pre,cur)=>{
    console.log('pre',pre)
    if(cur%2){
        pre.push(Math.pow(cur,2))
    }
    return pre
},[]))

运行结果

⭐总结

共同点 forEach、map、filter和reduce对空数组都不会执行 不同点 forEach适用于数据遍历，返回boid map适用于数据的重组，不改变数据的长度，长度=原数组长度 filter适用于数据筛选，返回数据元素保存不变，长度<=原数组长度 reduce适用于对数据累加，返回的数据长度可以自由控制

⭐结束

本文分享到这结束，如有错误或者不足之处欢迎指出！

标签：function,map,callbackfn,javasript,reduce,forEach,数组,thisArg,array
From： https://blog.51cto.com/u_16318188/8182035