The new type of ES6 in JS iterable

1.1 iterable literal meaning: iterative, repeatable
iterableIs the new type introduced by the ES6 standard. and Array , Map and Set all belong to the iterable type
1.2 Why join a iterable type?

• Traversing the array can take the subscript loop, and traversing the map and set cannot use the subscript. The collection type is not uniform.
• For a loop of type array for...in , an unexpected effect occurs when additional attributes are added. So iterable a loop in the Unified collection type for...of

/*1. For ... in loop because of historical problems, it iterates over the object's property name. An array is actually an object, and the index of each element is treated as an attribute. 2. The for ... in loop will include name, but the length property of the array is not included. */varA = ['A','B','C'];a.name='Hello'; for(varXincha) {alert (x);//' 0 ', ' 1 ', ' 2 ', ' name '}

Methods of 1.3 iterable forEach()
It receives a function that automatically callbacks the function each time it is iterated

//ArrayvarA = ['A','B','C'];a.foreach (function (element, index, array) {//element: A value that points to the current element//Index: Point to Current index//array: Points to the array object itselfalert (element);});//Setvars =NewSet (['A','B','C']); S.foreach (function (element, sameelement,Set) {alert (element);});//Mapvarm =NewMap ([[1,'x'], [2,'y'], [3,'Z']]); M.foreach (function (value, key, map) {alert (value);});

Traversal Array can take the subscript loop, traverse Map and Set cannot use subscript. In order to unify collection types, the ES6 standard introduces new iterable types Array , Map and Set all of them belong to iterable types.

A iterable collection with a type can traverse through a new for ... of loop.

for ... ofThe loop is the new syntax introduced by ES6, please test whether your browser supports:

Iterate for ... of through the collection with the following usage:

varA = ['A','B','C'];vars =NewSet (['A','B','C']);varm =NewMap ([[1,'x'], [2,'y'], [3,'Z']]); for(varX of a) {//Traversal ArrayConsole.log (x);} for(varX of s) {//traversing setConsole.log (x);} for(varX of M) {//Traverse MapConsole.log (x[0] +'='+ x[1]);}

You may have questions about for ... of for ... in What is the difference between loops and loops?

for ... inThe loop is actually a property name of the object that is traversed because of historical problems. An Array array is actually an object, and its index of each element is treated as an attribute.

When we manually Array add extra attributes to an object, the for ... in loop brings unexpected unintended effects:

var a = ['a'B'C '  'Hello';  for (var in a) {    //  ' 0 ', ' 1 ', ' 2 ', ' Name '}

for ... inLoops will be name included, but Array the length attributes are not included.

for ... ofLoops completely fix these problems by looping only the elements of the collection itself:

var a = ['a'B'C '  'Hello';  for (var  X of a) {    //  ' A ', ' B ', ' C '}

This is why you should introduce a new for ... of loop.

However, a better approach is to use the built-in iterable forEach method directly, which receives a function that automatically callbacks the function each time it iterates. Take Array for example:

Note that the forEach() method is introduced by the ES5.1 standard and you need to test whether the browser supports it.

SetArraysimilar but Set no index, so the first two parameters of the callback function are the elements themselves:

var New Set (['A''B' 'C' set){    console.log (element);});  

MapThe callback function parameters are sequentially value , key and map themselves:

var New Map ([[1'x'], [2'y'], [3  'z']); M.foreach (function (value, key, map) {    Console.log (value);}); 

If you are not interested in certain parameters, they can be ignored because JavaScript function calls do not require parameters to be consistent. For example, you only need to obtain Array element :

var a = ['a'B'C ' ];a.foreach (function (Element) {    Console.log (element);});

The new type of ES6 in JS iterable