JavaScript对集合进行遍历

初始数据

let Users=[
    {
        userId:1001,
        userName:"李想",
        age:"21",
        sex:"女"
    },{
        userId:1002,
        userName:"唐杉",
        age:"22",
        sex:"男"
    },{
        userId:1003,
        userName:"李然",
        age:"21",
        sex:"女"
    }
];
let event={
    eventId:100001,
    eventName:"测试活动",
    eventType:0,
    eventInfo:"这是一个测试活动"
};

JavaScript对数组进行遍历的集中方法

for(let i=0,i<arr.length,i++)遍历

使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。

for(let i=0;i<users.length;i++){
    //相关操作users[i]即为对应元素
}

arr.forEach遍历

遍历数组中的每一项，没有返回值，对原数组没有影响，不支持IE浏览器；

users.forEach(user=>{
    //相关操作，user即为对应遍历的数组元素
});

arr.map遍历

有返回值，可以return出来，map的回调函数中支持return返回值；return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；

users.map((item,index,arr)=>{
    ////相关操作，user即为对应遍历的元素
    return
});

for…of遍历

可以正确响应break、continue和return语句；

for(let value of users){
    //相关操作，value即为遍历的数组元素
}

filter遍历

不会改变原始数组,返回新数组

let arr1=users.filter(item=>item.userId<1003);
console.log(arr1);
//控制台输出
/*[
    {
        userId:1001,
        userName:"李想",
        age:"21",
        sex:"女"
    },{
    userId:1002,
    userName:"唐杉",
    age:"22",
    sex:"男"
}
]*/

every遍历

every()是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true；

let arr1=users.every((item,index,arr)=>{
    return item.userId>1002;
});
console.log(arr1);//输出false

some遍历

some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true；

let arr1=users.some((item,index,arr)=>{
    return item.userId>1002;
});
console.log(arr1);//输出true

对对象进行遍历（key-value键值对形式）

for…in遍历

for(let key in event){
    console.log(event[key]);//key为对象的key值
}

Object.keys().map()遍历

Object.keys(event).map(key=>{
    console.log(event[key]);//对应遍历元素操作,key为对象的key值
    return
});

Object.values().map遍历

Object.values(event).map(value=>{
    console.log(value);//对应遍历元素操作，value为对象的value值
    return
})

开发中遇到的问题

在React前端项目中开发时，组件中对于列表的输出，大多数用map对列表数据进行map遍历return DOM元素，有时会遇到对对象key-value进行遍历封装为DOM元素输出，此时只能用Object.key()或者Object.values()但会对象的key数组或者value数组进行map遍历return Dom元素。

目录CONTENT