es6 迭代器iterator

迭代

for…in… VS for…of…

我们一般理解的就是
for...in...用来循环遍历数组或对象的属性key值
for...of...用来循环了遍历数组或对象的属性值
看例子：

var eles = document.querySelectorAll('*')
console.log(eles)

我们分别使用这两个迭代对象来遍历一遍

问题

是不是总是这样呢？我们新建一个对象再来试一下

var obj = {
  left: 100,
  right: 200
}
console.log(obj)

当我们使用for...of...循环这个对象时，报错了，说obj不可迭代

可迭代

对比上述两个案例的对象，当对象有可迭代属性时候，才能对其进行迭代，也就是才可以执行for...of...这类方法，这个迭代方法就是

这个迭代属性是用Symbol定义的，不可被外部访问

作用

具备iterator接口的数据结构都可以进行

• 解构赋值
• 扩展运算符（...运算符）

let str = 'hello'
let arrStr = [...str]
console.log(arrStr) // ['h', 'e', 'l', 'l', 'o'] 字符串有iterator接口的数据结构

自定义迭代器

那我们可以将上述的非迭代对象obj自己手动给写成迭代对象么？
其实就是给它定义一个Symbol(Symbol.iterator)方法，使其变成可迭代对象
我们先来一个初步的

var obj = {
  left: 100,
  right: 200
}
obj[Symbol.iterator] = function() {
  let a = 0
  return {
    next: function() {
      a++
      if(a < 3) {
        return {
          value: a,
          done: false
        }
      } else {
        return {
          value: '',
          done: true
        }
      }
    }
  }
}
for(let attr of obj) {
  console.log(attr) // 1 2
}

下面我们迭代对象的属性

var obj = {
  left: 100,
  right: 200
}
obj[Symbol.iterator] = function() {
  let keys = Object.keys(obj)
  let len = keys.length
  let n = 0
  return {
    next: function() {
      if(n < len) {
        return {
          value: keys[n++], // obj[keys[n++]]迭代出属性的值 100 200
          done: false
        }
      } else {
        return {
          done: true
        }
      }
    }
  }
}
for(let attr of obj) {
  console.log(attr) // left right
}

由此可见：迭代器可以让我们自己定义就是为了方便我们可以根据不同的业务定义我们自己的迭代器方法。