Javascript 数组遍历 forEach()、map( ) 的区别

在 ES5 中数组常用的遍历方法有 for 和 for in 在 ES6 中可以使用 forEach ( ) 和 map ( ) 来对数组进行遍历

for 和 for in 的区别：

fo 循环可以遍历到数组中的空元素，但是不能遍历数组的可枚举属性 for in 循环可以把数组的可枚举属性遍历到，但是它不能遍历到数组中的空元素

var arr=[1,2,3,,4,5,6];
arr.a=3;
for(var i=0;i<arr.length;i++){
          
   
  console.log(i,arr[i]);
}

结果如下图：

var arr=[1,2,3,,4,5,6];
arr.a=3;
for(var prop in arr){
          
   
   console.log(prop,arr[prop]);
}

结果如下图： 因为数组也是属于 Object ，所以可以使用 delete 方法，delete删除数组元素，不会造成数组的自动收缩，数组的长度不会发生改变

var arr=[1,2,3,4,5,6];
delete arr[2];
console.log(arr);//[ 1, 2, undefined, 4, 5, 6 ]

利用这一特点，我们可以用来操作数组去重

var arr=[1,2,2,4,3,4,5,4,2,6,2,7];
for(var i=1;i<arr.length;i++){
          
   
	//查找arr中是否有相同元素，如果有，则删除
    if(arr.indexOf(arr[i],i+1)>-1) delete arr[i];
}
var arr1=[];
//for in 遍历不到数组的空元素
for(var prop in arr){
          
   
    arr1.push(arr[prop]);
}
//从arr1的第0位开始截取，将元素放入到arr中
arr=arr1.splice(0);
//清除arr1
arr1=null;
console.log(arr);

forEach ( ) ,不遍历空元素，也不遍历属性，forEach是匿名函数，无法阻止它在循环中断循环跳出

forEach ( ) 只能遍历数组，不能返回任何内容 forEach ( item ,index ,arr) ，常用的三个参数

第一个参数为数组中的元素 第二个参数为下标 第三个参数为数组本身。

var arr=[2,4,6,8,10,,12,14,16,18,20];
arr.a=10;
arr.forEach(function(item,index,a){
          
   
   console.log(item,index,a);
});

打印的结果如下： forEach ( ) 的实现过程：

var list = [1,2,3,4];
function forEach(arr,fn){
          
   
    for(var i=0;i<arr.length;i++){
          
   
    	//如果是空元素，则跳过
        if(arr[i]===undefined) continue;
        fn(arr[i],i,arr);
    }
}
// 桥接模式
forEach(list,function(item,index,arr){
          
   
    console.log(item,index,arr);
})

map ( ) ，也是对数组进行遍历，跟 forEach ( ) 不同的是，它可以将回调函数中 return 的结果返回到新数组中

var list = [1,2,3,2,6,7];
var s = list.map(function(item,index,arr){
          
   
	return item + 100;
})
console.log(s);//[ 101, 102, 103, 102, 106, 107 ]

map ( ) 实现的过程：

var list = [1,2,3,2,6,7];
function map(arr,fn){
          
   
    var arr1 = [];
    for(var i=0;i<arr.length;i++){
          
   
   		//让fn()的返回值添加到arr1数组中
        arr1[i] = fn(arr[i],i,arr)
    }
    //返回新数组
    return arr1;
}
var s = map(list,function(item,index,a){
          
   
    return item + 100;
})
console.log(s);