ES6中引入了迭代器与可迭代对象的概念,并且提供了对可迭代对象的相关支持,如for...of循环,Map(iterable)构造器,展开语法...等。让我们对数组外的数据集合的遍历操作也得到极大简化
可迭代对象(Iterable object)
数组是一个特殊的对象,它和普通对象的区别不仅仅在于元素的顺序访问、存储。另外一个重要的区别是:数组是可迭代的,也就是可以使用for ... of
语句访问(迭代)所有的元素。
普通对象使用for ... of
语句 会报错
let arr = [1,2,3,4,5]
for(let val of arr) {
console.log(val) // 1 2 3 4 5
}
let obj = {
name:'Kite',
age:23,
}
for(let key of obj) { // obj is not iterable
console.log(key)
}
扩展运算符
// es5 apply
function consoleLog() {
console.log(...arguments)
}
console.log(consoleLog.apply(null, array))
// es6 扩展预算符
const array = [1, 2, 3, 4]
console.log(...array); // 1,2,3,4
const obj = {
name: 'kite',
age: 23,
}
console.log(...obj); // TypeError: Found non-callable @@iterator
Symbol.iterator
如果我们希望一个对象可以迭代,必须为对象添加一个名为Symbol.iterator
的方法(一个专门使对象可迭代的内建Symbol
)
- 当使用
for ... of
循环迭代对象时,就会调用Symbol.iterator
方法,这个方法必须返回一个迭代器(一个有next()
方法的对象)。 - 得到迭代器后,
for ... of
会不断的调用迭代器的next()
方法获得下一个元素 next()
方法返回的内容必须符合格式:{done:Boolean,value:any}
,当done:true
时,循环结束,否则value
就是下一个值。
迭代器:
迭代器是借鉴C++
等语言的概念,迭代器的原理就像指针一样,它指向数据集合中的某个元素,你可以获取它指向的元素,也可以移动它以获取其它元素。迭代器类似于数组中下标的拓展,各种数据结构,如链表(List
)、集合(Set
)、映射(Map
)都有与之对应的迭代器。
JS
中的迭代器是专门为了遍历这一操作设计的。每次获取到的迭代器总是初始指向第一个元素,并且迭代器只有next()
一种行为,直到获取到数据集的最后一个元素。我们无法灵活移动迭代器的位置,所以,迭代器的任务,是按某种次序遍历数据集中的元素。
实现一个可迭代对象:
let obj = {
name: 'Kite',
age:23,
[Symbol('id')]: 20000219
}
obj[Symbol.iterator] = function(){
//返回一个迭代器
return {
index: 0,
next: function () {
const keys = Reflect.ownKeys(obj);
if(this.index < keys.length - 1 ) {
const key = keys[this.index];
this.index++;
return { done:false,value:obj[key] }
} else {
return { done:true, value: undefined }//迭代结束
}
}
}
}
for(let value of obj){
console.log(value) // Kite 23 20000219
}
for(let key in obj){
console.log(key) // name age
}
可迭代对象的概念:
所谓可迭代对象,就是比普通对象多了一个名为Symbol.iterator
方法的普通对象,这个方法返回一个迭代器。或者,一个具备Symbol.iterator
同时具备next
方法的对象也是一个可迭代的对象。
扫描二维码关注公众号,回复:
15482579 查看本文章