[JavaScript practical skills (1)] loop traversal and jump out of loop traversal

Blog Description

The information involved in the article comes from the Internet and personal summary, which is intended to summarize personal learning and experience. If there is any infringement, please contact me to delete it, thank you!

illustrate

When I think of loops, I just think of for, and while I don’t talk about it here (because it has a loop exit condition), but in fact, the loop of Js is more than this for. Here, I will talk about several kinds of Js in detail. Class for loop.

When I think of jumping out of the loop, I immediately think of three keys: break , return , continue . In the business, you also need to exit the loop when traversing.

The for class loops through the array

1. For loop

const arr = [1, 2, 3, 4, 5, 6]
for (let i = 0; i < arr.length; i++) {
    console.log(i)
}

This is the simplest one and the most frequently used one. The performance is better than the others. So when you see someone else's source code, don't use this xxx, think twice!

However, there is a detail that can be optimized. The length is stored as a temporary variable instead of calculation every time. The improvement is more obvious when the amount of data is large.

const arr = [1, 2, 3, 4, 5, 6]
for (let i = 0, len = arr.length; i < len; i++) {
    console.log(i)
}

2. For...in loop

const arr = [1, 2, 3, 4, 5, 6]
for (let i in arr) {
    console.log(i)
}

Applying a for...in loop to an array will not only include all numerical indexes, but also all enumerable properties. So it is generally used for traversal of objects. And this method of loop traversal has the lowest efficiency

3. The forEach loop

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

forEach comes with the array, and the frequency of use is relatively high, but the performance is lower than for for

Since forEach comes with an array, it needs to be changed under other similar array types. Its performance is weaker than forEach.

const arr = [1, 2, 3, 4, 5, 6]
Array.prototype.forEach.call(arr, (item) => {
    console.log(item)
})

4. Map traversal

const arr = [1, 2, 3, 4, 5, 6]
arr.map((item) => {
    console.log(item)
})

The more the original map method is used, the more convenient and elegant it is to use, but the efficiency is relatively low (compared to forEach)

5. For...of traversal

const arr = [1, 2, 3, 4, 5, 6]
for (let i of arr) {
    console.log(i)
}

for...of is a new grammar of es6, the performance is better than for...in, but not as good as the ordinary for loop

Out of the loop

The three keywords that come to mind when jumping out of the loop mentioned above: break , return , continue , for and for...in can respond to these three keywords, but forEach cannot. Let me talk about these three keywords first

The for loop jumps out of the loop

break : The break statement will cause the running program to immediately exit the innermost loop or exit a switch statement.
continue : The continue statement is similar to the break statement. The difference is that instead of exiting a loop, it starts a new iteration of the loop. The continue statement can only be used in the loop body of the while statement, do/while statement, for statement, or for/in statement. Using it in other places will cause errors.
return : The return statement is used to specify the value returned by the function. The return statement can only appear in the body of the function, and it can cause syntax errors in any other place in the code.

const arr = [1, 2, 3, 4, 5, 6]
for (let i = 0; i < arr.length; i++) {
    console.log(i)
    if (i === 2) {
        return;
        // breack;
    }
}

forEach jumps out of the loop

In forEach, it does not respond to the statement that jumps out of the loop, so it does not work, but it must be made to work, okay? OK!

There is a show operation, just throw an error, I don't stop, I throw an error!

try {
  const arr = [1, 2, 3, 4, 5, 6]
  // 执行到第4次，结束循环
  arr.forEach(function(item,index){
    if (item === 4) {
       throw new Error("EndIterative");
    }
    console.log(item);// 1,2,3
  });
} catch(e) {
   if(e.message!="EndIterative") throw e;
};
// 下面的代码不影响继续执行
console.log(10);

But this method is not recommended, we don’t need it, just use the for loop directly, and the speed is fast

thanks

Universal network
And hard-working self, personal blog , GitHub test , GitHub
Public Account-Guizimo, Mini Program-Xiaogui Blog

[JavaScript practical skills (1)] loop traversal and jump out of loop traversal