JS中的迭代器、可迭代对象、生成器

news2025/2/26 2:57:00

迭代器

迭代器(iterator),是使用户在容器对象(container,例如链表或数组)上可以遍历访问的对象,使用该接口无需关心容器对象的内部实现细节。 

从上面定义上来看,迭代器是帮助我们对某个数据结构进行遍历的对象

迭代器本身也是一个具体的对象,只不过这个对象需要符合迭代器协议,通俗的讲就是该对象必须含有个next方法,next方法返回一个拥有done(boolean)和value(一个具体的值或undefined)两个属性的对象。迭代结束done为true,否则为false

创建迭代器 

下面我们写一个创建数组迭代器的方法 

function createArrayIterator(arr) {
  let index = 0
  return {
    next() {
      if(index < arr.length) {
        return { done: false, value: arr[index++] }
      } else {
        return { done: true, value: undefined }
      }
    }
  }
}

let nums = [1,2,3]
let names = ['小明', '小红', '小芳']

let numsIterator = createArrayIterator(nums)
console.log(numsIterator.next()) // { done: false, value: 1 }
console.log(numsIterator.next()) // { done: false, value: 2 } 
console.log(numsIterator.next()) // { done: false, value: 3 } 
console.log(numsIterator.next()) // { done: true, value: undefined }
let namesIterator = createArrayIterator(names)
console.log(namesIterator.next()) // { done: false, value: '小明' } 
console.log(namesIterator.next()) // { done: false, value: '小红' }  
console.log(namesIterator.next()) // { done: false, value: '小芳' } 
console.log(namesIterator.next()) // { done: true, value: undefined }

将一个非可迭代对象 转化为 可迭代对象 

在这之前,我们可以提前考虑一下,为什么for of可以遍历数组而不能遍历对象,就是因为数组本身是有迭代器的,而对象则没有 

 

 

从上面两个示例应该就能明白了,对象中没有 iterable 迭代器,因为不可for of 遍历 

如果我们也想将一个非可迭代对象 转化为 可迭代对象 只需要在其中增加 Symbol.iterator 方法即可如下:

let info = {
  name: 'wft',
  age: 18,
  height: 1.88,
  // 增加 Symbol.iterator 方法 转为一个可迭代对象
  [Symbol.iterator]() {
    let values = Object.values(this)
    let index = 0
    let iterator = {
      next() {
        if(index < values.length) {
          return { done: false, value: values[index++] }
        } else {
          return { done: true, value: undefined }
        }
      }
    }
    return iterator
  }
}

let infoIterator = info[Symbol.iterator]()
console.log(infoIterator.next()) // { done: false, value: 'wft' }
console.log(infoIterator.next()) // { done: false, value: 18 }
console.log(infoIterator.next()) // { done: false, value: 1.88 } 
console.log(infoIterator.next()) // { done: true, value: undefined }

for(let item of info) {
  console.log(item)
}
//wft
//18
//1.88

注意:一定是 [Symbol.iterator] 规定好的,不可修改

arguements也是一个可迭代对象 

是不是迭代对象就看有没有迭代器即可 

function foo() {
  console.log(arguments)
  for(let item of arguments) {
    console.log(item)
  }
}

foo(1,2,3)

生成器 

生成器函数:

  • function 后面会跟上符号 *
  • 代码的执行可以被yield控制(类似于断点)
  • 生成器函数默认在执行时,返回一个生成器对象(并不会执行函数内部的代码)
  •  要想执行函数内部的代码,需要生成器对象调用它的next方法操作
  • 当调用next,执行内部函数代码时,当遇到yield时,就会中断执行

调用生成器函数,将返回生成器对象,但是并不会执行函数内部的代码,生成器对象中也有个next方法,调用next方法才会去执行方法内部的代码,遇到yield将终止执行 。示例如下:

// 生成器函数
function * fn() {
  console.log(111)
  yield
  console.log(222)
  yield
  console.log(333)
}

// 调用生成器函数,返回生成器对象
// 注意:并没有执行fn中的代码
const generator = fn()

// 生成器也有一个 next 方法,调用next方法,将执行 fn 内部的代码,遇到 yield 将终止执行
generator.next() // 111
generator.next() // 222
generator.next() // 333

yield 叫产出,可以产出数据,也就是在 yield 后面跟上数据,那么它将会作为next方法的返回值,示例如下:

// 生成器函数
function * fn() {
  // 第一次调用next方法,会执行这的代码...
  yield '哈哈哈'
  // 第二次调用next方法,会执行这的代码...
  yield {name: 'wft', age: 18}
  // 第三次次调用next方法,会执行这的代码...
}

const generator = fn()

console.log(generator.next()) // { value: '哈哈哈', done: false }
console.log(generator.next()) // { value: { name: 'wft', age: 18 }, done: false }

我们调用next方法的时候,也是可以传递参数的,那么这个参数就作为yield的返回值返回,示例如下: 

