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


Posted by ABow_Chen on 2022-09-15

一、forEach() 簡介

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

二、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… 迴圈之差異

  1. 若要將陣列中的元素逐一取出,兩者的差異如下:

     // 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 "雞排"
     })
    
  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
    
  3. 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 "豬排"
     }
    
  4. 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() 常見用法

  1. 依序印出陣列中的元素

     let arr = ["a", "b", "c"];
     arr.forEach(function(item){
         console.log(item);
         // "a"
         // "b"
         // "c"
     });
    
  2. 運用在格式相同的元素中,如:HTML 中的 ul、li 結構

     <ul id="list">
     <ul>
    
     const list = document.getElementById("list");
     const meatsArr = ['牛排', '豬排', '雞排'];
    
     meatsArr.forEach(function(meat){
       list.innerHTML += `<li>我喜歡吃 ${meat} </li>`;
     })
    

參考資料:

https://www.casper.tw/development/2020/10/05/js-for-loop-vs-for-each/

https://ithelp.ithome.com.tw/articles/10228571

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach


#javascript #foreach







Related Posts

SQL 合併&移動平均

SQL 合併&移動平均

[ 學習筆記系列 ] 網頁本質 (一) - HTML 篇

[ 學習筆記系列 ] 網頁本質 (一) - HTML 篇

利用react-bootstrap打造React風格頁面

利用react-bootstrap打造React風格頁面


Comments