一、迭代器介绍
迭代器（iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署iterator接口，就可以完成遍历操作。
- ES6创造了一种新的遍历命令for...of循环，iterator接口主要供for...of使用
- 【ES6之迭代器（iterator）】原生具备iterator接口的数据（可用for of遍历）
- Array
- Arrguments
- Set
- Map
- String
- TypedArray
- NodeList
- 原理
(1) 创建一个指针对象，指向当前数据结构的起始位置
(2) 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
(3) 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
(4) 每调用next方法返回一个包含value和done属性的对象
const rng = ['letme', 'mlxg', 'xiaohu', 'uzi', 'ming'];
let iterator = rng[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
三、实例
// 声明一个对象
const newRng = {
name: "皇族",
member: [
'letme',
'mlxg',
'uzi',
'ming',
],
[Symbol.iterator]() {
let index = 0
let that = this;
return {
next: function () {
if (index < that.member.length) {
const result = {
value: that.member[index],
done: false
}
index++;
return result
} else {
return {
value: undefined,
done: true
}
}
}
}
}
}// 遍历此对象
for (let v of newRng) {
console.log(v);
}
// 结果
// letme
// mlxg
// uzi
// ming推荐阅读
- JavaScript的防抖与节流
- JavaScript|js实现支付页面的倒计时
- JavaScript案例|【javaScript案例】之支付10秒倒计时
- DOM|js实现放大镜效果(图片放大)—JavaScript
- 你不知道的那些字符串方法~
- 手写防抖和节流函数
- 数据库|服务器项目部署（一）
- javascript|一个超级简单的浮动Select
- 高级前端工程之路|《代码规范》如何写出干净的代码（二）函数与方法