A comprehensive analysis of forEach for in for of of the circular methods in JavaScript

  • 2021-06-28 06:12:59
  • OfStack

JavaScript1, a literal scripting language, is a dynamically typed, weakly typed, prototype-based language with built-in support types. Its interpreter is called JavaScript engine, which is a part of browser and widely used in client scripting language. It was first used on HTML (an application under Standard Generalized Markup Language) web pages to add dynamic functions to HTML web pages.

JavaScript has been born for more than 20 years. The method we use 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);
});

It's much simpler to write, but it has a drawback: You can't break the loop (using statements or using statements).

There is another loop method in JavaScript:.

The for-in loop is actually designed to loop the "enumerable" object:


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 is not recommended 
 
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 an important numeric sequence indicator, unlike ordinary object attributes.

In summary, for in is the method used to loop an object with the string key.

for-of cycle

A new cycle method is introduced in JavaScript6, which is for-of cycle, which is simpler than the traditional for cycle and makes up for the shortcomings of forEach and for-in cycles.

Let's look at the syntax of for-of:


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

The syntax of for-of looks similar to that of for-in, but its functionality is much richer, and it can loop many things.

for-of recycling example:


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

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


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

Loop 1 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
// 255
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let [key, value] of iterable) {
console.log(value);
}
// 1
// 2
// 3
for (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

Cycle 1 DOM collection

Loop an DOM collections, such as NodeList. We discussed how to loop an NodeList before. Now it is convenient to use 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 1 object with enumerable attribute

The forof loop cannot be used directly on ordinary objects, but if we loop by 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 1 generator (generators)

We can loop one generator (generators):


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

Related articles: