JS的forEach、map、filter、some、every的区别及使用场景

622 阅读2分钟

forEach

forEach() 方法对数组的每个元素执行一次给定的函数。
使用场景:当我们对数组的元素进行处理时(例如:增加元素,元素值改变),可以使用这个函数
for example: 添加status 字段

let blogs = [
    {title:"胡三疯是帅锅",time:"2021-05-06", id: 1},
    {title:"胡三疯是大帅锅",time:"2022-09-05",id: 2} 
]

blogs.forEach(item=>{
    item.status = "已发布"
})

map

map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。 使用场景:当我们调用接口时,数组数据不满足接口的数据格式,若当前数组数据和页面组件绑定,那么我们就不能直接使用forEach 改变当前数组,就需要使用map 在当前数组数据基础下,返回新的数组数据。 for example: 添加name属性,取值id, 并删除id 属性

let blogs = [
    {title:"胡三疯是帅锅",time:"2021-05-06", id: 1},
    {title:"胡三疯是大帅锅",time:"2022-09-05",id: 2} 
]

let newBlogs = blogs.map(item=>{
    return {
        ...item ,
        name:item.id,
        id:null
    };
})

filter

filter() 方法创建一个新数组, 其包含 符合函数条件的所有元素
使用场景:当我们提交接口时,需要提交符合一定条件的元素组成的数组,就需要对原数组进行筛选。
for example:

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result)

every

every() 方法用来判断一个数组内的所有元素是否都满足某个指定的条件(回调函数)。
使用场景:当我们进行逻辑操作时,我们会根据某个数组是否都满足某个条件,来进行不同的操作,就会用到这个函数
for example

let everyArr = [
    {
        name: "张三",
        num: 60
    },
    {
        name: "张三",
        num: 50
    }
]

let res = everyArr.every(item=> item.num > 30)

some

some() 方法是否至少有1个元素满足某个指定的条件
使用场景:经常用于判断数组中元素是否有一个满足某个条件,进行不同的操作

let everyArr = [
    {
        name: "张三",
        num: 60
    },
    {
        name: "张三",
        num: 50
    }
    
]

let res1 = everyArr.some(item=> item.num > 50)