JavaScript Day 13. forEach()

为什麽必须知道怎麽使用阵列方法呢？举例来说，我们拿到一笔资料长这个样子：

let data = [5,8,9,10,20,50];

然後我们必须把这里的资料都加起来，在没有学到 forEach 或任何其他阵列方法的时候，可能我们会这麽做：

console.log(data[0]+data[1]+data[2]+data[无限延长的阵列资料]); 
// 假如有一千笔，有没有写完的一天^_^

相信已经学到这里的我们，大概可以判断什麽样的程序码长得很冗长、很诡异，马上可以使我们警铃大作。使用以上的方法在目前的数值中确实是可以达到相加的结果，但实际上我们会经常不确定阵列资料的内容是什麽，因此要直接对阵列资料进行操作是很困难的。

所以，我们才需要使用阵列方法，在这里就一起来讨论 forEach 吧。

forEach 能将阵列的每一笔资料都跑一次，并传入 console.log，然後执行给定的函式。直接看范例还是比较好理解的：

let data = [30,40];
data.forEach(function(item,index,array) {
    console.log(item,index,array); 
		// 30 0  [30, 40]
		// 40 1  [30, 40]
});

上面的范例中，data 资料里面有 30 跟 40 ，代入的参数有 item、index、array，console.log 的结果是 30 和 40 都被执行了，於是我们可以知道上面的理论，我自己的说法会是：forEach 会执行阵列的每一笔资料，并且依代入的参数给予结果。

虽然前几篇已经介绍过很多次这几个参数，不过在这边为了方便阅读也还是再写一次：

• item / 阵列个别资讯
• index / 阵列的第几笔资料、笔数
• array / 已读取阵列当下的状态（阵列本身）

以上我们又可以知道，为什麽每一笔阵列资料 console.log 之後会有三个结果。另外，参数也可以自定义名称，只要记得他的回传模式，也可以依照自己需要的回传结果代入需要的参数，并且不一定三个都要写入。

阵列资料累加

接下来要讨论的是阵列比较常见的作法，底下范例可以看到使用 forEach 能够轻松的替我们做资料的累加：

let data = [30,40,50,100,200,1500];

// total 帮助加总使用
let total = 0;
data.forEach(function(item,index,array) {
    total += item;
    console.log(total);
		// 30
		// 70
		// 120
		// 220
		// 420
		// 1920
});

搭配 if 的 forEach

forEach 和 if 的搭配，也可以轻松帮我们筛选出需要的数值，以下的小范例可以筛选出阵列里面有几个偶数，并且把选出来的偶数新增一个偶数阵列。

let data = [30,40,50,100,200,1500,33333,111111];
let total = 0;
// 这里新增一个空阵列，供筛选出的偶数使用
let newData = [];
data.forEach(function (item,index) {
    if(item%2 == 0) {
        total += 1;
        // 到此会选出偶数，接着新增变数，将偶数整理出一个阵列
        newData.push(item);
    };
});

console.log(total); // 6
console.log(newData); // [30, 40, 50, 100, 200, 1500]

读取资料

forEach 也有读取资料的能力，除了能读取数字以外，也能读取字串、阵列资料、阵列以及物件。

let data = [
    {
        name: "Tom",
        sex: "male"
    },
    {
        name: "Mary",
        sex: "woman"
    }
];

data.forEach(function(item,index) {
    console.log(item.name,item.sex); // Tom male, Mary woman
});

以上简单的拿了几个例子出来讨论，我的感觉是，在练习的过程会发现上面这些都只是概念，而在实际操作里几乎都是以上这些例子的延伸或是混合，因此这里我就没有再附上其他更复杂的例子，越到後面越发现重点比较是前面的概念有没有弄得很清楚。