Have you learned the wrong usage of foreach

Programmer's interview question bank  web Front end interview question bank VS java Back end interview question bank

Preface

Have used forEach There are roughly two kinds of people ： Common use , A simple ; Complex use , I always want to make some tricks , The result is some inexplicable bug And that's what happened , Solve these bug The time spent can be realized in a different way , Can be used as for Cyclic , It's not just forEach. you 're right , The author is the latter , After all, it's me “ Poor learning ”. So , Take some time. , Combined with our own practical development experience , Let's take care of it forEach.

grammar

forEach() Is a prototype method of an array object , This method will execute the given callback function once for each element in the array , also Always return undefined. Class array objects are not forEach Methodical , for example arguments.forEach It's easy to use ：

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

Practical example ：

const arr = [1,2,3];
arr.forEach(item => console.log(item)); // 1,2,3

Parameter description ：

callback： The callback function to be executed by each element in the array , There can be 1-3 Parameters

• currentValue： Elements currently being processed , Will pass

• index： Index of the element currently being processed , Optional parameters

• array：forEach Method to manipulate the original array object , Optional parameters

thisArg： Current implementation callback When calling back a function , Of the callback function this Point to , The global object that is pointed to by default , Optional parameters

The grammar doesn't seem complicated , So let's see if we can make the following mistakes ：

Incorrect usage

Incorrect usage refers to the operation described by the title , Not the body content , Bear in mind , Bear in mind .

Programmer's interview question bank  web Front end interview question bank VS java Back end interview question bank

Add or delete data in the original array

forEach() stay for the first time call callback Will determine the traversal range , Generally speaking, it will be in ascending order according to the index Valid elements Do it once callback function . If it is an uninitialized array item or is calling forEach() Items added to the array are not accessed , If the elements in the array are deleted during traversal , Unexpected situations may occur .

Invalid values will be skipped directly

Add element after call , Will not be accessed

