Implementation of map and forEach methods for constructing array data in Vue

Array operations are the most important data operations on the front end. Constructing array data is also very common in array operations. This article will sort out the use of map and forEach methods in Vue projects.

If you want to understand these two methods in depth, you must write a few simple implementations to understand the essence of them. Only the core part is considered here, and some boundary issues are ignored.

1. Handwriting implementation

Simple map method:

 = function(callback) {
    const res = [];
    for (let i = 0; i < ; i++) {
        // Here the execution result of the callback function is pushed into the new array.        // Therefore, the map method must have a return in the callback function.        (callback(this[i], i, this));
}
    return res;
}

Simple forEach method:

 = function (fn, context) {
  context = context || arguments[1];
  let len = ;
  let k = 0;
  while (k < len) {
    if (k in this) {
      (context, this[k], k, this);
    };
    k++;
  }
};

2. The difference between the two

Similarities:

1. Both encapsulate the loop statements of the array (while loop).

2. What map can do, forEach can do, and vice versa.

3. Both can be modified and implemented through callback functions. Of course, both callback functions can be modified without modifying the original array.

4. Using return in two methods can only end the current loop, but not the entire loop, because return is written in the callback function.

Differences:

1. The map method returns a new array; the forEach method returns undefined.

2. Map can be called chained, forEach cannot. Because forEach always returns undefined.

3. There is no way to terminate or jump out of the forEach loop except to throw an exception.

3. Use scenarios

Do not use map method in the following two situations.

1. Not intended to use the returned new array.

2. No value is returned in the callback function.

Take an example in Vue:

For example, when the background interface returns an object data, we need to construct this object data into a new array and display it in the select drop-down box in elementUi. So should we use the map method or forEach?

let data = {
    product: 'product',
    service: 'Serve',
    micServide: 'Microservice',
}

let keysArr = (data)

// Use the forEach method

let res = []
keysArr .forEach(item => {
    ( { value: item, label: data[item] } )
})

// Use map method

let res1 = (item => {
    return { value: item, label:  }
})

// In Vue project, just replace res with assigning values ​​to the data in the current component data.
As can be seen from the above example, when we need to construct a new array, both methods can be used, but the map method must be more concise. Therefore, where you can use the map method, you must first use the map method.

This is the article about the construction of array data-map and forEach methods in Vue. For more related contents of Vue construction array data, please search for my previous articles or continue browsing the following related articles. I hope everyone will support me in the future!