JS中map（）與forEach（）的用法

相同點：

1.都是循環遍歷數組中的每一項

2.每次執行匿名函數都支持三個參數，參數分別為item（當前每一項），index（索引值），arr（原數組）

3.匿名函數中的this都是指向window

4.只能遍歷數組

不同點：

map（）

map方法返回一個新的數組，數組中的元素為原始數組調用函數處理后的值

也就是map（）進行處理之后返回一個新的數組

??注意：map（）方法不會對空數組進行檢測

map方法不會改變原始數組

var arr = [0,2,4,6,8];var str = arr.map(function(item,index,arr){console.log(this); //Windowconsole.log(this);console.log(item);console.log('原數組arr：',arr); // 會執行五次return item/2; },this);console.log(str); //[0,1,2,3,4]

forEach

forEach方法用于調用數組的每個元素，將元素傳給回調函數

??注意： forEach對于空數組是不會調用回調函數的 ，

沒有返回一個新數組&沒有返回值

應用場景：為一些相同的元素，綁定事件處理器！

不可鏈式調用?

var arr = [0,2,4,6,8] var sum =0; var str = arr.forEach(item,index,arr) { sum+= item; console.log("sum的值為：",sum); }

我們先來看兩者之間的相同之處

var arr = ['a','b','c','d'];arr.forEach(function(item,index,arr){　　　　//item表示數組中的每一項，index標識當前項的下標，arr表示當前數組console.log(item);console.log(index);console.log(arr);console.log(this); },123);　　　　　　//這里的123參數，表示函數中的this指向，可寫可不寫，如果不寫，則this指向windowarr.map(function(item,index,arr){ //參數含義同forEachconsole.log(item);console.log(index);console.log(arr);console.log(this); },123);

運行之后，可以看出兩者參數沒有任何的區別，除此之外兩者之間還有一個特性，就是不能停止里面的遍歷，除非程序報錯，那么兩者之間的區別在那里呢？？？

在于返回值！！！

var a = arr.forEach(function(item,index,arr){　return 123 }); var b = arr.map(function(item,index,arr){return 123 });　 console.log(a); //undefined console.log(b); //[123,123,123,123]

我們可以利用map的這個特性做哪些事情呢，比如

var b = arr.map(function(item,index,arr){return item+'a'; });　console.log(b); //["aa", "ba", "ca", "da"]

?

// 之前我們的循環是這樣的 for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } // 從ES5開始提供這樣的for循環 myArray.forEach(function (value) { console.log(value); });

// 在ES6我們還可以這樣任性 // 循環下標或者key（for-in） for (var index in myArray) { // don't actually do this console.log(myArray[index]); } // 循環value（for-of） for (var value of myArray) { console.log(value); } // 甚至直接循環key和value，no problem for (var [key, value] of phoneBookMap) { console.log(key + "'s phone number is: " + value); } // 或者更者我們這樣“優雅”的循環對象（貌似和ES6沒有關系） for (var key of Object.keys(someObject)) { console.log(key + ": " + someObject[key]); }

// 現場實例，我們這樣使用 var items = [...]; items.forEach((item, i) => { if (item.status == 'new') this.apply(item, i) }); 《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的JS中map（）与forEach（）的用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。