编程 js迭代器

2024-11-19 07:49:47 +0800 CST views 447

迭代器(一)

目录

  1. 简介
  2. 自定义一个简单迭代器

简介

迭代器是一个对象,它定义了一个序列,并在终止时附带一个返回值。迭代器的作用是为不同的数据结构提供统一的遍历访问机制,使数据结构中的元素能够按顺序依次被遍历(如 for...of 语法)。

任何实现了 next() 方法并符合迭代器协议的对象都可以称为迭代器。next() 方法返回一个对象,该对象包含两个属性:

  • value: 迭代序列的下一个值;
  • done: 一个布尔值,表示是否已迭代到序列的最后一个值。

当迭代器被创建后,可以通过调用 .next() 显式地迭代。最后一次 .next() 调用返回 done: true,表明迭代结束。


自定义一个简单迭代器

以下代码实现了一个从 startend 的计数迭代器,最终返回值为 end

const testIterator = (start = 1, end = 5) => {
  let count = start - 1;
  const result = {
    next() {
      if (count < end) {
        count++;
        return { value: count, done: count === end };
      } else {
        return { value: count, done: true };
      }
    }
  };
  return result;
};

const customItertor = testIterator();
for (const index of Array(7)) {
  console.log(customItertor.next());
}

输出

{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: 4, done: false }
{ value: 5, done: true }
{ value: 5, done: true }
{ value: 5, done: true }

迭代器(二)

目录

  1. 遍历原理解析
  2. 将原生对象改造为可迭代对象

遍历原理解析

迭代器为不同的数据结构提供了统一的访问机制,只要数据结构具备 iterator 接口,便可使用 for...of 遍历其所有成员。

例如,ArrayMapSetString 等都可以使用 for...of 遍历:

const arr = [1, 2, 3, 4, 5];
for (const item of arr) {
  console.log('item:', item);
}

输出

item: 1
item: 2
item: 3
item: 4
item: 5

通过 Symbol.iterator,可以看到数组内部已经实现了 iterator,保证了数组按序遍历。for...of 实际是通过迭代器的 next() 方法来逐步移动指针,依次输出每个元素,直到遍历完成。


将原生对象改造为可迭代对象

原生对象并不支持 for...of 遍历。我们可以通过实现 iterator 接口,将不可遍历的对象改造为可遍历对象。

const obj = {
  key1: 'value-1',
  key2: 'value-2',
  key3: 'value-3'
};

for (const value of obj) {
  console.log('value:', value);
}

输出(不支持遍历):

TypeError: obj is not iterable

改造为可迭代对象

通过自定义 Symbol.iterator,将对象改造成可遍历对象:

const obj = {
  key1: 'value-1',
  key2: 'value-2',
  key3: 'value-3',
  [Symbol.iterator]: function() {
    const self = this;
    const keys = Object.keys(self);
    let curKeyIndex = -1;

    const result = {
      next() {
        if (curKeyIndex < keys.length - 1) {
          curKeyIndex++;
          return { value: self[keys[curKeyIndex]], done: false };
        }
        return { value: undefined, done: true };
      }
    };

    return result;
  }
};

for (const value of obj) {
  console.log('value:', value);
}

输出

value: value-1
value: value-2
value: value-3

注意:Symbol.iterator 是一个预定义的 Symbol 类型值,用于定义默认的迭代行为。


复制全文 生成海报 JavaScript 编程 数据结构

推荐文章

Requests库详细介绍
2024-11-18 05:53:37 +0800 CST
Python 获取网络时间和本地时间
2024-11-18 21:53:35 +0800 CST
Go 如何做好缓存
2024-11-18 13:33:37 +0800 CST
JavaScript 流程控制
2024-11-19 05:14:38 +0800 CST
mendeley2 一个Python管理文献的库
2024-11-19 02:56:20 +0800 CST
Java环境中使用Elasticsearch
2024-11-18 22:46:32 +0800 CST
php微信文章推广管理系统
2024-11-19 00:50:36 +0800 CST
20个超实用的CSS动画库
2024-11-18 07:23:12 +0800 CST
Vue3中如何进行错误处理?
2024-11-18 05:17:47 +0800 CST
php常用的正则表达式
2024-11-19 03:48:35 +0800 CST
windon安装beego框架记录
2024-11-19 09:55:33 +0800 CST
一键压缩图片代码
2024-11-19 00:41:25 +0800 CST
Rust 中的所有权机制
2024-11-18 20:54:50 +0800 CST
IP地址获取函数
2024-11-19 00:03:29 +0800 CST
底部导航栏
2024-11-19 01:12:32 +0800 CST
使用 Git 制作升级包
2024-11-19 02:19:48 +0800 CST
总结出30个代码前端代码规范
2024-11-19 07:59:43 +0800 CST
设置mysql支持emoji表情
2024-11-17 04:59:45 +0800 CST
XSS攻击是什么?
2024-11-19 02:10:07 +0800 CST
为什么大厂也无法避免写出Bug?
2024-11-19 10:03:23 +0800 CST
支付页面html收银台
2025-03-06 14:59:20 +0800 CST
MySQL数据库的36条军规
2024-11-18 16:46:25 +0800 CST
程序员茄子在线接单