有时 array.forEach() 比 array.map() 更好吗？

Question

In Javascript, I've been reading different articles on when to use forEach vs map on an array. General consensus appears to be if you simply want to read each element of an array, use forEach . If you actually want to modify the data, use map . Some even go so far to say always use map when you can, it's safer & faster.

In my case, all I want to do is update a single property in each element.

 var arr = [{ firstName: 'Tom', lastName: 'Washington', fullName: undefined }, { firstName: 'Bill', lastName: 'Smith', fullName: undefined }, { firstName: 'Jim', lastName: 'Jones', fullName: undefined }]; // arr.forEach((person) => { // person.fullName = `${person.lastName}, ${person.firstName}`; // }); var newArr = arr.map((person) => { return {...person, fullName: `${person.lastName}, ${person.firstName}`}; }); console.log(arr); console.log(newArr);

What I'm having a hard time understanding is why is the map approach preferred? By using forEach , I'm updating the data in place. With map , I'm creating a whole new array with all new elements. I understand this is preferred if you want to retain the original array, or you now have the option to do chaining if you want to perform additional operations on the array. But if I don't care about any of that, why isn't forEach preferred?

Answer 1

They're likely calling map "safer" because it adheres to a functional programming model. In functional programming, most, if not all, data is immutable; programming is a matter of creating new data from existing data, not modifying it in place.

The safety benefit comes in cases where you might not be the sole owner of the data. If your function receives an array from the caller, modifying it in place changes the caller's version of the array, not just your own (because they're really the same array). And if they received it as an argument as well, it changes their caller's array as well (because it's all the same array). Ultimately this can lead to someone twelve hops away calling a function with their array, expecting it to remain unchanged, being surprised when it gets modified, and not having an easy way to determine what modified it.

While JavaScript is not a functional language, it offers functional paradigms so you can write in a functional style. If you're consistent about it, this sort of unexpected action-at-a-distance doesn't happen, and it's easier to reason about your code.

This is particularly important for libraries; with a library, you don't want to assume the caller isn't programming functionally, so by behaving functionally, you avoid the risk of breaking their assumptions.

That said, if you're not using a functional style, and you're not making a library to redistribute, then action-at-a-distance will always be a risk, and being partially functional does very little for you, so you should just choose the right tool for the job; forEach for read only or to modify in place, map to create a new array.

One last note: In theory, map might make code faster, despite constructing new arrays. When the array is guaranteed to be created and destroyed within one function, the JIT optimizer has an easier time with lifetime analysis, analyzing typical contents, etc., and could conceivably:

1. Optimize intermediate arrays out completely (five map s might only make one new array)
2. Specialize the array to the contents, length, etc. (possible with arrays received from outside, but harder to do consistently)

I wouldn't count on such optimizations from map (don't decide which to use on that basis), but actual functional languages derive benefits like this from the immutability guarantees they enforce, and JavaScript JIT engines could take advantage of the same "guarantees" when they can observe they're adhered to in practice.

Answer 2

array.forEach simply iterates over the array while array.map() is making copy of that array, creating a callback function for every element hence you can do something like:

array.map( x => x*2 )

now you get brand new array with every value multiplied by 2

Answer 3

Just taking by an example.

forEach() may be preferable when you're not trying to change the data in your array, but instead want to just do something with it — like saving it to a database or logging it out:

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

And map() might be preferable when changing or altering data. Not only is it faster but it returns a new Array. This means we can do cool things like chaining on other methods ( map(), filter(), reduce() , etc.)

 let arr = [1, 2, 3, 4, 5]; let arr2 = arr.map(num => num * 2).filter(num => num > 5); // arr2 = [6, 8, 10]

What we're doing above is first mapping over arr and multiplying every element in the array times 2. After this, we filter through the array and only save the elements that are greater than 5. This leaves us with a final arr2 of [6,8,10] .