数组中map,forEach和for循环的区别

今天遇到了一点有意思的事情,同事用了map出了点问题,页面的路由重新进行了加载,所以今天我们说一些map  forEach  for的区别

遍历性能上来说 for循环遍历 < for…of遍历 < forEach遍历 < for…in遍历 < map遍历

 

1)经典的for循环:

   for(var i = 0; i < arr.length; i++){  }

2)for...in

   for(var i in  arr){  }

3) forEach

    arr.forEach(function(i){   })

4) map

    arr.map(function(i){   })

5) ES6的语法  for...of

    for(let i of arr){   }

 

 

forEach 和map的区别:

相同点:

(1)都是循环遍历数组中每一项

(2)forEach 和 map方法中每次执行匿名函数都支持3个参数:item(当前每一项的值)  index(索引值)  arr(原数组)

(3)匿名函数中的this都是指向window

(4)只能遍历数组

(5)都不会改变原数组

 

区别:

map方法:

(1)map方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值

(2)map方法不会对空的数组进行检测,map方法不会改变原始数组

(3)chrome、Safari1.5+、opera都支持，IE9+

 

var arr = [0,2,4,6,8];

var str = arr.map(function(item,index,arr){

       console.log(this); //window

       console.log("原数组arr:",arr); //注意这里执行5次

       return item/2; },this);

console.log(str);//[0,1,2,3,4]

若arr为空数组，则map方法返回的也是一个空数组。

 

forEach方法

1.forEach方法用来调用数组的每一个元素,将元素传给回调的函数

2.forEach对于空数组是不会调用回调函数的

var arr = [0,2,4,6,8];

var sum = 0;

var str = arr.forEach(function(item,index,arr){

        sum += item; console.log("sum的值为：",sum); //0 2 6 12 20

        console.log(this); //window

},this)

console.log(sum);//20

console.log(str); //undefined

无论arr是不是空数组，forEach返回的都是undefined。这个方法只是将数组中的每一项作为callback的参数执行一次。