What is the difference between forEach() and map() methods in JavaScript?-JS Tutorial-php.cn

What is the difference between forEach() and map() methods in JavaScript?

王林

Release： 2023-09-10 13:05:08

forward

1392 people have browsed it

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

JavaScript provides a variety of methods for looping arrays and objects. The most common method is the for loop, which is used to iterate over the elements of an array or object. However, there are other ways to loop through arrays and objects, such as the forEach() and map() methods.

forEach() method

forEach( ) method is used to loop through each element of an array or object. The forEach() method takes a callback function as parameter. A callback function is called for each element of an array or object.

forEach()The method is similar to the for loop, but it does not return a value.

Example

Below is the complete working code and explanation -

<!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>

Copy after login

In the above code, we have defined an array named "arr". The forEach() method is called on the "arr" array. The forEach() method takes a callback function as parameter. The callback function is called for each element of the "arr" array.

map() method

map() method is used to loop through each element of an array or object. The map() method takes a callback function as parameter. A callback function is called for each element of an array or object. The

map() method is similar to the forEach() method, but it returns a new array.

Example

Below is the complete working code and explanation -

<!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>

Copy after login

In the above code, we have defined an array named "arr". Call the map() method on the "arr" array. The map() method takes a callback function as parameter. The callback function is called for each element of the "arr" array. The return value of the callback function is stored in a new array called "newArr".

map() and forEach()

Some differences between map() and forEach()) methods are listed below-

map() method returns a new array, while the forEach() method does not return a new array.
The map() method is used to transform the elements of the array, while the forEach() method is used to loop over the elements of the array.
The map() method can be used with other array methods, such as the filter() method, while the forEach() method cannot be used with other array methods.

Conclusion

In summary, both the forEach() and map() methods are used to loop arrays and objects. The forEach() method does not return a new array, while the map() method returns a new array. The map() method is used to transform the elements of an array, while the forEach() method is used to loop over the elements of an array.

The above is the detailed content of What is the difference between forEach() and map() methods in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!