Differences and usage examples of for for... in for... of and forEach in JS

for cycle

Basic syntax format:

for (initialization variable; Conditional expression; Operation expression) {

Loop body statement;
}

Ordinary for loops can be used in both Array and Object. return, break, etc. can be used in an for loop to interrupt the loop.

// Traversing an array 
        var arr = [1,2,3,4,5];
        for(var i=0;i<arr.length;i++){
            console.log(arr[i]);
        }

// Traversing objects 
        var obj={
            x0:10,
            x1:20,
            x2:30
        }
        for(var k=0;k<3;k++){
            console.log(obj['x'+k]);
        }

When traversing objects, it is obvious that there are significant restrictions on the naming of attributes and the value of k.

forEach cycle

Basic syntax format:

arr.forEach(function(k){
console.log(k);
})

Take the elements from the array in turn and put them in k, and then pass k as an argument to the function

. forEach () is a method of the Array prototype that allows you to traverse the elements of an array, while. forEach () cannot traverse objects. The forEach method cannot jump out of the loop using the break statement or return from the function body using return.

// Traversing an array 
        var arr = [3,2,3,9,5];
         arr.forEach(function(value,arr){
            console.log(value);
         })

for … in cycle

Basic syntax format:

for (var variable in array name or collection name)
{
Array name [variable]
}

The index of the array or collection stored in the variable.

 // Traversing an array 
        var arr = [1,2,3,4,5];
        for(var i in arr){
            console.log(arr[i]);
        }

// Traversing objects 
        var obj={
            x0:10,
            x1:20,
            x2:30
        }
        for(var k in obj){
            console.log(obj[k]);
        }

1. The subscript value may be of type string (String)

2. The loop will not only iterate through the array elements, but also any other custom-added attributes, such as obj, which contains custom attributes, obj. name, and this name attribute will also appear in this loop

3. In some cases, the above code loops through arrays in random order

The for-in loop was originally designed to be used by objects with a string value of key. Instead of arrays.

for … of cycle

Basic syntax format:

for (var variable of array name or collection name)
{
console. log (variable);
}

Variables hold elements in an array or collection.

 // Traversing an array 
         var arr = [3,2,3,9,5];
         for(var value of arr){
            console.log(value);
         }

// Traversing objects 
        var obj={
            x0:10,
            x1:20,
            x2:30
        }
        for(var k of Object.entries(obj)){
            console.log(k);
        }

The entries () method returns an iterative object of an array that contains the key-value pairs of the array (key/value).

The index value of the array in the iteration object is called key, and the array element is called value.

1. Avoid the traps of all for-in loops

2. Unlike forEach (), you can use break, continue, and return

3. The for-of loop supports more than just array traversal. It also applies to many array-like objects

4. It also supports string traversal

5. for-of does not work with native objects

Summarize

1. 'for... in' is used to iterate over all'enumerable 'properties of an object, including inherited enumerable properties. This iteration statement can be used for array strings or ordinary objects, but not for Map or Set objects

2. 'for... of' is used for'iterative 'objects that iterate over their values rather than their properties. This iteration statement can be used with an array, string Map, or Set object 1, but not with a normal object 1.