理解es6迭代器

什么是迭代器？

在软件开发领域, '迭代'的意思是按照顺序反复多次执行一段程序，通常会有明确的终止条件、->摘自《javascript高级程序设计第四版》

• 在js中，计数循环就是一种最简单的迭代

for(let i=0;i< 10; i++){
        console.log(i)
}

哪些实现了迭代器接口？

• 字符串
• 数组
• 映射
• 集合
• arguments 对象
• NodeList 等Dom集合类型

let str = 'abc'
let arr = ['a', 'b', 'c']
let map = new Map().set('a', 1).set('b','2').set('c', 3)
let set = new Set().add('a').add('b').add('c')
let nodeList = document.querySelectorAll('div')
//工厂函数返回的迭代器
console.log(str[Symbol.iterator]()) //StringIterator {}
console.log(arr[Symbol.iterator]())//ArrayIterator {}
console.log(map[Symbol.iterator]())//MapIterator {}
//...
//...

在实际写代码过程中，不需要显示调用这个工厂函数来生成迭代器。会自动兼容接收可迭代对象。 例如，for..of, 数据结构，扩展操作符，Array.from(),Set、Map构造函数。。。

利用iterator遍历

demo1

let arr = ['a', 'b', 'c']
//迭代器
const iter =  arr[Symbol.iterator]()
//执行迭代
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())

• 结果

我们可以看到，当done为true的时候，说明已经迭代结束了

demo2

迭代器是独立的,不同迭代器之间没有关系

let arr = ['a', 'b']
const iter1 =  arr[Symbol.iterator]()
const iter2 =  arr[Symbol.iterator]()
console.log(iter1.next())
console.log(iter2.next())
console.log(iter1.next())
console.log(iter2.next()) 

demo3

实现多种类型的数据进行遍历

//实现多种对象类型遍历
const str = '123',
  arr = [1,2,3],
  map = new Map().set('a', 1).set('b', 2).set('c', 3)
  set = new Set().add(1).add(2).add(3)
  nodeList = document.querySelectorAll('div')
  
const traverse = data => {
  const iter = data[Symbol.iterator]()
  let flagDone = false
  //除了while,递归也可以实现
  while(!flagDone){
    const {value, done} = iter.next()
    flagDone = done
    if(!done){
      console.log(value)
    }
  }
  console.log('----')
}

traverse(str)
traverse(arr)
traverse(map)
traverse(set)
traverse(nodeList)

• 结果