1.1 iterable literal meaning: iterative, repeatable
iterable
Is 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 ... of
The 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 ... in
The 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 ... in
Loops will be name
included, but Array
the length
attributes are not included.
for ... of
Loops 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.
Set
Array
similar 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);});
Map
The 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