ES6新特性二：Iterator(遍历器)和for-of循环详解

2024-02-25 08:15:03 181

本文实例讲述了ES6新特性之Iterator(遍历器)和for-of循环。分享给大家供大家参考，具体如下：

1.遍历数组

for-of工作原理：迭代器有一个next方法，for循环会不断调用这个iterator.next方法来获取下一个值,直到返回值中的done属性为true的时候结束循环。

①在ES6之前

vararr=[1,2,3,4,5,6];
arr.name='a';
for(varindex=0;index
结果都是：1,2,3,4,5,6
②用for-in：作用于数组的forfor-in循环体除了遍历数组元素外,还会遍历自定义属性。比如数组有一个可枚举属性arr.a,循环将额外执行一次
for(varindexinarr){//千万别这样做
console.log(arr[index]);
}


结果：1,2,3,4,5,6，a
for-in是为普通对象设计的，赋值给index的值不是实际的数字1、2，而是字符串‘1'，‘2'
varb=0;
for(varindexinarr){
b=b+index;
console.log(b)
}


结果：00，001，0012，00123，001234，0012345，0012345name
③使用for-of：避开了for-in的所有缺陷，可以正确响应break、return语句
for(varvalueofarr){
console.log(value)
}


结果：1,2,3,4,5,6
2.for-of循环便利其他集合
①遍历Set
varwords='a';
vars=newSet();
s.add("a");
s.add(1);
for(varwordofs){
console.log(word);
}


结果：a，1
②遍历Map
varmap=newMap();
map.set('a',1);
map.set('b',2);
map.set('c',3);
map.set('d',4);
for(var[key,value]ofmap){
console.log(key+':'+value);
}


结果：a：1，b：2，c：3，d：4
3.Iterator（遍历器）
①遍历器（Iterator）是一种接口规格，任何对象只要部署这个接口，就可以完成遍历操作。它的作用有两个，一是为各种数据结构，提供一个统一的、简便的接口，二是使得对象的属性能够按某种次序排列。
②遍历器的原理：遍历器提供了一个指针，指向当前对象的某个属性，使用next方法，就可以将指针移动到下一个属性。next方法返回一个包含value和done两个属性的对象。其中，value属性是当前遍历位置的值，done属性是一个布尔值，表示遍历是否结束。
//模拟遍历器原理
functionmakeIterator(array){
varnextIndex=0;
return{
next:function(){
returnnextIndex
③Iterator接口返回的遍历器，原生具备next方法。
>有三类数据结构原生具备Iterator接口：数组、类似数组的对象、Set和Map结构。
varmap=newMap();
console.log(map[Symbol.iterator]===map.entries)//true
vararr=newArray();
console.log(arr[Symbol.iterator]===arr.values)//true
varset=newSet();
console.log(set[Symbol.iterator]===set.values)//true


>其他数据结构（主要是对象）如果需要Iterator接口,都需要自己部署。
varstudents={}
students[Symbol.iterator]=function(){
letindex=1;
return{
next(){
return{done:index>10,value:index++}
}
}
}
for(variofstudents){
console.log(i);
}//


希望本文所述对大家ECMAScript程序设计有所帮助。

ES6新特性二：Iterator(遍历器)和for-of循环详解

热门推荐

随机推荐