undefinedfix
Sign in

What's the difference between map and foreach loops?

Vic edited in Tue, 11 Oct 2022

I read a lot of good information, too around, for easy to understand, immediate effect!

4 Replies
ePumps
commented on Wed, 12 Oct 2022

In addition to "map", the word "map" should be translated into "map" in some scenarios, that is, according to certain conversion rules, each item of a set is converted to another set. Array.prototype.map In other words, a new array is constructed based on each item of an array. 'for each' is easy to understand, that is, performing the same operation on each item of the array does not return a new array. For example, now the village head asks you to make a photo album for the whole village. In the first scheme, foreach:

    const people = ['小明', '小吴', '小敏'];  // 村里人
    const tempAlbum = [];  // 去买一个空相册
    function takePhoto(person){
        return person + "的照片";
    }
    // 挨家挨户拍照,并把照片存入相册
    const album = people.forEach(function(person){
        const photo = takePhoto(person);
        tempAlbum.push(photo);
        return photo;
    });
    console.log('tempAlbum is now:', tempAlbum);
    console.log('album is now:',album);

The second scheme is map

    const people = ['小明', '小吴', '小敏'];  // 村里人
    function takePhoto(person){
        return person + "的照片";
    }
    // 挨个拍照后,自动生成了影集
    const album = people.map(function(person){
        return takePhoto(person);
    });
    console.log('album is now:', album);

Run the above two examples, you can see the design intent and convenience of map - when you need to generate another array based on one array, you can not create intermediate variables manually.

As for whether it will affect the original array, traversal operations can affect the original array or not. This is knowledge about the original type and reference type. After understanding these two knowledge points, the doubt about whether it will affect or not will be solved.

Array.prototype.map It's very convenient in JSX. It's very convenient to convert the list to JSX tag without creating intermediate variables. Paste a private product, which has JS implementation of the class map function, although the actual use: use for syntax to simulate the implementation of JS array part of the built-in iterative method.

codewizzard
commented on Wed, 12 Oct 2022
    let arr = [
      { a: 10 },
      { a: 11 },
      { a: 12 }
    ]
    let forEachArr = arr.forEach(item => {
      return item.a
    })
    let mapArr = arr.map(item => {
      return item.a
    })
    console.log(mapArr) // [10, 11, 12]
    console.log(forEachArr) // undefined

The purpose of using foreach is to execute methods on each item of the array, and there is no return value. Therefore, the return in foreach will not break the loop, but will only jump out of the current method map. Like foreach, return will not break the loop, but will only return an array, and you can receive your own code. A run will make you understand it more deeply

Maas
commented on Wed, 12 Oct 2022

It's easy to understand and get instant results. Ha ha, the front end is eager for quick success and instant benefits. It's impetuous.

  1. The syntax of the two APIs is as follows:

map:

var new_ array = arr.map (function callback(currentValue[, index[, array]]) {}[, thisArg])

forEach

arr.forEach (function callback(currentValue[, index[, array]]) {}[, thisArg]);

Therefore, there is no difference in the API between the two when they are used; the only difference is that map has a return value and foreach has no return value, which is the same as what @ Anhao said. They can't break the loop.

  1. From the use of performance

In chrome 65 browser test, the efficiency of map is about 1 / 3 of foreach; that is to say, when traversing arrays, foreach will be higher.

But in fact, map does more than foreach.

So strictly speaking, map is an upgraded version of foreach. You can use foreach to implement a map.

MAC27
commented on Wed, 12 Oct 2022

In JSX, map can be used because it will return an array, and it can also be used in chain call, [1,2,3]. Map (x = > x). Foreach (x = > x). Foreach is suitable for no return value, such as repeatedly calling a method, [1,2,3]. Foreach (x = > FN (x))