JavaScript 五四三 Ep.02 Array.prototype.forEach()

一、forEach() 簡介

此方法會將陣列裡的每個元素都傳入給定的函式中執行一次。
純陣列才可使用此方法，類陣列則無法使用。

二、forEach() 語法

arr.forEach(function callback(currentValue[, index[, array]]) {
}[, thisArg]);

callback: 這個 callback 函式，會把陣列中的每一個元素當成參數，帶入 callback 函式中，每個元素各執行一次，裡面會接收三個參數：
- currentValue: 目前被處理中的陣列裡的元素。
- index(選擇性): 上述元素的索引值。
- array(選擇性): 使用 forEach() 的陣列本身，即上述語法中的 arr 。
thisArg：執行 callback 函式的 this 值(即參考的物件)。

上述的語法及其元素執行的結果可以參考下面的範例：

let numberArr = [1, 2, 3];
let numberArr2 = [2, 4, 6];
[10, 20, 30].forEach(function(item, index, array){
  console.log(,item);
  // 1
  // 2
  // 3
  console.log( index);
  // 0
  // 1
  // 2
  console.log(array);
  // [1,2,3]
  console.log(this);
  // [1,2,3]
}, numberArr)
// 若這邊改成 numberArr2，則 console.log(this) 會印出 [2, 4, 6]

ES6 的寫法：

let numberArr = [1, 2, 3]
numberArr.forEach(item => console.log(item));
// 1
// 2
// 3

三、forEach() 與 for… 迴圈之差異

若要將陣列中的元素逐一取出，兩者的差異如下：

 // for...迴圈
 var meatsArr = ['牛排', '豬排', '雞排'];
 for(var i = 0; i < meatsArr.length; i++ ){
   var meat = meatsArr[i];
   console.log(i, meat);
     // 0 "牛排"
     // 1 "豬排"
     // 2 "雞排"
 }

 // forEach()
 meatsArr.forEach(function(meat, i){
   console.log(i, meat);
     // 0 "牛排"
     // 1 "豬排"
     // 2 "雞排"
 })

for...迴圈會產生全域變數，forEach() 則不容易踩到這個雷。

 // for...迴圈
 var meatsArr = ['牛排', '豬排', '雞排'];
 for(var i = 0; i < meatsArr.length; i++ ){
   var meat = meatsArr[i];
   console.log(i, meat);
 }
 console.log(i); // 3

for...迴圈產生全域變數的作用域問題，可以用 ES6 的 let, const 來解決。

 // for...迴圈
 const meatsArr = ['牛排', '豬排', '雞排'];
 for(let i = 0; i < meatsArr.length; i++ ){
   const meat = meatsArr[i];
   console.log(i, meat);
 }
 console.log(i); // Uncaught ReferenceError: i is not defined

for…迴圈可以被中斷，forEach() 則無法。

 // for...迴圈
 const meatsArr = ['牛排', '豬排', '雞排'];
 for(let i = 0; i < meatsArr.length; i++ ){
   const meat = meatsArr[i];
     if(i === 2){
         break;
     }
   console.log(i, meat);
     // 0 "牛排"
     // 1 "豬排"
 }

for…迴圈可以用在類陣列，forEach() 則無法，forEach() 及其他陣列的方法，都只能在純陣列使用，而不能使用在類陣列中，可以參考以下的範例：

 // 純陣列
 let arr = ["你", "我", "他"];
 arr.forEach(function(item){
     console.log(item);
     // "你"
     // "我"
     // "他"
 });

 // 類陣列
 function fn(){
  console.log(arguments);
   // "0": "你"
   // "1": "我"
   // "2": "他"

 // for...迴圈 可正常運行
 for(let i = 0; i < arguments.length; i++ ){
   const item = arguments[i];
   console.log(i, item);
     // "0": "你"
   // "1": "我"
   // "2": "他"
 }
 // forEach()
  arguments.forEach(function(item){
     console.log(item); // Uncaught TypeError: arguments.forEach is not a function
     });
 };

 fn("你","我","他");

類陣列如果使用 ES6 的展開語法 ([…]) 轉換成純陣列，則可以使用 forEach() 及其他陣列之方法。

// 類陣列
function fn(){
    const arg = [...arguments]; // 轉換成純陣列
     arg.forEach(function(item){
        console.log(item);
        // "你"
      // "我"
      // "他"
    });
};

fn("你","我","他");

5.物件轉換成陣列的語法 Object.values 也可以使用 forEach()

const people = {
  '001': {
    name: 'John',
    like: '黃金神威',
  },
  '002': {
    name: 'Fred',
    like: '七龍珠',
  },
  '003': {
    name: 'Allen',
    like: '國王排名',
  },
};

Object.values(people).forEach((item) => {
  console.log(item); 
    // { name: 'John', like: '黃金神威' }
    // { name: 'Fred', like: '七龍珠' }
    // { name: 'Allen', like: '國王排名' }
});

四、forEach() 常見用法

依序印出陣列中的元素

 let arr = ["a", "b", "c"];
 arr.forEach(function(item){
     console.log(item);
     // "a"
     // "b"
     // "c"
 });

運用在格式相同的元素中，如：HTML 中的 ul、li 結構

 <ul id="list">
 <ul>

 const list = document.getElementById("list");
 const meatsArr = ['牛排', '豬排', '雞排'];

 meatsArr.forEach(function(meat){
   list.innerHTML += `<li>我喜歡吃 ${meat} </li>`;
 })