ES6初步了解迭代器

简介: ES6初步了解迭代器

迭代器是什么?

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

ES6创造了一种新的遍历方法for…of循环,iterator 接口主要供 for…of 使用

原生中具备 iterator 接口的数据(可用 for of 遍历)

Array 、Arguments 、Set 、Map 、 String 、TypedArray 、 NodeList

// 声明一个数组
    const arr = [1,2,3,4,5]
    // 使用for...of
    for(let v of arr) {
        console.log(v) //1 2 3 4 5
    }
    console.log(arr)

工作原理:

1.创建一个指针对象,指向当前数据结构的起始位置

const arr = [1,2,3,4,5]
    let iterator = arr[Symbol.iterator]()
    console.log(iterator)

2.第一次调用对象的 next 方法,指针自动指向数据结构的第一个成员

const arr = [1,2,3,4,5]
    let iterator = arr[Symbol.iterator]()
    // 调用对象的next方法
    console.log(iterator.next())

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

const arr = [1,2,3,4,5]
    let iterator = arr[Symbol.iterator]()
    // 调用对象的next方法
    console.log(iterator.next())
    console.log(iterator.next())
    console.log(iterator.next())
    console.log(iterator.next())
    console.log(iterator.next())
    console.log(iterator.next())

4.每调用 next 方法返回一个包含 value 和 done属性对象

返回value与done

那我们什么时候需要用到迭代器呢?

当我们需要自定义遍历数据的时候,要用到迭代器

// 声明一个对象
    const obj = {
        name:"张三",
        age:18,
        schoolmate:["李四","王五","赵六"]
    }
    // 使用for...of遍历对象
    for(let v of obj) {
        console.log(v) //报错 obj is not iterable
    }

我们发现我们for…of遍历不了对象,那我们就是想用for…of遍历对象怎么办

我们想取到对象里数组的每一个值

// 声明一个对象
    const obj = {
        name:"张三",
        age:18,
        schoolmate:["李四","王五","赵六"],
        // 添加方法
        [Symbol.iterator](){
            // 索引变量
            let index = 0
            // 存一个this
            let _this = this
            // 返回一个对象
            return {
                // next方法
                next:function(){
                    if(index<_this.schoolmate.length){
                        // 需要控制,要不然一直为false一直执行
                        const result = {value:_this.schoolmate[index],done:false}
                        // 下标自增
                        index++
                        // 返回结果
                        return result
                    }else {
                        // // 如果我index大于等于了这个长度
                        return {value:undefined,done:true}
                    }
                    
                }
            }
        }
    }
    // 使用for...of遍历对象
    for(let v of obj) {
        console.log(v) //李四 王五 赵六
    }

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

相关文章
|
2月前
|
JavaScript
ES6之迭代器
ES6之迭代器
|
4月前
|
JavaScript 前端开发
ES6之迭代器(Iterator)
ES6引入了迭代器的概念,这个特性为JavaScript带来了更强大的迭代和异步编程能力。本文将深入探讨ES6的迭代器,介绍其概念、用法以及在实际开发中的应用。 迭代器(Iterator)是ES6引入的一种新的数据结构,它提供了一种统一的遍历机制,可以用来遍历各种不同类型的数据。迭代器的概念、作用和遍历原理如下所述:
28 0
|
6月前
ES6常见的数组方法
ES6常见的数组方法
26 1
|
JavaScript 前端开发
ES6——迭代器
迭代器(iterator):是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署lterator接口,就可以完成遍历操作。
65 0
|
数据库
ES6 从入门到精通 # 14:迭代器 Iterator 的用法
ES6 从入门到精通 # 14:迭代器 Iterator 的用法
63 0
ES6 从入门到精通 # 14:迭代器 Iterator 的用法
|
JavaScript 前端开发 Java
【扒一扒】深入理解 ES6 Iterator
本文主要来说下ES6的Iterator,目的在于理解它的概念、作用、以及现有的应用,最后学以致用。 Iterator可以说是ES6内相当重大的一个特性,也是很多其他特性运行的基石。 为什么Iterator地位如此之高呢?
70 0
【扒一扒】深入理解 ES6 Iterator
ES6中 Symbol 的基础学习,迭代器和生成器的基本用法
迭代器为所有数据结构提供了统一的访问机制。只要为数据结构部署了接口,就可以进行遍历操作。
108 0
|
JavaScript 前端开发