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

Blog description

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

explain

When you think of a loop, you naturally think of for. while is not mentioned here (because it has loop exit conditions), but in fact, Js loops are more than for. Let's talk about several types of Js for loops in detail.

When you think of jumping out of a loop, you immediately think of three keys: break, return and continue. In business, you also need to exit the loop during traversal.

The for class iterates 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 others. Therefore, don't use xxx when you see the bottom of others' source code. Think twice!

However, there is a detail that can be optimized. The length can be saved as a temporary variable without each calculation. 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 on an array will contain not only all numeric indexes, but also all enumerable properties. Therefore, it is generally used for traversal of objects. And the efficiency of loop traversal in this way is the lowest

3. forEach loop

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

forEach comes with the array itself. It is used more frequently, but its performance is lower than that of for

Because forEach comes with the array itself, a change needs to be made under other similar array types, and 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)
})

map is used more and more. It is very convenient and elegant to use, but its efficiency is relatively low (compared with 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 syntax of es6. Its performance is better than for... in, but not as good as ordinary for loops

Jump out of loop

The three keywords mentioned above when jumping out of the loop: break, return, continue, for and for... in can respond to these three keywords, but forEach can't. Let's talk about these three keywords first

The for loop jumps out of the loop

• Break: the break statement causes the running program to immediately exit the loop contained in the innermost layer 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 a while statement, a do/while statement, a for statement, or a for/in statement. Using it elsewhere 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 function body and anywhere else in the code, causing a syntax error.

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 jump out of loop

It doesn't respond to the statement that jumps out of the loop in forEach, so it can't, but it must be OK, OK? that 's ok!

There is a Sao operation, directly throw a mistake, I don't stop, I throw a mistake!

try {
  const arr = [1, 2, 3, 4, 5, 6]
  // Execute to the 4th time and end the cycle
  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;
};
// The following code does not affect continued execution
console.log(10);

But this method is not recommended. We don't need to use the for loop directly. It's fast

thank

Universal network

And hard-working themselves, Personal blog，GitHub test，GitHub

The official account - the son of the Mo, a small program - little blog