首页 > web前端 > js教程 > JavaScript 中的 forEach() 和 map() 方法有什么区别?

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

王林
发布: 2023-09-10 13:05:08
转载
1407 人浏览过

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()方法

ma​​p()方法用于循环遍历数组或对象的每个元素。 map() 方法采用回调函数作为参数。为数组或对象的每个元素调用回调函数。

ma​​p() 方法类似于 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
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板