A comparison of traversal syntax in JS

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...inLoops 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...ofloops 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