The JavaScript learning notes 8:for-in traversal, ES6 for-of traversal, and the foreach () method of the object can be iterated __java

Review for-in Traversal

In JS, for-in traverses the key of an iterative object, which requires special attention:

"Use Strcit";
var x=[' LZ ', ' h ', ' is ', ' a SB ']; The array object is an iterative for
(let I in x) {
    console.log (i);

Output

0
1
2
3

Inconvenient Place

If you want to get its value, you need to query the value of this key again:

"Use Strcit";
var x=[' LZ ', ' h ', ' is ', ' a SB ']; The array object is an iterative for
(let I in x) {
    console.log (x[i]);//i is a key, and X[i is the value of I in X
}

Output

LZ
H
is
a SB

This approach is obviously somewhat inefficient and semantically not intuitive, and I want to iterate over just the elements of the array, why use key. problems with trying to traverse set

If you try this way to traverse set, the previous set can be thought of as storing only key-value pairs, but not getting anything:

"Use Strcit";
var x=new Set ([' LZ ', ' h ', ' is ', ' a SB ']); The set object is an iterative for
(let I in x) {
    console.log (i);//If I is the key of object, attempt to access key to traverse set
}

Output (Nothing)

I think this may reflect the unordered nature of set, which is not going to traverse it anyway. problems with trying to traverse map

The map bottom is based on the tree, and its key is probably unordered, unable to traverse:

"Use Strcit";
var x=new Map ([[6, ' LZ '],[7, ' h '],[7.5, ' is '],[9.2, ' a SB ']]); The Map object is an iterative for
(let I in x) {
    console.log (i);//If I is the key of object, attempt to access key to traverse each key of the map
}

Output (Nothing)

for-of Traversal for Set

FOR-OF traversal is the value in the collection that is traversed for set:

"Use Strcit";
var x=new Set ([' LZ ', ' h ', ' is ', ' a SB ']);
For (Let I of x) {
    console.log (i);
}

Output

LZ
H
is
a SB

for map

FOR-OF traversal is the array of key-value pairs traversed for the map:

"Use Strcit";
var x=new Map ([[6, ' LZ '],[7, ' h '],[7.5, ' is '],[9.2, ' a SB ']]);
For (Let I of x) {
    console.log (i);
}

Output

Array [6, "LZ"]
array [7, "H"] array [
7.5, "is"] array [
9.2, "a SB"]

for Array

The for-of traversal for Arrayt is the value of each of its elements:

"Use Strcit";
var x=new Array (' LZ ', ' h ', ' is ', ' a SB ');
For (Let I of x) {
    console.log (i);
}

Output

LZ
H
is
a SB

There are some differences differences when working with object objects

For-of is the ES6 standard, which existed prior to this For-in object also as an iterator, traversing the names of the objects ' properties and methods:

"Use Strcit";
Added 4 properties to this object 2 methods
var ok={
    sb1: ' LZ ',
    SB2: ' H ', SB3: ' Is
    ',
    sb4: ' A sb ',
    myfun1: function (x,y) {return
        x+y;
    },
    myfun2:function (x,y) {return
        x-y;}   
};
For (let I in OK) {
    console.log (i);
}

Output

SB1
sb2
sb3
sb4
myfun1
myfun2

The ES6 standard does not consider object objects to be iterative, only map,set,array, so you cannot traverse them with for-of:

"Use Strcit";
Object
var ok={
    sb1: ' LZ ',
    SB2: ' H ',
    sb3: ' is ',
    sb4: ' A sb ',
    myfun1:function (x,y) { return
        x+y;
    },
    myfun2:function (x,y) {return
        x-y;
    }   
};
For (Let I of OK) {
    console.log (i);//attempt to traverse by for-of
}

Output (Error)

Typeerror:ok is not iterable

differences when adding members to an Iteration object

From the for-in point of view, the map and set traversal, object is composed of individual member variables and member methods, and For-in also think that object can be iterated, adding members can traverse is taken for granted.

So the difference when adding members is just to see the array object.

When you add a member to an array object, for-in the member and the other subscript as the key to traverse to:

"Use Strcit";
var ok=["Lzh", "is", "rubbish", "SB", "Big SB Dog"];
Ok.name= "Sblzh"; Add a member variable to this array object
//Add a member method to this array object
ok.myfun=function (x,y) {return
    x+y;
};
Attempt to traverse with for-in for
(Let I-OK) {
    console.log (ok[i]);
}

Output

LZH
is
rubbish
sb big
SB dog
sblzh
function Ok.myfun ()

Now, if only for-in, the array object that was added to the member becomes very difficult to use.

and for-of will correctly distinguish between members and their contents:

"Use Strcit";
var ok=["Lzh", "is", "rubbish", "SB", "Big SB Dog"];
Ok.name= "Sblzh"; Add a member variable to this array object
//Add a member method to this array object
ok.myfun=function (x,y) {return
    x+y;
};
Attempt to traverse with for-of for
(let I of OK) {
    console.log (i);//Note that there is no need for ok[i], just use one I
}

Output

LZH
is
rubbish
sb big
SB Dog

the foreach () method of an iterative object

The Foreach method receives a function as a parameter, so the function passed in is called the callback callback function .

In each iteration, the function is passed some arguments to call it once, and of course the name of the formal parameter is arbitrary and legitimate. With this foreach () method you can write the traversal + doing things very succinctly.

For object objects, ES6 has made it clear that it is not an iterative object, and that object objects naturally do not have a foreach () method. the foreach () method that belongs to the array object

"Use Strcit";
var ok=["Lzh", "is", "rubbish", "SB", "Big SB Dog"];
var Control=false; Used to control only the first time the output object itself
Ok.foreach (
    //Incoming three parameters are (current element values, current subscript, this array)
    function (Now_element,now_index, Thisarray) {
        //The third parameter is the same each iteration, output only once look at the good
        if (control===false) {
            control=true;
            Console.log ("This array is" +thisarray);
            Console.log (the type of the 3rd argument is "+typeof thisarray");
        }
        Console.log ("ok[" +now_index+ "]=" +now_element);
    }
);

Output

This array is Lzh,is,rubbish,sb,big SB dog
The type of the 3rd argument is Object
ok[0]=lzh
ok[1]=is
ok[2]=rubbish
ok[3]= SB
Ok[4]=big SB Dog

the foreach () method that belongs to the Set object

Note that the first two parameters used newsletters in the Set object are exactly the same.

"Use Strcit";
var ok=new Set (["Lzh", "is", "rubbish", "SB", "Big SB Dog"]);
var Control=false; Used to control only the first time the output object itself
Ok.foreach (
    ///pass in three parameters are (current element values, current element values, this set)///
    after all, set as a set does not involve subscript (unordered), The first two parameters that come in are element value
    function (now_element,now_elem,thisset) {
        //The third parameter is the same every iteration, output only once look at it.
        if (control=== False) {
            control=true;
            Console.log ("This set is" +thisset);
            Console.log (the type of the 3rd argument is "+typeof thisset");
        }
        Console.log ("1th parameter =" +now_element);
        Console.log ("2nd parameter =" +now_elem);
    }
);

Output

This set is the type of the 3rd parameter [object Set]
is the object
1th parameter =lzh
2nd parameter =lzh
1th parameter =is
2nd parameter =is 1th parameter
=rubbish
2nd parameter =rubbish
1th parameter =SB
2nd parameter =sb
1th parameter =big SB dog
2nd parameter =big SB Dog

the foreach () method belonging to the map object

"Use Strcit";
var ok=new Map ([[7, "Lzh"],[8.5, "is"],[' 666 a ', "rubbish"],[-30, "SB"],[250, "big SB Dog"]);
var Control=false; Used to control only the first time the output object itself
Ok.foreach (
    ///pass in three parameters are (current value, current key, this map)
    function (Now_value,now_key, THISMAP) {
        //The third parameter is the same each iteration, output only once look at the good
        if (control===false) {
            control=true;
            Console.log ("This set is" +thismap);
            Console.log (the type of the 3rd argument is "+typeof thismap");
        }
        Console.log ("ok[" +now_key+ "]=" +now_value);
    }
);

Output

This set is the
type of argument 3rd of [object Map] is the object
ok[7]=lzh
ok[8.5]=is
ok[666]=rubbish
OK[-30]=SB
Ok[250]=big SB Dog