當前位置:網站首頁>JS中的forEach()和map()方法介紹

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

2022-01-27 22:09:46 .ToString()°

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的值。

版權聲明
本文為[.ToString()°]所創,轉載請帶上原文鏈接,感謝
https://cht.chowdera.com/2022/01/202201272209458480.html

隨機推薦