Iterator接口 笔记

Iterator 的作用有三个：
一是为各种数据结构，提供一个统一的、简便的访问接口；
二是使得数据结构的成员能够按某种次序排列；
三是 ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费。

const obj = {
  [Symbol.iterator]: function () {
    return {
      next: function () {
        return {
          value: 1,
          done: true
        }
      }
    }
  }
}

console.log(obj)

const iterator = obj[Symbol.iterator]()

console.log(iterator)

console.log(iterator.next())

console.log(iterator.next())

for (let k of obj) {
  console.log(k)
}

image.png

Codepen: https://codepen.io/MonguDykrai/pen/oQVWmQ

原生具备 Iterator 接口的数据结构如下

• Array
• Map
• Set
• String
• TypedArray
• 函数的 arguments 对象
• NodeList 对象

Array

const arr = [1, 2, 3]

console.log(arr)

image.png

Codepen: https://codepen.io/MonguDykrai/pen/BGbZQL

Map

const map = new Map()
const o = {a: 1}

map.set(o, 'content')
console.log(map.get(o))

console.log(map)

image.png

Codepen: https://codepen.io/MonguDykrai/pen/JezJNz
http://es6.ruanyifeng.com/#docs/set-map#Map

Set

const set = new Set([1, 2, 3])

console.log(set)

image.png

Codepen: https://codepen.io/MonguDykrai/pen/aQMwKx
http://es6.ruanyifeng.com/#docs/set-map#Set

String

const str = new String('abc')

console.log(str)

image.png

Codepen: https://codepen.io/MonguDykrai/pen/WYmOpj

TypedArray

const typedArray = new Int8Array(3)

console.log(typedArray)

image.png

Codepen: https://codepen.io/MonguDykrai/pen/JezJKw

函数的 arguments 对象

function fn() {
  console.dir(arguments)
}

fn(1, 2, 3, 4)

image.png

Codepen: https://codepen.io/MonguDykrai/pen/JezJmg

NodeList 对象

<p>1</p>
<p>2</p>

<script>
const ps = document.querySelectorAll('p')

console.log(ps)
</script>

image.png

Codepen: https://codepen.io/MonguDykrai/pen/rQRwPP

指针对象（ 遍历器对象 ）

image.png

Codepen: https://codepen.io/MonguDykrai/pen/NEJzqV

const arr = [1, 2, 3]

const it = arr[Symbol.iterator]()

console.log(`console.log(it)`)
console.log(it)

image.png

image.png

Codepen: https://codepen.io/MonguDykrai/pen/aQMKjE

Error

Uncaught TypeError: Result of the Symbol.iterator method is not an object

const obj = {
  [Symbol.iterator]: function () {}
}

for (let k of obj) {
  console.log(k)
}

image.png

Codepen: https://codepen.io/MonguDykrai/pen/wQOxZq

Uncaught TypeError: undefined is not a function （ 找不到 next 方法 ）

const obj = {
  [Symbol.iterator]: function () {
    return {}
  }
}

for (let k of obj) {
  console.log(k)
}

image.png

Codepen: https://codepen.io/MonguDykrai/pen/gQEjVm

undefined

const obj = {
  [Symbol.iterator]: function () {
    return {
      next: function () {
        return {}
      }
    }
  }
}

for (let k of obj) {
  console.log(k)
  break
}

不写 break 语句的话，会无限循环。

image.png

Codepen: https://codepen.io/MonguDykrai/pen/QJoVLr

let index = 0

const obj = {
  [Symbol.iterator]: function () {
    return {
      next: function () {
        if (index < 4) {
          console.log('执行了')
          index++
          return {
            value: 1,
            // done: false
          }
        } else {
          return {
            // value: undefined,
            done: true
          }
        }
      }
    }
  }
}

for (let k of obj) {
  console.log(k)
  // break
}

image.png

Codepen: https://codepen.io/MonguDykrai/pen/rQRZQV

for...of 循环结束的条件 next 的返回值包含 done: true

for_of遍历结束的条件done_true1.gif

Codepen: https://codepen.io/MonguDykrai/pen/rQRZQV

参考资料：
http://es6.ruanyifeng.com/#docs/iterator