05.【JS数组】内置方法：forEach()与map()方法

1.forEach —— 遍历

forEach遍历数组，对原来的数据操作，改变原数组

函数声明：

[].forEach( function(value, index, array) { 
    //… 
}, [thisArg] );

1. forEach方法中第一个参数是回调函数，它支持3个参数：

• 第1个是遍历的数组内容
• 第2个是对应索引
• 第3个是数组自身

注意：对比jQuery中的$.each方法，参数位置有变化(第1个参数和第2个刚好相反)

$.each([], function(index, value, array) {
  // ...
});

例子

eg1:

[1, 2 ,3, 4].forEach(console.log);
// 1, 0, [1, 2, 3, 4]
// 2, 1, [1, 2, 3, 4]
// 3, 2, [1, 2, 3, 4]
// 4, 3, [1, 2, 3, 4]

eg2:数组求和

var sum = 0;
[1, 2, 3, 4].forEach(function (item, index, array) {
  sum += item;      //注：(array[index] == item)为 true
});
console.log(sum); // 10  

2.第二个参数thisArg可选，可用于以改变回调函数里面的this指针 ：如果这第2个可选参数不指定，则使用全局对象代替（在浏览器是为window），严格模式下甚至是undefined.

2.map —— 映射

映射，创建新数组

函数声明：

[].map( function(value, index, array) {
    //… 
}, [thisArg] );

类似于forEach，但需要注意的是：回调函数需要有return值，否则新数组都是undefined

例子

eg1：

//求平方值
var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function (item) {
  return item * item;       //必须要有return
});
alert(arrayOfSquares); // 1, 4, 9, 16

eg2：可以利用map方法方便获得对象数组中的特定属性值们

var users = [
  {name: "张含韵", "email": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];
var emails = users.map(function (user) { return user.email; });
console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com

个人理解

map能做的事forEach都能做，map可以视为forEach的一个特例，专门用于“通过现有的数组建立新数组”。在没有map之前是通过forEach来创建新数组。需要预先定义空数组，再通过push操作添加元素。有map之后，更进一步优化代码了。

for循环优点

• 可随意跳出或退出循环
• for 循环还可以隔几个去取值