The difference between map and foreach in JavaScript

Translator by: I love the map more than Haskell.

• Original: JavaScript?—? Map vs. Foreach-what ' s The difference between Map and ForEach in JavaScript?
• Translator: Fundebug

In order to ensure readability, this paper uses free translation rather than literal translation. In addition, the copyright of this article belongs to the original author, translation is only used for learning.

If you already have experience using JavaScript, you may already know these two seemingly identical methods: Array.prototype.map() and Array.prototype.forEach() .

So what is the difference between them?

Defined

Let's start with a look at the definition of map and foreach on MDN:

• forEach(): Performs the provided function for every element (executes a provided function once for each array element).
• map(): Creates a new array in which each element is derived from the function provided by each element of the invocation array (creates a new array with the results of calling a provided function on every eleme NT in the calling array).

What difference does it really have? forEach()method does not return execution results, but instead undefined . In other words, forEach() the original array is modified. Instead, map() the method gets a new array and returns.

Example

An array is provided below, and if we want to double each of these elements, we can use map and forEach to achieve the goal.

Let arr = [5];

Foreach

Note that forEach there is no meaningful value returned.
The value that we modify directly in the callback function arr .

Arr.foreach (num, index) + = { 2; });

The results of the implementation are as follows:

arr = [2, 4, 6, 8, 10]

Map

Let doubled = Arr.map (num = { 2; });

The results of the implementation are as follows:

doubled = [2, 4, 6, 8, 10]

Execution Speed Comparison

Jspref is a very good site to compare the execution speed of different JavaScript functions.

Here is forEach() map() The test result of the and:

As you can see, the execution rate on my Computer forEach() is map() 70% slower. The results of each person's browser will be different. You can use the link below to test it: Map vs. Foreach-jspref.

JavaScript too (GUI) Live (Yi), out of the bug you do not know, it is advisable to access the Fundebug online real-time monitoring .

The understanding of the function-type angle

If you are accustomed to using functions as programming, then you certainly prefer to use them map() . Because forEach() it changes the value of the original array and map() returns an entirely new array, the original array is not affected.

Which is better?

Depends on what you want to do.

forEachIt's the right thing to do when you're not going to change the data, but just want to do something with the data-like a database or a print.

Let arr = [' d ']; Arr.foreach (letter) = { Console.log (letter); }); A B C D

map()For when you want to change the data value. Not only is it faster, but it also returns a new array. The advantage of this is that you can use composite (composition) (Map (), filter (), reduce () and other combinations to play more tricks.

Let arr = [5]; Let arr2 = Arr.map (2). Filter (5); ARR2 = [6, 8, 10]

We first use map to multiply each element by 2 and then filter out those elements that are greater than 5. The final result is assigned to arr2 .

Core points

• Can be used to forEach() do, the map() same can. The reverse is true.
• map()Allocates memory space to store the new array and returns, forEach() without returning data.
• forEach()Allows you callback to change the elements of the original array. map()returns the new array.

Copyright NOTICE: Please specify the author fundebug and this address:https://blog.fundebug.com/2018/02/05/map_vs_foreach/

The difference between map and foreach in JavaScript