js中的forEach()和map()

相同点：

1.都是循环遍历数组中的每一项

2.每次执行匿名函数都支持三个参数，参数分别为item（当前每一项），index（索引值），arr（原数组）

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

4.只能遍历数组

不同点：

map（）

有返回值，可以return出来

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

map() 方法按照原始数组元素顺序依次处理元素。

⚠️注意：map（）方法不会对空数组进行检测

map方法不会改变原始数组

arr[].map(function(value,index,array){

　　//do something

　　return XXX

})

参数：value数组中的当前项,index当前项的索引,array原始数组；

区别：map的回调函数中支持return返回值；return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；

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

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

console.log(this);    //Window

console.log('原数组arr：',arr);   // 会执行五次

return item/2;

},123);//这里的123参数，表示函数中的this指向，可写可不写，如果不写，则this指向window

// 对原数组不改变
console.log(str); // [0,1,2,3,4] 原数组拷贝了一份，并进行了修改
conlose.log(arr); // [0,2,4,6,8] 原数组并未发生变化

forEach

forEach方法用于调用数组的每个元素，将元素传给回调函数

⚠️注意： forEach对于空数组是不会调用回调函数的 ，

没有返回一个新数组&没有返回值（返回值为undefined）

应用场景：为一些相同的元素，绑定事件处理器！

不可链式调用 

arr[].forEach(function(value,index,array){

　　//do something

})

参数：value数组中的当前项, index当前项的索引, array原始数组；
数组中有几项，那么传递进去的匿名回调函数就需要执行几次；
理论上这个方法是没有返回值的，仅仅是遍历数组中的每一项，不对原来数组进行修改；但是可以自己通过数组的索引来修改原来的数组，或当数组项为对象时修改对象中的值；

forEach方法只是操作数据而已，数组里的数据是如何引用的呢？ js的数据有基本数据类型和引用数据类型，同时引出堆内存和栈内存的概念。对于基本数据类型：Number、String 、Boolean、Null和Undefined，它们在栈内存中直接存储变量名和值。而Object对象的真实数据存储在堆内存中，它在栈内存中存储的是变量名和堆内存的位置。 而在forEach方法里操作了obj对象，实际操作的是对象本身，而数据只是引用了对象的栈内存地址，所以数组里的数据相应改变。 那么为什么forEach方法不能改变数组里的基本变量呢？因为数组内的基本变量，在栈内存内生成了自己的值，并非引用栈内存的地址。

var ary = [12,23,24,42,1];  
var res = ary.forEach(function (item,index,input) {  
       input[index] = item*10;  
})  
console.log(res);// --> undefined;  
console.log(ary);// [120,230,240,420,10] --> 通过数组索引改变了原数组； 

 与其他循环类比：

// 之前我们的循环是这样的  
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)  
});  

兼容写法：

不管是forEach还是map在IE6-8下都不兼容（不兼容的情况下在Array.prototype上没有这两个方法）,那么需要我们自己封装一个都兼容的方法，代码如下：

/** 
* forEach遍历数组 
* @param callback [function] 回调函数； 
* @param context [object] 上下文； 
*/  
Array.prototype.myForEach = function myForEach(callback,context){  
    context = context || window;  
    if('forEach' in Array.prototye) {  
        this.forEach(callback,context);  
        return;  
    }  
    //IE6-8下自己编写回调函数执行的逻辑  
    for(var i = 0,len = this.length; i < len;i++) {  
        callback && callback.call(context,this[i],i,this);  
    }  
}   
 
/** 
* map遍历数组 
* @param callback [function] 回调函数； 
* @param context [object] 上下文； 
*/  
Array.prototype.myMap = function myMap(callback,context){  
    context = context || window;  
    if('map' in Array.prototye) {  
        return this.map(callback,context);  
    }  
    //IE6-8下自己编写回调函数执行的逻辑  
    var newAry = [];  
    for(var i = 0,len = this.length; i < len;i++) {  
        if(typeof  callback === 'function') {  
            var val = callback.call(context,this[i],i,this);  
            newAry[newAry.length] = val;  
        }  
    }  
    return newAry;  
}  

 引用：js中 map和forEach的区别 , JS中map（）与forEach（）的用法