La différence entre forEach() et map() dans Array

Recommandations associées : "tutoriel vidéo javascript"

Aujourd'hui, nous examinons la différence entre les méthodes Array.forEach() et Array.map() dans Array la différence. Les méthodes

forEach() et map() sont généralement utilisées pour parcourir les éléments du tableau, mais il n'y a presque aucune différence, présentons-les une par une.

1. Valeur de retour La méthode

forEach() renvoie undefined, tandis que map() renvoie un nouveau tableau contenant les éléments convertis.

const numbers = [1, 2, 3, 4, 5];

// 使用 forEach()
const squareUsingForEach = [];
numbers.forEach(x => squareUsingForEach.push(x*x));

// 使用 map()
const squareUsingMap = numbers.map(x => x*x);

console.log(squareUsingForEach); // [1, 4, 9, 16, 25]
console.log(squareUsingMap);     // [1, 4, 9, 16, 25]

Puisque forEach() renvoie undefined, nous devons passer un tableau vide pour créer un nouveau tableau converti. La méthode map() n'a pas un tel problème, elle renvoie directement le nouveau tableau converti. Dans ce cas, il est recommandé d'utiliser la méthode map().

2. Lier d'autres méthodes

map() la sortie de la méthode peut être liée à d'autres méthodes (telles que reduce(), sort(), filter()), pour effectuer plusieurs opérations dans une seule instruction.

D'autre part, forEach() est une méthode terminale, ce qui signifie qu'elle ne peut pas être chaînée avec d'autres méthodes car elle renvoie undefined.

On trouve la somme des carrés de chaque élément d'un tableau en utilisant les deux méthodes suivantes :

onst numbers = [1, 2, 3, 4, 5];

// 使用 forEach()
const squareUsingForEach = []
let sumOfSquareUsingForEach = 0;
numbers.forEach(x => squareUsingForEach.push(x*x));
squareUsingForEach.forEach(square => sumOfSquareUsingForEach += square);

// 使用 map()
const sumOfSquareUsingMap = numbers.map(x => x*x).reduce((total, value) => total + value)
;

console.log(sumOfSquareUsingForEach); // 55
console.log(sumOfSquareUsingMap);     // 55

Utiliser la méthode forEach() est un travail très fastidieux lorsque plusieurs opérations sont nécessaires. Nous pouvons utiliser la méthode map() dans ce cas.

3. Performances

// Array:
var numbers = [];
for ( var i = 0; i 9f623e67e7dafa725f8c449472b9e812 squareUsingForEach.push(x*x));
console.timeEnd("forEach");

// 2. map()
console.time("map");
const squareUsingMap = numbers.map(x => x*x);
console.timeEnd("map");

C'est après avoir exécuté le code ci-dessus sur Google Chrome v83.0.4103.106 (64 bits) de MacBook Pro résultat. Il est recommandé de copier le code ci-dessus et de l'essayer dans votre propre console.

forEach: 26.596923828125ms
map:     21.97998046875ms

Évidemment, la méthode map() est meilleure que la forEach() conversion d'éléments.

4. Traversée d'interruption

Aucune de ces deux méthodes ne peut être interrompue avec break, sinon une exception sera levée :

const numbers = [1, 2, 3, 4, 5];

// break; inside forEach()
const squareUsingForEach = [];
numbers.forEach(x => { 
  if(x == 3) break; // 51b160109e97c852400ef5e1a3eb0e86 {
  if(x == 3) break; // <- SyntaxError 
  return x*x;
});

Le le code ci-dessus lancera Out of SyntaxError :

ⓧ Uncaught SyntaxError: Illegal break statement

Si vous devez interrompre le parcours, vous devez utiliser une simple boucle for ou une boucle for-of/for-in.

const numbers = [1, 2, 3, 4, 5];

// break; inside for-of loop
const squareUsingForEach = [];
for(x of numbers){
  if(x == 3) break;
  squareUsingForEach.push(x*x);
};

console.log(squareUsingForEach); // [1, 4]

5. Enfin,

est recommandé d'utiliser map() pour convertir les éléments du tableau car il a une syntaxe courte, une chaînabilité et de meilleures performances.

Si vous ne souhaitez pas renvoyer un tableau ou convertir les éléments d'un tableau, utilisez la méthode forEach().

Enfin, si vous souhaitez arrêter ou briser la commodité d'un tableau en fonction d'une condition, vous devez utiliser une simple boucle for ou une boucle for-of/for-in.

Adresse originale : https://codingnconcepts.com/javascript/difference-between-foreach-and-map-in-javascript-array/

Auteur : Ashish Lahoti

Adresse de traduction : https://segmentfault.com/a/1190000038421334

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!