JavaScript Traversal Object-Summarize a

Native JavaScript traversal 1, for loop traversal

1 Let array1 = [' A ', ' B ', ' C ']; 2 3  for (Let i = 0;i < array1.length;i++) {4   console.log (Array1[i]);  // a  b  5 }

2. JavaScript provides a foreach () map () Two ways to iterate over an array object

The foreach and map usages are similar, and can be traversed to each element of the array , and the parameters are consistent;

Array.foreach (function (value, index, array) {//value is the current element of the traversal, index is the current index, array is an operation  //do Something},thisarg)      //thisarg is the this value when the callback is executed

　　　　Different points:

The ForEach () method executes the supplied function once for each element of the array. always return undefined;

The map () method creates a new array with the result that each element in the array invokes a supplied function and returns the result. The return value is a new array;

Examples are as follows:

    var array1 = [1,2,3,4,5];    var x = Array1.foreach (function (value,index) {        console.log (value);   Can traverse to all array elements        return value + ten    });    Console.log (x);   Undefined    Anyway, always return undefined    var y = array1.map (function (value,index) {        console.log (value);   Can traverse to all array elements        return value + ten    });    Console.log (y);   [One, A, a.]   returns a new array

　　

For an array-like structure, you can first convert to arrays and then traverse

　　

Let divlist = Document.queryselectorall (' div ');   Divlist is not an array, but a nodelist//is converted and then traversed [].slice.call (divlist). ForEach (function (element,index) {  Element.classList.add (' Test ')}) Array.prototype.slice.call (divlist). ForEach (function (element,index) {  Element.classList.remove (' Test ')}) [... Divlist].foreach (function (element,index) {   //ES6 notation  / /do something})

3, for     In /For of

　　　　　for...inStatement to iterate through an enumerable property of an object in any order. For each different attribute, the statement is executed. For each iteration, the attribute name is assigned

　　　　　Add: Because the order of the iterations is dependent on the execution environment, the array traversal does not necessarily access the elements sequentially. So when iterating over the arrays that are important for the access order, use an integer index to for loop (or use Array.prototype.forEach() or for...of loop).

Let array2 = [' A ', ' B ', ' C ']let obj1 = {  name: ' Lei ', age  : ' + '}for (variable in  array2) {   //variable  For index  console.log (variable)   //0 1 2}for (variable in  obj1) {   //variable is the property name  Console.log ( Variable)   //name age}

　　

ES6 has added a Iterator mechanism to provide a unified access mechanism for different data structures. As long as the iterator data structure is deployed, you can use for of Complete the traversal operation (iterator: http://es6.ruanyifeng.com/#docs/iterator), and each iteration assigns the attribute value

The data structure of the native Iterator interface is as follows:

Array Map Set String TypedArray Function Arguments Object NodeList object

Let array2 = [' A ', ' B ', ' C ']let obj1 = {  name: ' Lei ', age  : ' + '}for (variable of  array2) {   //variable
     is value  console.log (variable)   //' A ', ' B ', ' C '}for (variable of  obj1) {  // Ordinary objects cannot be used this way   console.log (variable)   //Error: Main.js:11uncaught Typeerror:obj1[symbol.iterator] is not a function}

Let divlist = Document.queryselectorall (' div ');

for (element of divlist) {  //can traverse all div nodes

}

How do you let a normal object traverse with a for? http://es6.ruanyifeng.com/#docs/iterator A detailed description of the book!

In addition to the one assigned at the time of the iteration is the property name, one is the property value, the for in and for is different (MDN document: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/ Reference/statements/for...of)

The for...in loop iterates through all the enumerable properties of an object.

For...of will traverse the data structure with the iterator interface

for...initerates over each property name (on the current object and its prototype), andfor...of遍历（当前对象上的）每一个属性值

　　

Object.prototype.objCustom = function () {}; Array.prototype.arrCustom = function () {};let iterable = [3, 5, 7];iterable.foo = "Hello"; for (let me in iterable) {  C Onsole.log (i); Logs 0, 1, 2, "foo", "Arrcustom", "Objcustom"}for (Let I of iterable) {  console.log (i);//Logs 3, 5, 7}

　　　　

　　

JavaScript Traversal Object-Summarize a