js中for in ,for of,foreach,map和filter的区别

for in

for in 可以用来遍历数组和对象，但是值得注意的是for in遍历的是其索引或者属性，for in 更适合用来遍历对象，代码如下：

//for in  遍历数组，操作的是其索引值
var arr=['tom','jack','john'];
for(var i in arr){
    console.log(i);//0,1,2
}
//for in  遍历对象，操作的是属性
var obj={name:'tom',age:'18'};
for(var key in obj){
    console.log(key);//name age
}

for of

for of 可以用来遍历数组，字符串，Maps和Sets，遍历的是其内容，代码如下：

//for of 遍历数组，遍历的是其值
var arr=['tom','jack','john'];
for(var i of arr){
    console.log(i);//tom jack john
}

//for of 遍历字符串
var str='asv';
for(var i of str){
    console.log(i);// a s v
}

forEach

forEach用来遍历数组，会遍历数组的每一项，不用因为return等就可以中断遍历，不会生成新数组，不会改变原数组，代码如下：

//forEach遍历数组的每一项，不会因为return操作就中断遍历
//参数一：数组的值；参数二：数组的索引；参数三：数组
var arr=['tom','jack','mike'];
arr.forEach((value,index,array)=>{
    if(value=='tom'){return;}
    console.log(value,index,array);
    //jack 1 [ 'tom', 'jack', 'mike' ]
    //mike 2 [ 'tom', 'jack', 'mike' ]
});

map

map和forEach一样也会遍历数组的每一项，不同的是Map会生成一个新数组，但不会改变原数组，并且Map也不会对空数组进行检测，代码如下：

//map遍历数组
var arr=['tom','jack','mike'];
var arr2=arr.map((value,index,array)=>{
    if(value=='tom'){return 'tom';}
    console.log(value,index,array);
    //jack 1 [ 'tom', 'jack', 'mike' ]
    //mike 2 [ 'tom', 'jack', 'mike' ]
});
console.log('新数组为:',arr2);//新数组为: [ 'tom', undefined, undefined ]

filter

filter遍历数组的每一项内容，意为过滤，会返回一个新的数组，代码如下：

//filter
var arr1=['tom','jack','mike'];
var arr2=arr1.filter((value)=>{
    if(value!='tom'){
        return value;
    }
});
console.log(arr2);//[ 'jack', 'mike' ]