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], [true1]])
map.forEach(function(value, index{
    console.log(value)   //0  1
    console.log(index)   //"a"  true
})


原文始发于微信公众号(前端24):ES6 iterable类型

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/217049.html

(0)
李, 若俞的头像李, 若俞

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!