array数组的for、map和foreach的区别

forEach()和map()两个方法都是ECMAScript5中Array引进的新方法，主要作用是对数组的每个元素执行一次提供的函数，但是它们之间还是有区别的。

老规矩，先看定义：

Array.prototype.map()

官方解释：数组映射 不会修改原来的数组

Array.prototype.forEach()

官方解释：数组遍历 参数是函数 三个参数 1 是对应的元素 2 是下标 3 是遍历的数组本身 不会修改原来的数组

 

for方法

平时我们前端开发工作中经常会操作数组，遍历数组是最常用的，我项目组里面很多新同事一般都是用for循环来遍历数组，如下：

var arr=["a","b","c","d"];
for (var i=0;i<arr.length;i++){
    console.log(arr[i]);
}

运行结果如下：

> a

> b

> c

> d

 

forEach方法

下面就看看用forEach怎么写:

var arr = ['a', 'b', 'c', 'd']
arr.forEach(function (val, index, arr){
    console.log('index:'+index+','+'val:'+val) 
    // val是当前元素，index当前元素索引，arr数组 
    console.log(arr)
});

输出内容如下：

> index:0,val:a
> (4) ["a", "b", "c", "d"]
>  index:1,val:b
>  (4) ["a", "b", "c", "d"]
>  index:2,val:c
>  (4) ["a", "b", "c", "d"]
>  index:3,val:d
>  (4) ["a", "b", "c", "d"]

 

map方法

map可以理解为映射，实际上会产生一个新的数组，直接上代码：

var arr=["a","b","c","d"];
var newArray = arr.map(function (value) {
    return value+"-1";
});
console.log(newArray)

输出新的数组，内容如下：

> (4) ["a-1", "b-1", "c-1", "d-1"]

 

最后总结一下：for和forEach都用于遍历数组本身，而map则是生成一个新的数组。

for和forEach区别如下：

for里面可以加关键字continue, break来控制循环，但是forEach只能使用if配合return 语句来控制 ，return true等同于continue， return false等同于break。