ES2015 实现可迭代接口与迭代器模式

for…of 循环

在 ECMAScript 中遍历数据有很多中方法，首先是最基本的 for 循环，它比较适用于变量普通的数组，然后就是 for...in 循环，它比较适合于遍历键值对，再有就是一些对象的遍历方法，比如数组的 forEach() 方法。这些各种各样的遍历数据的方式都会有一定的局限性，所以 ECMAScript2015 借鉴了很多其他语言引入了一种全新的 for...of 循环，这种循环方式作为遍历所有数据结构的统一方式。换句话说，只要明白 for…of 内部工作的原理就可以使用这种循环去遍历任何一种自定义的数据结构。

在介绍原理之前，先来了解 for...of 的基本用法。如下代码所示：

const arr = [100, 200, 300, 400]

for (const item of arr) {
   
  console.log(item)
}

上述代码的运行结果如下：

100
200
300
400

和 for...in 循环不同的是 for...of 循环遍历数组时得到的是数组中每一个成员，而不是索引值。

for...of 这种循环还可以替代之前所使用的数组中的 forEach() 方法，因为相比于 forEach() 方法来说，for...of 循环允许使用 break 关键字随时终止循环。如下代码所示：

// forEach()方法
arr.forEach(item => {
   
  console.log(item)
})

// for...of循环
for (const item of arr) {
   
  console.log(item)
  if (item > 100) {
   
    break
  }
}

之前为了能够随时终止遍历，必须要使用数组中的 some() 方法或者 every() 方法。

除了数组可以被 for...of 循环直接遍历，一些伪数组对象也是可以使用 for...of 循环遍历的，比如函数中的 arguments 对象，或者 DOM 操作时一些节点列表，它们的遍历和普通的数组是没有任何区别的。

再有就是 ECMAScript2015 新增的 Set 和 Map 对象，也是可以使用 for...of 循环进行遍历的。首先来看 Set 的遍历，如下代码所示：

const s = new Set(['foo', 'bar', 'baz'])

for (const item of s) {
   
  console.log(item)
}

上述代码的运行结果如下：

foo
bar
baz

从打印的结果可以看到，遍历 Set 和遍历数组没有什么区别。然后再看 Map 的遍历，如下代码所示：

const m = new Map()
m.set('foo', '123')
m.set('bar', '456')

for (const item of m) {
   
  console.log(item)
}

上述代码的运行结

最后

以上就是忧心飞机为你收集整理的ES2015 实现可迭代接口与迭代器模式的全部内容，希望文章能够帮你解决ES2015 实现可迭代接口与迭代器模式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。