JS中的forEach()和map()方法介紹

forEach()

forEach 是ES5擴展的語法，可以使用它遍曆數組，對象。forEach()方法用於調用數組的每個元素，並將元素傳遞給回調函數。
注意：forEach()對於空數組是不會執行回調函數的，並且它不會改變原數組

語法：

array.forEach(function(currentValue,index,arr),thisValue)

• 參數 ：回調函數function(currentValue,index,arr) 必需，數組中每個元素需要調用的函數。
  函數參數：currentValue(必需)：當前元素，index(可選)：當前元素的索引值， arr(可選)：當前元素所屬的數組對象(可以理解為當前遍曆的數組對象)。
  thisValue(可選)：傳遞給函數的值一般用"this"值。如果這個參數為空，"undefined"會傳遞給"this"值。

簡單的例子：

let sum = 0;
let arr = [1,2,3,4];
const myFunction = (item)=>{
    
    sum += item;
}
arr.forEach(myFunction);
console.log(sum);//10
//我們一般直接將回調函數寫到裏面
let num1 = 0;
arr.forEach((item,index,arr)=>{
    
    num1 += item;
})
console.log(num1)//10

但是要注意的是：在forEach中不支持continue、break關鍵字。

• 我們可以使用return來跳出當次循環，相當於continue。

let arr = [1,2,3,4,5];
arr.forEach((item)=>{
    
     if(item == 3) return;
     console.log(item);
 });
 // 運行後，我們發現3被跳過了

• 我們可以利用 try catch/every代替 break, 這裏統一為遍曆到3結束
  • 利用try catch代替break

   try{
        
        let arr = [1,2,3,4,5];
        arr.forEach((item)=>{
        
            console.log(item)
            if(item == 3) throw new Error("EndTterative");
  
        })
    }catch(e){
        
        if(e.message!="EndTterative") throw e;
    }
  

  • 利用every()代替break

   let arr = [1,2,3,4,5];
   arr.every((item)=>{
           
        console.log(item);
        return item !== 3;
    })
  

map()

map()方法是ES6的新語法，和forEach類似。它返回一個新數組，數組中的元素為原始數組元素調用函數處理後的值。map()方法按照原始數組元素順序依次處理元素。
注意：map()不會對空數組進行檢測，map()不會改變原始數組

語法：

array.map(function(currentValue,index,arr),thisValue)

• 參數：回調函數function(currentValue,index,arr) 必需，數組中每個元素需要調用的函數。
  函數參數：currentValue(必需)：當前元素，index(可選)：當前元素的索引值， arr(可選)：當前元素屬於的數組對象(可以理解為當前遍曆的數組對象)。
  thisValue(可選)：對象作為該執行回調時使用，傳遞給函數，用作"this"的值。如果省略了thisValue，或者傳入null、undefined，那麼回調函數的this為全局對象。

簡單例子

 //擴大5倍，並返回新數組
 let arr = [1,2,3,4,5]; 
 let newArr = arr.map((item)=>{
    
      return item * 5; 
  })
  console.log(newArr);//[5,10,15,20,25]

• map()同樣不支持break和continue。map()中的return 是將每次迭代遍曆時處理後的元素添加到map()返回值中。調用map()的返回值是一個新數組，新數組中的每個元素為每次map()迭代時return的值。