Home  >  Article  >  Web Front-end  >  What is the difference between map and foreach in es6

What is the difference between map and foreach in es6

青灯夜游
青灯夜游Original
2022-03-09 19:10:074206browse

Difference: 1. The forEach() method will not return the execution result, and the return value is "undefined", while the map() method will return the operation result and an array; 2. the forEach() method will modify The original array, and the map() method does not modify the original array.

What is the difference between map and foreach in es6

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

foreEach() method: Execute the provided function for each element.

map() method: Create a new array in which each element is obtained by calling the provided function on each element in the array.

Difference

The forEach() method will not return the execution result, but undefined. In other words, forEach() will modify the original array. The map() method will get a new array and return it.

Example:

Make the square of an array

There is an array as follows

let arr =[1,2,3,4,5,6]

Use forEach() and Map respectively below ()

forEach()

Note that forEach will not return a meaningful value.

We directly modify the value of arr in the callback function.

arr.forEach((value, key) => {
 return arr[key] = value * value;
});

The execution results are as follows:

What is the difference between map and foreach in es6

Map()

let list = arr.map(value => {
 return value * value;
});

The execution results are as follows:

What is the difference between map and foreach in es6

Execution speed comparison

Execution speed of forEach()

What is the difference between map and foreach in es6

How to use

forEach is suitable when you don’t plan to change the data, but just want to do something with the data Things – like saving to a database or printing.

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
 console.log(letter);
});
// a
// b
// c
// d

map() is suitable when you want to change the data value. Not only is it faster, but it returns a new array. The advantage of this is that you can use composition (combination of map(), filter(), reduce(), etc.) to create more tricks.

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(value => value * value).filter(value => value > 10);
// arr2 = [16, 25]

We first use map to multiply each element by itself, and then filter out those elements greater than 10. The final result is assigned to arr2.

Summary

What forEach() can do, map() can do the same. The reverse is also true.

map() will allocate memory space to store the new array and return it, while forEach() will not return data.

forEach() allows the callback to change the elements of the original array. map() returns a new array.

【Related recommendations: javascript video tutorial, web front-end

The above is the detailed content of What is the difference between map and foreach in es6. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn