Javascript——Map和forEach的区别

'Map：'

Array.prototype.map():

map()方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
返回值：
	一个由原数组每个元素执行回调函数的结果组成的新数组。

语法：
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array
}[, thisArg])

callback（函数会被自动传入三个参数：数组元素，元素索引，原数组本身。）
生成新数组元素的函数，使用三个参数：
 	currentValue 数组中正在处理的当前元素
    index可选,数组中正在处理的到期元素的索引
	array可选，map 方法调用的数组。
    thisArg可选，执行 callback 函数时值被用作this。
    
# 描述：
	 map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

	因为map生成一个新数组，当你不打算使用返回的新数组却使用map是违背设计初衷的，请用forEach或者for-of替代
    
	map 不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）
    
    map 方法处理数组元素的范围是在 callback 方法'第一次'调用之前就已经确定了。调用map方法之后追加的数组元素不会被callback访问。如果存在的数组元素改变了，那么传给callback的值是map访问该元素时的值。在map函数调用后但在访问该元素前，该元素被删除的话，则无法被访问到。
    
    
eg：

1.使用map重新格式化数组中的对象
var kvArray = [{key: 1, value: 10},
               {key: 2, value: 20},
               {key: 3, value: 30}];

var reformattedArray = kvArray.map(function(obj) {
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
console.log(reformattedArray)
// reformattedArray 数组为： [{1: 10}, {2: 20}, {3: 30}],

// kvArray 原数组未被修改：
// [{key: 1, value: 10},
//  {key: 2, value: 20},
//  {key: 3, value: 30}],


eg:下面的例子演示如何在一个 String 上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组：

var map = Array.prototype.map
var a = map.call("Hello World", function(x) {
  return x.charCodeAt(0);
})
// a 的值为 [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]


    

Array.prototype.forEach():

foreach()方法对数组的每个元素执行一次给定的函数。 ，；’
forEach() 被调用时，不会改变原数组，也就是调用它的数组（尽管 callback 函数在被调用时可能会改变原数组）

'语法：'
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

currentValue：数组中正在处理的当前元素
index 可选，数组中正在处理的当前元素的索引。
array 可选，forEach() 方法正在操作的数组。

描述：
forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过。（注：比如应该数组程度为4，我只想循环到长度为2的截止foreach是不行的，for in可以）


forEach() 遍历的范围在第一次调用 callback 前就会确定。调用 forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach() 遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了（例如使用 shift()），之后的元素将被跳过

备注： 除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。
若你需要提前终止循环，你可以使用：
    一个简单的 for 循环
    for...of / for...in 循环
    Array.prototype.every()
    Array.prototype.some()
    Array.prototype.find()
    Array.prototype.findIndex()
只要条件允许，也可以使用 filter() 提前过滤出需要遍历的部分，再用 forEach() 处理。



1.将for循环转换为foreach循环：
    const items = ['item1', 'item2', 'item3'];
    const copy = [];

    // before
    for (let i=0; i<items.length; i++) {
      copy.push(items[i]);
    }

    // after
    items.forEach(function(item){
      copy.push(item);
    });

2.如果使用 promise 或 async 函数作为 forEach() 等类似方法的 callback 参数，最好对造成的执行顺序影响多加考虑，否则容易出现错误。
let ratings = [5, 4, 5];

let sum = 0;

let sumFunction = async function (a, b) {
    return a + b;
}

ratings.forEach(async function(rating) {
    sum = await sumFunction(sum, rating);
})

console.log(sum);
// Expected output: 14
// Actual output: 0