首頁 > web前端 > js教程 > JavaScript 中的 forEach() 和 map() 方法有什麼不同?

JavaScript 中的 forEach() 和 map() 方法有什麼不同?

王林
發布: 2023-09-10 13:05:08
轉載
1429 人瀏覽過

JavaScript 中的 forEach() 和 map() 方法有什么区别?

JavaScript 提供了多種循環陣列和物件的方法。最常見的方法是 for 循環,它用於迭代數組或物件的元素。但是,還有其他方法可以循環遍歷數組和對象,例如 forEach() 和 map() 方法。

forEach() 方法

forEach( ) 方法用於循環遍歷陣列或物件的每個元素。 forEach() 方法採用回呼函數作為參數。為數組或物件的每個元素呼叫回調函數。

forEach()方法與 for 迴圈類似,但它沒有傳回值。

範例

下面是完整的工作程式碼和解釋 -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      var arr = [1,2,3,4,5];
      arr.forEach(function(element){
         var item2 = document.createElement(&#39;div&#39;);
         item2.innerText = element;
         document.getElementById("result").appendChild(item2);
      });
   </script>
</body>
</html>
登入後複製

在上面的程式碼中,我們定義了一個名為「arr」的陣列。 forEach() 方法在「arr」陣列上呼叫。 forEach() 方法採用回呼函數作為參數。為“arr”數組的每個元素呼叫回調函數。

map()方法

map()方法用於循環遍歷陣列或物件的每個元素。 map() 方法採用回呼函數作為參數。為數組或物件的每個元素呼叫回調函數。

map() 方法類似於 forEach() 方法,但是它傳回一個新陣列。

範例

下面是完整的工作程式碼和解釋 -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      var arr = [1,2,3,4,5];
      arr.map(function(element){
         var item2 = document.createElement(&#39;div&#39;);
         item2.innerText = element;
         document.getElementById("result").appendChild(item2);
      });
   </script>
</body>
</html>
登入後複製

在上面的程式碼中,我們定義了一個名為「arr」的陣列。在「arr」陣列上呼叫map()方法。 map() 方法採用回呼函數作為參數。為“arr”數組的每個元素呼叫回調函數。回呼函數的傳回值儲存在一個名為「newArr」的新數組中。

map() 與forEach()

map() 和forEach() 的一些區別) 方法如下列出-

  • map()方法傳回一個新數組,而forEach() 方法不回傳新數組。

  • map() 方法用於轉換陣列的元素,而 forEach() 方法用於循環陣列的元素。

  • map() 方法可以與其他陣列方法一起使用,例如 filter() 方法,而 forEach() 方法不能與其他陣列方法一起使用。

結論

綜上所述,forEach() 和 map() 方法都用於循環陣列和物件。 forEach() 方法不傳回新數組,而 map() 方法傳回新數組。 map() 方法用於轉換數組的元素,而 forEach() 方法用於循環數組的元素。

以上是JavaScript 中的 forEach() 和 map() 方法有什麼不同?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板