const arr = [1,,,2,4];console.log(arr.length); // 5let callbackCounts = 0;
arr.forEach(item => {
    console.log(item); // 1 2 4
    callbackCounts++;
    arr.push(6); //  Add element after call , Will not be accessed })console.log(callbackCounts); // 3console.log(arr); // [1,,,2,4,6,6,6]

Delete the elements in the array

const arr = ['a', 'b', 'c', 'd'];console.log(arr.length); // 4let callbackCounts = 0;
arr.forEach((item, index) => {    // arr.shift();
    console.log(item); // 'a','b','d', among 'c' Will be skipped 
    if (item === 'b') {
        // arr.shift(); //  Delete the head ,arr Result ：['b', 'c', 'd']
        arr.splice(index, 1); //  Delete current element ,arr Result ：['a', 'c', 'd']
        // arr.splice(-1); //  Delete the last element ,arr Result ：['a', 'b', 'c']
    }
    callbackCounts++;
})console.log(callbackCounts); // 3console.log(arr); // ['a', 'c', 'd']

Deleting elements can be a bit more complicated , Interested friends can test by themselves , We can understand that ：

• forEach The traversal range is determined at the time of the call , Pass to callback The value of is forEach The value when traversing the element , Even in callback The element in the array is deleted in , But the value has been passed in

• If it is a valid value ,callbackCounts It will increase . At the next cycle ,forEach The corresponding value of the current cycle will be obtained according to the index of the previous cycle , Notice that the array length has changed at this time , Will appear “ skip ” The phenomenon of

• Then repeat , Know that the array traversal is completed

Got it ” skip “, How dare you take it for granted to delete the data in the array ？

Modify the data in the original array

Since you can't add or delete , What if I revise it ？ Actually, modify the elements in the array , No, no, no , Just pay attention to the method of use .

1. If the array contains basic data types ：string、number、boolean etc. , Only using the first parameter of the callback function to modify the value in the array will not affect the original array

   const arr = [1,2,3,4,5]
   arr.forEach((item, index, array) => {
       item+=1; // [1,2,3,4,5]
       // arr[index]+=1; // [2,3,4,5,6]
       // array[index]+=1; // [2,3,4,5,6]})console.log(arr);

2. If the in the array is a reference data type ：object etc. , Replacing array items directly will not affect the original array

   const arr = [
       {name: ' Zhang San ', id: 1},
       {name: ' Li Si ', id: 2}
   ]
   arr.forEach((item, index, array) => {
       if (item.id === 2) {
           item = {name: ' Wang Wu ', id: item.id}; //  Zhang San 、 Li Si 
           // Object.assign(item, {name: ' Wang Wu ', id: item.id}); //  Zhang San 、 Wang Wu 
           // arr[index] = {name: ' Wang Wu ', id: item.id}; //  Zhang San 、 Wang Wu 
           // array[index] = {name: ' Wang Wu ', id: item.id}; //  Zhang San 、 Wang Wu 
       }
   })console.log(arr);

   When the array object is traversed , In fact, the array items are Refer to the address Assign a value to item, If you reassign the reference address of another object to item, It does not change the data of the original reference address , It will not affect the original array .

3. If the in the array is a reference data type ：object etc. , At this point, we only modify a certain attribute of the array item , At this time, the original array will be affected

   const arr = [
       {name: ' Zhang San ', id: 1},
       {name: ' Li Si ', id: 2}
   ]
   arr.forEach((item, index, array) => {if (item.id === 2) {
       item.name = ' Wang Wu ';
       // arr[index].name = ' Wang Wu '; //  Zhang San 、 Wang Wu 
       // array[index].name = ' Wang Wu '; //  Zhang San 、 Wang Wu }
   })console.log(arr); //  Zhang San 、 Wang Wu 

   The truth is the same as 2 similar ,item It points to the reference address , Modifying the attribute is equivalent to modifying the attribute of the object in the reference address , The original array will also be modified

To sum up, we can find , If you want to in forEach Modify the original array , Then you need to use the callback function , Through the index index Or with the help of Object.assgin() To achieve , The final principle is to modify the data in the reference address , Instead of directly modifying .

Asynchronous functions are used in callback functions

The execution order of asynchronous functions and synchronous functions will not be discussed in detail here , Details can be moved ： Don't understand the event cycle , Take a look at this article , Simply put, synchronous code executes before asynchronous code .

Take an example ：

const arr = [1,2,3,4,5]let sum = 0;let callbackCounts = 0;function Sum(a, b) {
    return new Promise((resovle) => {
        resovle(a + b)
    })
}
arr.forEach(async (item, index, array) => {
    sum = await Sum(sum, item)
})console.log(sum); // 0

The actual value of the sum is not what we expect 15, It is 0.

If we need to implement asynchronous summation , have access to for Cycle to achieve ：

const arr = [1,2,3,4,5]let sum = 0;let callbackCounts = 0;function Sum(a, b) {
    return new Promise((resovle) => {
        resovle(a + b)
    })
}
(async function() {
    for (let item of arr) {
        sum = await Sum(sum, item)
    }
    console.log(sum); // 15})();

Use return End of cycle

In the use of for loop , We can generally use break、return To jump out of the loop , Throwing an exception can also , But this is not a normal development process . Let's try it in forEach Use in break、return Does it work ：

forEach End of cycle

const arr = [1,2,3,4,5]let callbackCounts = 0;
arr.forEach((item, index, array) => {
    callbackCounts++;
        if (item === 2) {
        return; // forEach Cannot be used in break, Even using return, Nor can you stop the loop 
    }
})console.log(arr.length, callbackCounts); // 5 5

If you have to jump out forEach loop , The first suggestion is to use other looping methods , for example ：for、for of、for in、map etc. , Second, we can consider throwing an exception to jump out forEach loop ：

const arr = [1,2,3,4,5]let callbackCounts = 0;try {
    arr.forEach((item, index, array) => {
        callbackCounts++;
        if (item === 2) {
            throw 'throw forEach';
        }
    })
} catch (e) {    console.log(arr.length, callbackCounts); // 5 2}

If you really want to use throw To throw an exception , Isn't it nice to use other recycling methods

No incoming this

forEach() There may be this Point to the problem , for example ：

function Counter() {
    this.sum = 0;
}
Counter.prototype.add = function (array) {
    array.forEach(function(element) {
        this.sum += element;
    });
}const obj = new Counter();
obj.add([1,2,3,4,5])console.log(obj.sum); // 0

Not specified this, The default is not window object , At this time this.sum by undefined, And what we think is this Point to the passed in array . Then you need to pass in this Or use the arrow function .

array.forEach((element) => {    this.sum += element;
});
array.forEach(function(element) {    this.sum += element;
}, this);

Proper use

Avoid incorrect usage , Of course, it is the correct usage .

Actually forEach It was designed just to simplify for Loop traversal , If there are too many other operations , It goes against the original intention of the design . every last API They all have their own scope of application , If you insist on a shuttle , May step on a lot of holes .

A brief summary of the correct use ：

• It's best to just iterate through the original array , It does not involve modifying the data in the original array

• Avoid asynchronous operations in callback functions

• Out of commission return

• forEach() The callback function of uses the arrow function , Avoidable this Point to the problem

summary

• forEach Itself does not change the original array , But its callback function may be modified . If you really want to modify the original array , It is recommended to use map、filter Other methods

• forEach Method always returns undefined, This makes forEach Not like map、filter You can also chain call

• In addition to throwing an exception ,forEach Cannot be aborted or jump out of the loop , If you want to jump out of the loop , It is recommended to use other methods for Cycle method

• If asynchronous functions are involved , Consider using for await of Instead of forEach

Programmer's interview question bank  web Front end interview question bank VS java Back end interview question bank