ES6 iterable类型

·  阅读 654

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
})
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改