陣列中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的引數執行一次。