【JavaScript】阵列方法之forEach()

【前言】
本系列为个人前端学习之路的学习笔记，在过往的学习过程中累积了很多笔记，如今想藉着IT邦帮忙这个平台做整理+再复习。
本系列标题一律以【】标示该篇文章主要涉及的内容，例如【JavaScript】、【Vue】等等。
若内容有误，还麻烦各路大神不吝於点出问题，感激不敬。

在JavaScript中有许多操作阵列的方法，本篇将针对forEach()
forEach()如同跑for回圈一样，阵列.forEach(callback function)会将阵列中的资料一笔一笔作为参数带入callback function中，如同用for回圈操作阵列一样，可以对阵列内容进行各种操作，是泛用度非常高的方法

例如如果我们想将阵列中的每一笔资料用console.log()印出来，我们用for回圈可能会这样做：

const array = [1, 2, 3, 4, 5];
for(let i=0;i<array.length;i++){
  console.log(array[i]);
}

但有了forEach()之後我们可以这样写：

const array = [1, 2, 3, 4, 5];
array.forEach(function(item, index, array){
  console.log(item);
});

原先我们在for回圈中会需要宣告i，然後用array[i]来取得每一笔资料
但在forEach()的callback function中，每笔资料会被当作第一笔参数带入，并自动执行阵列长度次数次
听起来有点拗口，以这个案例来说就是会跑5次，item每次分别是1~5这样

在forEach()的callback function中有三个参数
如同阵列方法之filter()中提到的一样
第一个是阵列资料本身，以这个案例来说就是array的资料，这里我将参数名称命名为item
第二个是阵列资料的索引位置
第三个则是阵列本身，通常用到的机会不多
同样的，参数名称都是可以自订的，但forEach()一定会照着这个顺序，这点与filter()相同

forEach()不会回传值

不像filter()需要return资料到新阵列，forEach()本身相当单纯，可以把它想成只有阵列可以使用的高级for回圈
如果强行加入return是没有意义的，并有办法透过forEach()中的callback function去return任何东西：

const array = [1, 2, 3, 4, 5];
const newArray = array.forEach(function(item, index, array){
  return item
});
console.log(newArray); //undefined

毫无反应，就只是默默地跑5次

而大部分像用filter()或是map()做到的效果其实forEach()也可以做到，不过可能稍微不漂亮一些
以阵列方法之filter()中的范例为例，这个范例目的是「将大於3的资料放到新阵列」：

const array = [1, 2, 3, 4, 5];
const newArray = array.filter(function(item, index, array){
  return item > 3;
});
console.log(newArray); //[4, 5]

用forEach()改写：

const array = [1, 2, 3, 4, 5];
const newArray = [];
array.forEach(function(item, index, array){
  if(item > 3){
    newArray.push(item);
  }
});
console.log(newArray); //[4, 5]

虽然步骤多了一点点，但也说明forEach()的万用性