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);    //Window

console.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指向window


arr.map(function(item,index,arr){   //參數含義同forEach
    console.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)  
});