JavaScript
发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了ES6新特性二：Iterator(遍历器)和for-of循环详解，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实例讲述了ES6新特性之Iterator(遍历器)和for-of循环。分享给大家供大家参考，具体如下：
1. 遍历数组
for-of工作原理：迭代器有一个next方法，for循环会不断调用这个iterator.next方法来获取下一个值,直到返回值中的 done属性为true的时候结束循环。
① 在ES6之前
6];
arr.name = 'a';
for (var index = 0; index < arr.length; index++)
{
console.log(arr[index]
);
}
arr.forEach(function (
value) { //ES5 内建的forEach方法 缺陷：
无法使用break 中断 ，也不能使用return 语句返回到外层函数
console.log(
value);
}
);
结果都是：1,6
② 用 for-in ：作用于数组的 forfor -in 循环体除了遍历数组元素外,还会遍历自定义属性。比如数组有一个可枚举属性arr.a,循环将额外执行一次
{ // 千万别这样做
console.log(arr[index]
);
}
结果：1,6，a
for-in 是为普通对象设计的，赋值给index的值不是实际的数字1、2，而是字符串‘1'，‘2'
{
b = b+ index;
console.log(b)
}
结果：00，001，0012，00123，001234，0012345，0012345name
③ 使用 for-of：避开了for-in 的所有缺陷，可以正确响应 break、return 语句
结果：1,6
2.for-of 循环便利其他集合
① 遍历Set
);
s.add("a"
);
s.add
(1);
for(var word of s)
{
console.log(word
);
}
结果：a，1
② 遍历Map
);
map.set('a',1
);
map.set('b',2
);
map.set('c',3
);
map.set('d',4
);
for(var [key,value] of ma
p){
console.log(key+':'+
value);
}
结果：a：1，b：2，c：3，d：4
3. Iterator（遍历器）
① 遍历器（Iterator）是一种接口规格，任何对象只要部署这个接口，就可以完成遍历操作。它的作用有两个，一是为各种数据结构，提供一个统一的、简便的接口，二是使得对象的属性能够按某种次序排列。
② 遍历器的原理：遍历器提供了一个指针，指向当前对象的某个属性，使用Next方法，就可以将指针移动到下一个属性。next方法返回一个包含value和done两个属性的对象。其中，value属性是当前遍历位置的值，done属性是一个布尔值，表示遍历是否结束。
{
var nex
Tindex = 0;
return
{
next: function()
{
return nex
Tindex < array.length ?
{value: arra
Y[nex
Tindex++],done:
fals
E} :
{value: undefined,done: tru
E};
}
}
}
var it = makeIterator(['a','b']
);
console.log(it.next()
);//
{ value: 'a',done:
false }
console.log(it.next()
);//
{ value: 'b',done:
false }
console.log(it.next()
);//
{ value: undefined,done: true }
③ Iterator接口返回的遍历器，原生具备next方法。
> 有三类数据结构原生具备Iterator接口：数组、类似数组的对象、Set和Map结构。
);
console.log(map[S
ymbo
l.iterator] === map.entries)//true
var arr = new Array(
);
console.log(arr[S
ymbo
l.iterator] === arr.values)//true
var set = new Set(
);
console.log(set[S
ymbo
l.iterator] === set.values)//true
> 其他数据结构（主要是对象）如果需要Iterator接口,都需要自己部署。
10,value: index++}
}
}
}
for(var i of
students)
{
console.log(i
);
}//
希望本文所述对大家ECMAScript程序设计有所帮助。
大佬总结
以上是大佬教程为你收集整理的ES6新特性二：Iterator(遍历器)和for-of循环详解全部内容，希望文章能够帮你解决ES6新特性二：Iterator(遍历器)和for-of循环详解所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
