Iterable is a new type introduced by the ES6 standard. Array, Set, and Map are all iterable types

  • Array: an ordered sequence of elements used to store multiple values in a single variable
  • Set: A new data structure in ES6, similar to an array except that a Set has no index and the values of its members are unique
  • Map: A new data structure in ES6. It is similar to an object except that the key of a common object must be a string or a number, whereas the key of a Map can be any data type

for… In circulation

The iterable type was introduced for:
  • Arrays can be traversed with subscripts, whereas sets and maps cannot, so the ES6 standard introduces the iterable type to unify collection types
  • Use the Array typefor... inLoop, which can have unexpected effects when additional attributes are added, hence introducing the iterable typefor... ofLoop through 
    var arr = ["a"."b"."c"]
arr.name = Daniel Wu of Langfang
for (var key in arr) {
    console.log(key)   //"0" "1" "2" "name"
    console.log(arr[key])   //"a" "b" "C" "
}
Copy the code

    for... inAn Array Array is actually an object, and the index of each of its elements is treated as an attribute, so the name attribute added to the arR Array in the example is also called for… The in loop iterates, but the length property of the ARR array does not contain name

for… Of circulation

for… The of loop fixed for… The problem with the in loop, which loops only the elements of the collection itself

var arr = ["a"."b"."c"]
arr.name = Daniel Wu of Langfang
for (var item of arr) {
    console.log(item)   //"a" "b" "c"
}
Copy the code
for… Of loops and for… The difference between in loops
  • for… Iterator (Symbol. Iterator); iterator (Symbol. Iterator); iterator (Symbol. Iterator)Symbol.iteratorDefines a default iterator for each object, which can be used for… This iterator is called step by step through its next() method. Each call returns an object containing two attributes: value (the current point) and done (whether the iteration has been completed). When value is undefined, When done is true, the iteration is complete
  • for… In traverses the attributes of the collection (including additional attributes), for… Of traverses the elements of a set (only the elements themselves)

The forEach method

A better way to iterate over iterable types is to use Iterable’s built-in forEach method directly, which accepts a callback function that is automatically called with each iteration

  • Parameters: function(currentValue, currentIndex, Aggregate) : callback function that is automatically called for each iteration
    • CurrentValue: Required, current element
    • CurrentIndex: Optional, index of the current element
    • Aggregate: Optional, a collection of current elements
/ / array
var arr = ["a"."b"."c"]
arr.forEach(function(value, index) {
    console.log(value)   //"a" "b" "c"
    console.log(index)   //"0"  "1"  "2"
})

//Set 
//Set has no index, so the first two arguments to the callback function are the current element
var set = new Set(["a"."b"."c"])
set.forEach(function(value, index) {
    console.log(value)   //"a" "b" "c"
    console.log(index)   //"a" "b" "c"
})

//Map 
var map = new Map([["a".0], [true.1]])
map.forEach(function(value, index) {
    console.log(value)   / / 0 to 1
    console.log(index)   //"a" true
})
Copy the code