For loop
JavaScript provides a variety of traversal syntax. The most primitive way of writing is for
looping.
Let arr = [1,2,3,4,5]; for (var index = 0; index < arr.length; index++) { //1 2 3 4 5}
Disadvantage: This kind of writing is more troublesome
Foreach
Arrays provide built-in forEach
methods
Let arr = [1,2,3,4,5+ = { //1 2 3 4 5});
Cons: The problem with this notation is that you can't jump out of a forEach
loop, and break
commands or return
commands don't work.
For...in
The for...in is used to iterate through all the enumerable properties of an object, and functions like Object.keys ().
Let obj = { ' cloud ', ' 157xxxx2065 ' for in obj} { //Name phone}
There may be friends who ask, what are non-enumerable objects? For example constructor, the length of an array is a non-enumerable property.
Let arr = [ten, 1, 0, "2" ' 3 "4 '}
Disadvantages:
- The key name of the array is a number, but the
for...in
loop is the string as the key name "0", "1", "2" and so on.
for...in
Loops are primarily designed for traversing objects, not for iterating over arrays
For...of
For...of is the new traversal method of ES6, which provides a unified traversal mechanism. All objects that implement the [Symbol.iterator] interface can be traversed. for...of
loops can be used with arrays, Set and MAP structures, some array-like objects (such as arguments
objects, DOM NodeList objects), Generator objects, and string
Advantages:
- With
for...in
the same concise syntax, but without for...in
those shortcomings
- Different for
forEach
methods, which can be break
used with, continue
and return
with
- Provides a unified operating interface for traversing all data structures
Here is an example of using the break statement to jump out for...of
of a loop.
for (var N of Fibonacci) { if (n >) break; Console.log (n);}
The above example outputs an item with a Fibonacci sequence that is less than or equal to 1000. If the current item is greater than 1000, the statement is used to jump out of the break
for...of
loop.
For...of getting an index
entries()
Returns a Walker object that is used to traverse [键名, 键值]
the composed array. For arrays, the key name is the index value, and for Set, the key name is the same as the key value. The Iterator interface of the MAP structure, by default, is the calling entries
method.
keys()
Returns a Walker object that is used to traverse all key names.
values()
Returns a Walker object that is used to traverse all the key values.
// DemoLet arr = [' A ', ' B ', ' C ']; for (Let pair of arr.entries ()) { console.log (pair);} // [0, ' a '] // [1, ' B '] // [2, ' C ']
An array-like object
An array-like object consists of several classes. The following are for...of
examples of loops used for strings, DOM NodeList objects, and arguments
objects.
//stringLet str = "Hello"; for(let S of str) {Console.log (s);//h e l l o}//DOM NodeList ObjectLet paras = Document.queryselectorall ("P"); for(let P of paras) {P.classlist.add ("Test");}//arguments ObjectfunctionPrintargs () { for(Let x of arguments) {console.log (x); }}printargs (' A ', ' B ');//' A '//' B '
Not all array-like objects have Iterator interfaces, and a simple workaround is to use Array.from
methods to convert them to arrays.
Let Arraylike = {length:2, 0: ' A ', 1: ' B ' }; // Error for (Let X of Arraylike) { console.log (x);} // correct for (Let X of Array.from (Arraylike)) { console.log (x); //' a '//' B '}
Normal Object
For ordinary objects, the for...of
structure can not be used directly, will be error, you must deploy the Iterator interface to use.
Let Es6 = { 6, "TC39", "ECMA-262"}; for inch es6) { console.log (e);} // Edition // Committee // Standard for (let E of Es6) { console.log (e);} // typeerror:es6 is not iterable
The workaround is to use the Object.keys
method to generate an array of the object's key names and then iterate through the array.
for (var Key of Object.keys (Someobject)) { + ': ' + Someobject[key]);}
A comparison of traversal syntax in JS