带你读《现代Javascript高级教程》十五、Iterator 迭代器:简化集合遍历的利器(2)

简介: 带你读《现代Javascript高级教程》十五、Iterator 迭代器:简化集合遍历的利器(2)

带你读《现代Javascript高级教程》十五、Iterator 迭代器:简化集合遍历的利器(1)https://developer.aliyun.com/article/1349587?groupCode=tech_library


4 Set 遍历

使用迭代器可以遍历 Set 对象的所有元素。通过调用 Set 对象的 values() 方法,可以获取一个迭代器对象,然后使用迭代器的 next 方法逐个访问 Set 的元素。

 

 

示例代码:

 

const set = new Set([1, 2, 3, 4, 5]);const iterator = set.values();
let result = iterator.next();while (!result.done) {
  console.log(result.value);
  result = iterator.next();}

4. 自定义迭代器

除了使用内置数据结构提供的迭代器之外,我们还可以自定义迭代器来遍历自定义数据结构。要实现一个自定义迭代器,我们需要定义一个具有 next 方法的对象,并且该对象的 next 方法需要返回一个包含 value 和 done 属性的对象。

 

示例代码:

 

const myIterable = {
  data: [1, 2, 3, 4, 5],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      },
    };
  },};
for (const item of myIterable) {
  console.log(item);}

 

在上面的示例中,我们定义了一个自定义数据结构 myIterable,它包含一个数组 data 和一个自定义的迭代器对象。迭代器对象的 next 方法会依次返回数组中的元素,并在遍历结束时返回 { value: undefined, done: true }。

  1. 结论

迭代器是 JavaScript 中一种强大且灵活的机制,它提供了一种统一的方式来遍历集合中的元素。通过使用迭代器,我们可以轻松地遍历数组、对象、Map、Set 等各种数据结构,并进行相应的操作。迭代器的应用场景非常广泛,它使我们能够以一种简洁而优雅的方式处理数据集合。熟练掌握迭代器的使用方法对于编写高效和可维护的代码非常重要。

  1. 参考资料
  • MDN Web Docs - Iteration protocolsopen in new window
  • Understanding Iterators and Iterables in JavaScriptopen in new window
  • JavaScript Iterators and Generators: Asynchronous Iteration

 

相关文章
|
4月前
|
JavaScript 前端开发 索引
js遍历的方法与区别
js遍历的方法与区别
69 3
|
1月前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
32 2
2024年5月node.js安装(winmac系统)保姆级教程
|
2月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
48 4
|
3月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
40 4
|
3月前
|
JavaScript 索引
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-数组的遍历
关于JavaScript数组遍历基础知识的文章。
43 2
JavaScript基础知识-数组的遍历
|
2月前
|
JavaScript
js之遍历方法
js之遍历方法
14 0
|
2月前
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
54 0
|
4月前
|
JavaScript NoSQL 前端开发
|
4月前
|
JavaScript 前端开发
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
这篇文章介绍了JavaScript中的数组、Date对象、Math对象以及包装类(String、Number、Boolean),并详细讲解了数组的创建、方法(如forEach、push、pop、unshift、slice、splice)和遍历操作,以及工厂方法创建对象和原型对象的概念。
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象