项目实用的遍历数组 for,forEach ,map

在项目当中通常处理列表的时候需要对数据进行循环处理，比如筛选，取值等操作。 通常有三种方法实现。

一、for循环
这是一种最基础的循环也是最常用的。
    let list=[{"id":0,"title":"第一个title"},{"id":1,"title":"中国人"},{"id":2,"title":"很好"}]
    let ListHtml='';
    for(let i=0;i<list.length;i++){
        ListHtml+='<h3>'+list[i].title+'</h3>'
    }
    document.getElementById('listPage').innerHTML=ListHtml
也可以用 for of 或者 for in
 for(let value of list){
        ListHtml+='<h3>'+value.title+'</h3>'
 }
 
 for(let index in list){
        ListHtml+='<h3>'+list[index].title+'</h3>'
 }
他两者的区别在于，for of 能循环纯数组,类数组 Set(),Map()，不能循环对象。
for in 可以循环对象。
let obj={id:0,name:'xxx'};
for(v in obj){
    console.log(v); //  0,xxx
}
for(v of obj){
    console.log(v); //  报错
}

let s=new Set();
s.add(1).add(2).add(3);
for(v of s){
    console.log(v) //1,2,3
}
for(v in s){
    console.log(v) // 无反应
}

let m =new Map();
m.set(1,'a');
m.set('a',2).set(3,'b');

for(v of m){
    console.log(v) //  [1, "a"] ["a", 2] [3, "b"]
}
for(v in m){
    console.log(v) //无打印信息
}


二、forEach
forEach是es5中常用的写法
list.forEach(((value, index, array) => {
        console.log(value)  //{id: 0, title: "第一个title"} ...
        console.log(index)   0,1,2 
}))

三、map()
map是es6中的语法
list.map(((value, index) => {
        console.log(value) //{id: 0, title: "第一个title"} ...
        console.log(index)   //0,1,2 
}))
map和forEach的不同在于 forEach无论怎么样返回的都是undefined，而map返回的是一个新数组
eg:
   let result= list.map(((value, index) => {
       return value
    }))
    console.log(result)  //返回新的数组 
    
let result= list.forEach(((value, index) => {
       return value
    }))
    console.log(result)  //返回undefined
    

在实际项目中可能或多或少都有用到，其实用什么方法不固定。