Comprehensive analysis of loop methods in JavaScript forEach, for-in, for-of

JavaScript is a literal scripting language, which is a dynamic, weak, prototype-based language with built-in support types. Its interpreter is called the JavaScript engine. It is part of the browser and is widely used in the client scripting language. It was first used on HTML (an application under the standard universal markup language) web pages to add dynamic functions to HTML web pages.

JavaScript has been born for more than 20 years, and the method we have been using to loop an array is as follows:

 for (var index = 0; index < myArray.length; index++) {console.log(myArray[index]);}

Since JavaScript5, we have started to use the built-in forEach method:

 myArray.forEach(function (value) {console.log(value);});

The writing method is much simpler, but it also has its shortcomings: you cannot interrupt the loop (using statements or using statements.

There is also a loop method in JavaScript:.

The for-in loop is actually designed for looping "enumerable" objects:

 var obj = {a:1, b:2, c:3};for (var prop in obj) {console.log("obj." + prop + " = " + obj[prop]);}// Output:// "obj.a = 1"// "obj.b = 2"// "obj.c = 3"

You can also use it to loop an array:

 for (var index in myArray) { // This console.log(myArray[index]);}

It is not recommended to use for-in to loop an array, because unlike objects, the index of an array is different from ordinary object properties and is an important numerical sequence indicator.

In short, for in is a method used to loop through objects with string keys.

for-of loop

JavaScript6 introduces a new loop method, which is the for-of loop, which is simpler than the traditional for loop, and at the same time makes up for the shortcomings of forEach and for-in loops.

Let's take a look at its for-of syntax:

 for (var value of myArray) {console.log(value);}

The syntax of for-of looks very similar to for-in, but it has much richer functions and can loop a lot of things.

Example for-of loop usage:

 let iterable = [10, 20, 30];for (let value of iterable) {console.log(value);}// 10// 20// 30

We can use it instead, so it becomes an unmodified static variable in the loop.

 let iterable = [10, 20, 30];for (const value of iterable) {console.log(value);}// 10// 20// 30

Loop a string:

 let iterable = "boo";for (let value of iterable) {console.log(value);}// "b"// "o"// "o"let iterable = new Uint8Array([0x00, 0xff]);for (let value of iterable) {console.log(value);}// 0// 255let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);for (let [key, value] of iterable) {console.log(value);}// 1// 2// 3for (let entry of iterable) {console.log(entry);}// [a, 1]// [b, 2]// [c, 3]let iterable = new Set([1, 1, 2, 2, 3, 3]);for (let value of iterable) {console.log(value);}// 1// 2// 3

Loop a DOM collection

Looping a DOM collections, such as NodeList. We discussed how to loop a NodeList before. Now it is convenient, you can use the for-of loop directly:

 // Note: This will only work in platforms that have// implemented NodeList.prototype[Symbol.iterator]let articleParagraphs = document.querySelectorAll("article > p");for (let paragraph of articleParagraphs) {paragraph.classList.add("read");}

Loop a object with an enumerable attribute

The forof loop cannot be used directly on ordinary objects, but if we loop according to the properties that the object has, we can use the built-in Object.keys() method:

 for (var key of Object.keys(someObject)) {console.log(key + ": " + someObject[key]);}

Loop a generator

We can loop through a generator:

 function* fibonacci() { // a generator functionlet [prev, curr] = [0, 1];while (true) {[prev, curr] = [curr, prev + curr];yield curr;}}for (let n of fibonacci()) {console.log(n);// truncate the sequence at 1000if (n >= 1000) {break;}}