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
})
原文始发于微信公众号(前端24):ES6 iterable类型
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/217049.html