Thoroughly understand JavaScript forEach & map

(of course, there are others such as for, for in, for of, reduce, filter, every, some,...)

The reason why I have to write this a few days ago is that I made a low-level and stupid mistake when I wrote the code a few days ago, and finally made a small bug.

Finally find out the reason, angry, even a little want to laugh, today write these two methods.

The code of my street fighting is like this. To add an attribute to an object in an array, I wrote the following code at will:

// Add input_quantity into every list item const dataSoruceAdapter = data => data.forEach((item) => { item.input_quantity = item.quantity }) // ... const transformedDataSource = dataSoruceAdapter(defaultDataSource); const [orderList, setOrderList] = useState(transformedDataSource);

Later, we found that the array is empty

I feel stupid. Change it:

const dataSoruceAdapter = data => data.map((item) => { item.input_quantity = item.quantity return item })

Get it done.

Let's take a closer look at forEach and map:

forEach: performs the provided function for each element.

map: create a new array, each element of which is obtained by calling the function provided by each element in the array.

Come to the conclusion:

The forEach method does not return the execution result, but is undefined.

That is, forEach will modify the original array, and the map method will get a new array and return it.

Let's take a look at specific examples.

The forEach method performs a callback function in ascending order for each item with valid values in the array, and the deleted or uninitialized items will be skipped (for example, on a sparse array).

forEach receives two parameters: arr.forEach(callback[, thisArg]);

The callback function is passed in three parameters in turn:

1. Array the value of the current item
2. Index of array current item
3. Array object itself

For example:

const arr = ['1', '2', '3']; // callback function takes 3 parameters // the current value of an array as the first parameter // the position of the current value in an array as the second parameter // the original source array as the third parameter const cb = (str, i, origin) => { console.log(`$: $ / $`); }; arr.forEach(cb); // 0: 1 / 1,2,3 // 1: 2 / 1,2,3 // 2: 3 / 1,2,3

If the thisArg parameter has a value, this will point to the object on the thisArg parameter every time the callback function is called.

If the thisArg parameter is omitted, or the value is null or undefined, then this points to the global object.

For a grudging example, update an object's properties from the element values in each array:

function Counter() { this.sum = 0; this.count = 0; } Counter.prototype.add = function(array) { array.forEach(function(entry) { this.sum += entry; this.count++; }, this); // console.log(this) -> Counter }; var obj = new Counter(); obj.add([1, 3, 5, 7]); obj.count; // 4 obj.sum; // 16

If you use the arrow function to pass in a function parameter, the thisArg parameter is ignored because the arrow function lexically binds the this value.

In general, we only use the first two parameters of callback.

Map does the same thing as the for loop, except that map creates a new array.

So, if you don't plan to use the new array returned, but still use map, this is against the original intention of map design.

The map function takes two parameters:

1. callback
   callback also has three parameters:

   1. currentValue
   2. index
   3. array
2. Thisarg (optional)

This is similar to forEach.

Specific examples:

const arr = ['1', '2', '3']; // callback function takes 3 parameters // the current value of an array as the first parameter // the position of the current value in an array as the second parameter // the original source array as the third parameter const cb = (str, i, origin) => { console.log(`$: $ / $`); }; arr.map(cb); // 0: 1 / 1,2,3 // 1: 2 / 1,2,3 // 2: 3 / 1,2,3

callback method use case:

arr.map((str) => { console.log(Number(str)); })

The result after map is a new array, which is not equal to the original array:

const arr = [1]; const new_arr = arr.map(d => d); arr === new_arr; // false

You can also specify the value of the second parameter thisArg:

const obj = { name: 'Jane' }; [1].map(function() { console.dir(this); // { name: 'Jane' } }, obj);

But if you use the arrow function, this will be window:

[1].map(() => { console.dir(this); // window }, obj);

The working mechanism of arrow function and ordinary function is different, not this scope. You can see this article for details:

https://www.geeksforgeeks.org...

When I write here, I think of a classic topic.

6 December 2019, 21:18 | Views: 7577