ES6 iterable类型

ES6 iterable类型

iterable 是 ES6 标准引入的新类型，Array、Set 和 Map 都属于 iterable 类型

• Array：数组，有序的元素序列，用于在单个的变量中存储多个值
• Set：ES6 中新增的数据结构，类似于数组，区别在于 Set 没有索引，且成员的值都是唯一的，没有重复的值
• Map：ES6 中新增的数据结构，类似于对象，区别在于普通对象的 key 必须是字符串或者数字，而 Map 的 key 可以是任何数据类型

for…in 循环

iterable 类型引入原因：

• Array 可以使用下标遍历，而 Set，Map 不能使用下标遍历，因此 ES6 标准引入 iterable 类型来统一集合类型
• 使用 Array 类型的 for...in 循环，当添加额外的属性后，会出现意外效果，因此引入 iterable 类型的 for...of 循环来遍历

  var arr = ["a", "b", "c"]
  arr.name = "廊坊吴彦祖"
  for (var key in arr) {
      console.log(key)   //"0"  "1"  "2"  "name"
      console.log(arr[key])   //"a"  "b"  "c"  "廊坊吴彦祖"
  }
  

  for...in 循环由于历史遗留问题，它遍历的是对象的属性，一个 Array 数组实际上也是一个对象，它每个元素的索引被视为一个属性，所以例子中 arr 数组额外添加的 name 属性也会被 for…in 循环遍历出来，但是 arr 数组的 length 属性（数组长度）却没有包含 name

for…of 循环

for...of 循环修复了 for…in 循环的问题，它只循环集合本身的元素

var arr = ["a", "b", "c"]
arr.name = "廊坊吴彦祖"
for (var item of arr) {
    console.log(item)   //"a"  "b"  "c"
}

for…of 循环和 for…in 循环的区别

• for…of 适用遍历 Array、String、Arguments、Set、Map 等拥有可迭代能力的对象集合（拥有 Symbol.iterator 属性），但是不能遍历普通对象（普通对象没有 Symbol.iterator 属性）
  注：Symbol.iterator 为每一个对象定义了默认的迭代器，可以被 for…of 循环使用，这个迭代器通过自身的 next() 方法来实现逐步调用，每次调用时会返回一个对象，该对象包括 value（当前指向的值）和 done（是否已经迭代完成）两个属性，当 value 为 undefined，done 为 true 时表示迭代完成
• for…in 遍历的是集合的属性（包括额外添加的属性），for…of 遍历的是集合的元素（只遍历本身的元素）

forEach 方法

对于 iterable 类型的循环遍历更好的方式，是直接使用 iterable 内置的 forEach 方法，该方法接受一个回调函数，每次迭代都会自动调用该函数

• 参数：function(currentValue, currentIndex, aggregate)： 每次迭代都会自动调用的回调函数
  回调函数参数：
  • currentValue：必需，当前元素
  • currentIndex：可选，当前元素的索引
  • aggregate：可选，当前元素所属的集合

//数组
var arr = ["a", "b", "c"]
arr.forEach(function(value, index) {
    console.log(value)   //"a"  "b"  "c"
    console.log(index)   //"0"  "1"  "2"
})

//Set 
//Set没有索引，所以回调函数的前两个参数都是当前元素
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  1
    console.log(index)   //"a"  true
})