ES6新特性之迭代器及其应用

迭代器介绍

迭代器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署Iterator接口，就可以完成遍历操作。

1. ES6创造了一种新的遍历命令for..of循环，Iterator接口主要供for...of消费

   // 声明一个数组
   const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧']
   
   // 使用for...of遍历数组
   for(let v of xiyou) {
       console.log(v)
   }
   

2. 原生具备Iterator接口的数据（可用for...of遍历）

   a) Array

   b) Arguments

   c) Set

   d) Map

   e) String

   f) TypedArray

   g) NodeList

3. 工作原理

   a) 创建一个指针对象，指向当前数据结构的起始位置

   b) 第一次调用对象的next方法，指针自动指向数据结构的第一个成员

   c) 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员

   d) 每次调用next方法返回一个包含value和done属性的对象

   const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧']
   
   let iterator = xiyou[Symbol.iterator]();
   
   console.log(iterator.next())	// {value: "唐僧", done: false}
   console.log(iterator.next())	// {value: "孙悟空", done: false}
   console.log(iterator.next())	// {value: "猪八戒", done: false}
   console.log(iterator.next())	// {value: "沙僧", done: false}
   console.log(iterator.next())	// {value: undefined, done: true}
   

迭代器的应用

迭代器可用来自定义遍历数据

const banji = {
    name: "终结一班",
    stus: [
        'xiaoming',
        'xiaoning',
        'xiaotian',
        'knight'
    ],
    [Symbol.iterator]() {
        // 索引变量
        let index = 0
        let _this = this
        // console.log(_this)	// 指向banji这个对象
        return {
            next: function () {
                // console.log(this)	// 指向{next: f}这个对象，即[Symbol.iterator]()的返回结果
                if (index < _this.stus.length) {
                    const result = { value: _this.stus[index], done: false }
                    // 下表自增
                    index++
                    // 返回结果
                    return result
                }
                return { value: undefined, done: true }
            }
        }
    }
}

for (const iterator of banji) {
    console.log(iterator)
}

最后

以上就是兴奋电源为你收集整理的ES6新特性之迭代器及其应用的全部内容，希望文章能够帮你解决ES6新特性之迭代器及其应用所遇到的程序开发问题。

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