JavaScript common basis traversal issue

What is traversed

Traversal: Popular, that is, each element of the array access time from beginning to end, and each element or elements to meet the conditions of certain operations (similar to our students every morning roll call, while allowing so and so who shop and go to some whats the matter).

Today we are speaking about traversal issue-based

Generally, we come to the following types of data on the basis of learning js Central Standing Committee
array / String / Object

The first for loop using

The easiest and most clear, is the largest amount of code, that is, by every for loop through the array of index

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arr[i]); 
}
//red green blue

The second is For in

For in
the array
for (var i in arr) I is the index

var arr = ['red','green', 'blue']
for(index in arr){
	console.log(index)
}
//0 1 2

However, in the subject for (var i in obj) where subscript i is a key name (string)

var obj = {name:xiaoming,age:18}
for(item in obj){
	console.log(item)
}
//name age

Combination of the above two examples, analysis results:
for ... in loop return value is a data structure of the key name.
Traversing the object key value returned object, returns through the array of the array index (key).
for ... in loop can be traversed only numeric keys, other keys will traverse the values and manually add the prototype.
Under special circumstances, for ... in loop iterates through the key name in any order
sum up by saying: for in the cycle is particularly suitable traverse the object.
for ... in a pseudo unable to traverse the array

The following are obtained Dom js objects used for artificial array traversal results in printed

The second is a new method For ... of ES6

for (var v of arr) v is the attribute value
for of not traverse the object
for of features
for of loop used to acquire a value of one key-value pair, the key is acquired for in the name of
a data structure just deployed Symbol .iterator property, it is considered to have iterator interfaces, can be used for of loop.
Objects, no Symbol.iterator this property, it will be reported to use for of not Iterable IS obj
for of different and forEach, it may break, continue, and return with the use, that is to say for of loop can exit the loop at any time.
Provided traversing a unified interface for all data structures
can not traverse the pseudo-array
Here is js acquisition of Dom objects pseudo array using the for of the results of traversing print out

depth sum up: as long as the data structure iterator interface, can be used for of circulation.
There are several common the following
array Array
the Map Structure
Set structure
String
arguments The subject
Nodelist object is to get the list set dom

Sometimes we want the object can be used for of circulation how to do?
You can use Object.keys () Gets the value of the collection of key objects, and then cycle through the use of for of operation

The fourth map

.map (fun ()) is mapped 'traverse' return value
parameter map function to all members of the array method of successively passed, then the results of every return to form a new array. You can not traverse the pseudo-array

var numbers = [1, 2, 3];
var res = numbers.map(function (n) {
  return n + 1;
});
res// [2, 3, 4]
numbers
// [1, 2, 3]

The above code, all members of an array of numbers in order to perform the function parameters, the results form a new array is returned, there is no change in the original array. .
The method accepts a map as a function parameter. When the function call, map method to pass it three parameters: current members of the current position and the array itself.

[1, 2, 3].map(function(value, index, arr) {
  return value* index;
});
// [0, 2, 6]

In the above code, the callback function map method has three parameters, value is the value of the current members, index for the current position of a member, of the original array ARR ([1, 2, 3])

Fifth forEach

.forEach () Return value None traversal

forEach method and map method is very similar, but also in order to perform a function parameter for all members of the array. However, forEach method does not return a value, only the data for the operation.
That is, if the array traversed in order to get the return value, then use the map method, otherwise use the forEach method.
forEach method consistent with the usage map, the parameter is a function that accepts the same three parameters: the current value, the current position, the entire array.

function log(value, index, array) {
  console.log('[' + index + '] = ' + value);
}
[2, 5, 9].forEach(log);
// [0] = 2	
// [1] = 5
// [2] = 9

Note , forEach method of execution can not be interrupted, all members will always traversed. If you want to meet certain conditions, interrupted traverse, to be used for recycling.

arr.forEach(function(value, index, arr) {
            if (arr[index] === 2) return;
            console.log(arr[index]);
        })
        //1 3

var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
  if (arr[i] === 2) break;
  console.log(arr[i]);
}
//1

Note forEach can iterate though it is best not to use artificial array forEach to iterate pseudo-array

The final summary of
all deployed data format interator interface can be used for of to traverse
for the emergence of, in order to unify the way traversal
traversal true array for (var I in arr) \ for (var v in arr) \ for loop \ the while loop \ Map method \ forEach method of
object traversing manner for (var I in obj) Object.keys ()
traversal of the array is preferably used for the dummy loop