js中迭代器

什么是迭代器? 看个例子

let arr: number[] = [1, 1, 2]

let obj = {
    'a': 1,
    "b": 2,
    "c": 4,
    "d": 6,
    "e": 5,
    "f": 6,
}

let str = '123'

用for of 分别遍历 arr obj 和 str

for (const i of arr) {
    console.log(arr[i]);

}

for (const i of obj) {
    console.log(i);
}

for (const i of str) {
    console.log(i);
}

在这里插入图片描述

在这里插入图片描述

发现obj没有"Symbol.iterator" 方法 打印原型看看 只有array和str才有
Symbol(Symbol.iterator) 本质上我们调用for of 就在调用Symbol.iterator所以obj才会出现错误提示

在这里插入图片描述

在看看Symbol.iterator中到底是什么 以数组为例

let iter = arr[Symbol.iterator]()
console.log(iter);

//调用next()方法
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())

这就是传说中的迭代器咯
在这里插入图片描述
手搓一个迭代器 以数组为例子

let arr: number[] = [1, 1, 2]

function myIterator(arr: any) {
    let index = 0
    return {
        next() {
            return { value: arr[index++], done: index > arr.length ? true : false }
        }
    }
}



let iter = myIterator(arr)
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());```

对象为什么没有迭代器? 对象的结构可能会很复杂,不知道从哪里遍历开始且是无序的 我们可以修改以上代码对对象的key或value值迭代

手写object迭代器


let obj = {
    'a': 1,
    "b": 2,
    "c": 4,
    "d": 6,
    "e": 5,
    "f": 6,
}
function myIterator(arr: any) {
    let index = 0
    return {
        next() {
            return { value: Object.values(arr)[index++], done: index > Object.values(arr).length ? true : false }
        }
    }
}



let iter = myIterator(obj)
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());

在这里插入图片描述

或者这样

let obj = {
    'a': 1,
    "b": 2,
    "c": 4,

    [Symbol.iterator]() {
        let index = 0
        let map = new Map()
        map.set('a', 1)
        map.set('b', 2)
        map.set('c', 4)
        return {
            next() {
                //使用map是让其变成一个有序array
                let mapEntries = [...map.entries()]
                
                return { value: mapEntries[index++], done: index > mapEntries.length ? true : false }
            }
        }
    }
}
let iter = obj[Symbol.iterator]()
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());

在这里插入图片描述
在这里插入图片描述

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
迭代器和生成器是 JavaScript 非常重要的概念,常在面试涉及。迭代器Iterator)是一种对象,它提供了一种顺序访问集合各个元素的方法,而不暴露集合的内部结构。生成器(Generator)是一种特殊类型的函数,可以暂停执行并返回间结果。 1. 迭代器Iterator): - 迭代器是一个拥有 `next()` 方法的对象。 - `next()` 方法返回一个包含 `value` 和 `done` 属性的对象。 - `value` 表示当前迭代到的元素的值。 - `done` 表示迭代是否已经结束。 以下是一个简单的示例,展示如何使用迭代器遍历数组: ```javascript const arr = [1, 2, 3]; const iterator = arr[Symbol.iterator](); console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: 2, done: false } console.log(iterator.next()); // { value: 3, done: false } console.log(iterator.next()); // { value: undefined, done: true } ``` 2. 生成器(Generator): - 生成器是一种特殊类型的函数,使用 `function*` 声明,内部可以使用 `yield` 关键字。 - `yield` 关键字用于暂停生成器函数的执行,并返回一个间结果。 - 每次调用生成器函数时,会返回一个迭代器对象,通过调用 `next()` 方法可以继续执行生成器函数。 以下是一个简单的示例,展示如何使用生成器函数生成斐波那契数列: ```javascript function* fibonacci() { let a = 0; let b = 1; while (true) { yield a; [a, b] = [b, a + b]; } } const fib = fibonacci(); console.log(fib.next().value); // 0 console.log(fib.next().value); // 1 console.log(fib.next().value); // 1 console.log(fib.next().value); // 2 ``` 希望以上概念和示例能够帮助你在面试更好地理解和回答相关问题!如果你有更多疑问,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值