// 生成器函数
function * fn() {
  let num1 = yield '哈哈哈'
  console.log(num1, 'num1') // 注意这里得调用第二次next方法的时候才会执行  ---  结果:123
  let num2 = yield {name: 'wft', age: 18}
  console.log(num2, 'num2') // 同样这里得调用第三次next方法的时候才会执行  ---  结果:456
}

const generator = fn()

console.log(generator.next()) // { value: '哈哈哈', done: false }
console.log(generator.next(123)) // { value: { name: 'wft', age: 18 }, done: false }
console.log(generator.next(456)) // { value: undefined, done: true }

使用生成器代替上面的迭代器 

function * createArrayGenerator(arr) {
  // 方式一:
  for(let i = 0; i < arr.length; i++) {
    yield arr[i]
  }

  // // 方式二:yield语法糖写法 等同于方式一
  // yield * arr
}

let nums = [1,2,3]

// nums生成器对象
let numsGenerator = createArrayGenerator(nums)

console.log(numsGenerator.next()) // { value: 1, done: false }
console.log(numsGenerator.next()) // { value: 2, done: false }
console.log(numsGenerator.next()) // { value: 3, done: false }
console.log(numsGenerator.next()) // { value: undefined, done: true }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/9957.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SpringMVC 源码学习 返回值处理

SpringMVC中对返回值的数据基本分为两类&#xff1a; 1、响应数据 2、响应页面 一、响应数据 响应数据大多数都是将返回值的格式转换为JSON格式然后展示在页面或者保存i起来。 第一步&#xff1a;在SpringBoot中需要引入json场景 <dependency><groupId>org.sprin…

如何设计存储架构

步骤 步骤1&#xff1a;估算性能需求 任务 基于具体的业务场景来估算性能需求&#xff0c;包括存储量、读写性能等 挑战 不知道如何估算担心估算不准 步骤2&#xff1a;选择存储系统 任务 根据技术储备、方案优缺点选择合适的存储系统 挑战 不知道有哪些存储系统知道…

UG NX二次开发(C#)-UI Styler-批量选择点

1、前言 在设计UG NX的对话框界面时,有时需要选择点,在UI Styler编辑器中已经设置好了可以指定点选择按钮,这个点选择对话框是单选,不是多选的,如果想选择多个点,那么可以采用对象选择按钮,本文介绍下选择点的操作。 2、指定点按钮 2.1 设计UI Styler UG NX的UI Sty…

vscode中Emmet语法的使用

每篇博文的浪漫主义 【镰仓旅拍|落日绝景 极致画质|沉浸式旅行 FX3】 https://www.bilibili.com/video/BV1jg411Y7vC/?share_sourcecopy_web&vd_source385ba0043075be7c24c4aeb4aaa73352 镰仓旅拍|落日绝景 极致画质|沉浸式旅行 FX31.1快速生成HTML结构语法 生成标签直接…

想要彻底卸载Mac应用程序,还得要用这些方法才行

Mac电脑如果有太多无用的应用程序&#xff0c;很有可能会拖垮Mac系统的运行速度。因此&#xff0c;卸载电脑中无用的软件是优化Mac系统运行速度的最佳方式之一。Mac删除应用程序特别简单&#xff0c;长点击应用点击x&#xff0c;或是直接将应用拖进废纸篓。但是有一些应用长按没…

Qt——(详细)“项目在Debug构建环境下能运行而在Release构建环境下不能运行”解决方案之一,以及 禁用(黄色)警告

系列文章目录 提示&#xff1a; 文章目录系列文章目录前言环境一、问题准备工作——为了在Release环境下可以进行断点调试分析二、解决1、根据需求&#xff0c;对函数类型进行更改2、根据需求&#xff0c;在函数内添加“return [int]”延伸——“禁用警告”消除 变量 的“黄色感…

现代修谱,如何看待支系单飞的现象?

族谱与支谱、房谱的区别 现代修谱&#xff0c;修的是什么谱&#xff0c;你知道吗&#xff1f;其实现代修谱的种类有很多种&#xff0c;有支谱、房谱、族谱、宗谱、统谱、通谱等等&#xff0c;而这些在生活中都被我们简称为家谱。 不过在现代修谱里&#xff0c;宗谱、统谱、通谱…

极智编程 | 谈谈 C++ 中容器 map 和 unordered_map 的区别

欢迎关注我的公众号 [极智视界]&#xff0c;获取我的更多笔记分享 大家好&#xff0c;我是极智视界&#xff0c;本文来 谈谈 C 中 map 和 unordered_map 的区别。 map 和 unordered_map 都可以看做是一种 key-value 的映射关系&#xff0c;unordered_map 可以理解为 无序版的ma…

C语言 数组

C语言 数组一、一维数组1. 数组的创建方式程序清单1程序清单22. 计算数组的元素的个数3. 数组在内存中的存储方式二、二维数组1. 二维数组的创建方式2. 计算二维数组的行和列3. 二维数组在内存中的存储方式三、数组名的含义总结数组名的应用场景数组名作为函数参数一、一维数组…

22.11.16打卡 mysql学习笔记

马上要考试了, 越到考试越想玩, 烦躁烦躁烦躁, 没学多少, 争取明天把mysql基础篇学完 DCL介绍 2022年11月16日 14:54 DCL主要用来处理数据库有哪些用户可以访问, 每个用户具有什么样的权限 用户管理 2022年11月16日 15:20 所有用户的数据都存放在系统数据库mysql中的user表…

Python是什么?要如何学习?

Python 是荷兰人 Guido van Rossum &#xff08;吉多范罗苏姆&#xff0c;中国程序员称其为“龟叔”&#xff09;在 1990 年初开发的一种解释型编程语言。 Python 的诞生是极具戏曲性的&#xff0c;据 Guido 自述记载&#xff0c;Python 语言是在圣诞节期间为了打发无聊的时间而…

基于全景相机的视觉里程计算法研究

一、视觉里程计 视觉里程计技术首先建立相机的成像模型&#xff0c;接着通过标定算法计算相机参数&#xff0c;最后建立相邻图像的关联并估计相机运动轨迹。 1.1相机在空间中运动的描述 描述相机在三维空间中的运动状态&#xff0c;即求解相机在空间中不同时刻下的位姿关系。相…

假冒网站引发多重安全风险 | 官方严正声明:切勿在非官方渠道购买或下载 Navicat 软件

Navicat 严正声明 近期&#xff0c;有关于 Navicat 假冒网站的事件&#xff0c;不法分子通过仿制官方网站&#xff0c;诱导用户下载盗版软件。Navicat 官方已正式向国内监管部门举报&#xff0c;提请将该不法网站下架。目前&#xff0c;监管部门已介入调查中。 我司呼吁广大用…

这次,听人大教授讲讲分布式数据库的多级一致性|TDSQL 关键技术突破

近年来&#xff0c;凭借高可扩展、高可用等技术特性&#xff0c;分布式数据库正在成为金融行业数字化转型的重要支撑。分布式数据库如何在不同的金融级应用场景下&#xff0c;在确保数据一致性的前提下&#xff0c;同时保障系统的高性能和高可扩展性&#xff0c;是分布式数据库…

C语言之详解内存操作函数

个人主页&#xff1a;平行线也会相交 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 平行线也会相交 原创 收录于专栏【C/C】 目录前言memcpy模拟实现memmove模拟实现memcmpmemset前言 memcpy叫做内存拷贝&#xff0c;memmove叫做内存移动&#xff0c;memc…

【数据结构】模拟实现双向链表

你必须非常努力&#xff0c;才能显得毫不费劲 目录 1.模拟实现双向链表 1.1 DLinkedList的内部类 1.2 DLinkedList的成员属性 1.3 DLinkedList的成员方法 1.3.1 在链表开头插入一个新结点 1.3.2 在链表结尾插入一个新的结点 1.3.3 计算结点个数 1.3.4 在链表任意位置…

4.构造器,this,修饰符详解

构造器&#xff1a; 构造器也叫构造方法&#xff0c;无返回值。非构造方法必须要有返回类型 主要作用&#xff1a;完成对象的初始化&#xff0c;创造对象时&#xff0c;自动调用构造器初始化对象 即使没有显示地使用static关键字&#xff0c;构造器实际上也是静态方法 JAVA…

HTML---基础入门知识详解

1&#xff1a;标签的概念 在别人写的网页中我们会看到许多文字&#xff0c;图片排版整齐&#xff0c;让人看的赏心悦目&#xff0c;这就是用到了标签&#xff0c;或者说标签就是帮我们实现某种作用的工具&#xff0c;比如制作段落&#xff0c;换行&#xff0c;导入图片&#x…

Android App 导出APK安装包以及制作App图标讲解及实战(图文解释 简单易懂)

操作有问题请点赞关注收藏后评论区留言~~~ 一、导出APK安装包 之前在运行App的时候&#xff0c;都是先由数据线连接手机和电脑&#xff0c;再通过Android Studio的Run菜单把App安装到手机上&#xff0c;这种方式只能在自己手机上调试应用&#xff0c;如果想在别人手机上安装应…

Python画爱心——谁能拒绝用代码敲出会跳动的爱心呢~

还不快把这份浪漫拿走&#xff01;&#xff01;节日就快到来了&#xff0c;给Ta一个惊喜吧~ 今天给大家分享一个浪漫小技巧&#xff0c;利用Python中的 HTML 制作一个立体会动的心动小爱心 成千上百个爱心汇成一个大爱心&#xff0c;从里到外形成一个立体状&#xff0c;给人视…