面试官:你可以用 for of 遍历 Object 吗?

本文以 用 for of遍历 Object 为引 来聊聊 迭代器模式

什么是迭代器模式

迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露该对象的内部表示。 ——《设计模式:可复用面向对象软件的基础》

可以说迭代器模式就是为了遍历存在的。提到遍历,大家都对那些手段耳熟能详了,下面我们先简单列一下各种数据类型的遍历:

遍历数组

  1. for 循环
  2. forEach
  3. map
  4. reduce
  5. keys
  6. values
  7. for of
  8. ......

其中keys values for of 需要Iterator支持,后面会介绍Iterator

遍历 Map/Set

  1. keys
  2. entries
  3. forEach
  4. ......

遍历 Object

  1. for in
  2. Object.keys(obj)得到对象每个属性的数组, 然后使用数组的遍历方法遍历每个 key,就能获取 每个 key 对应的 value

Iterator 和 for of

Iterator是ES6提出的一个接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。

Iterator 的作用

  1. 为各种数据结构,提供一个统一的、简便的访问接口。
  2. ES6提出了新的遍历命令for...of循环,Iterator 接口主要供for...of消费。

Iterator 的遍历过程

既然数组是支持for...of循环的,那数组肯定部署了 Iterator 接口,我们通过它来看看Iterator 的遍历过程。

 

从图中我们能看出:

  1. Iterator 接口返回了一个有next方法的对象。
  2. 每调用一次 next,依次返回了数组中的项,直到它指向数据结构的结束位置。
  3. 返回的结果是一个对象,对象中包含了当前值value 和 当前是否结束done

用 for of 遍历 Object

回到标题中的问题,我们现在如何去让一个对象也可以用 for of 来遍历它呢? 

 

根据上面讲到的内容,需要给对象也部署 Iterator 接口(其实就是在Object.prototype上实现一个以Symbol.iterator为名的function,这个function返回一个有next方法的对象,每调用一次 next, 能够依次返回数组中的项,直到它指向数据结构的结束位置 )

function objectIterator() {
  const keys = Object.keys(this)
  let index = 0
  return {
    next: () => {
      const done = index >= keys.length
      const value = done ? undefined : this[keys[index]]
      index++
      return {
        done,
        value
      }
    }
  }
}

Object.prototype[Symbol.iterator] = objectIterator

const obj = {
  key: '1',
  value: '2'
}

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

 

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HTML5 <body> 标签

HTML <body> 标签 实例 一个简单的 HTML 文档&#xff0c;包含尽可能少的必需的标签&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>文档标题</title> </head><body> 文档内容…

单例设计模式解读

目录 单例设计模式介绍 单例设计模式八种方式 饿汉式&#xff08;静态常量&#xff09; 饿汉式&#xff08;静态代码块&#xff09; 懒汉式(线程不安全) 懒汉式(线程安全&#xff0c;同步方法) 懒汉式(线程安全&#xff0c;同步代码块) 懒汉式(线程安全&#xff0c;同步…

libcurl库的安装及使用说明

目录 一 libcurl库安装 ① 下载网址 ② libcurl库安装步骤 ③ libcurl等第三方库的通用编译方法 二 调用libcurl编程访问百度主页 ① 代码说明 ② 编译说明 ③ 执行说明 三 libcurl的使用说明 ① curl相关函数简介 ② curl_easy_setopt函数部分选项介绍 ③…

【AUTOSAR】【Can通信】CanSM

目录 一、概述 二、限制说明 三、功能说明 3.1 基础需求 3.2 CAN网络的状态机 3.3 错误分类 3.3.1 开发错误 3.3.2 运行错误 3.3.3 拓展生产错误 3.4 ECU在线主动/被动模式 四、API接口 4.1 API定义 4.2 调度接口 一、概述 该文档描述了AUTOSAR基本软件模块CAN状态…

2023年第十四届蓝桥杯Java_大学B组真题

Java_B组试题 A: 阶乘求和试题 B: 幸运数字试题 C: 数组分割试题 D: 矩形总面积试题 E: 蜗牛试题 F: 合并区域试题 G: 买二赠一试题 H: 合并石子试题 I: 最大开支试题 J: 魔法阵【考生须知】 考试开始后&#xff0c;选手首先下载题目&#xff0c;并使用考场现场公布的解压密码解…

编译技术-词法理论

一、文法的种类 1.1 分类定义 Chomsky 文法定义&#xff1a; G(V,Vt,P,Z)G (V, V_t, P, Z)G(V,Vt​,P,Z)VVV&#xff1a;符号集合VtV_tVt​&#xff1a;终结符号集合PPP &#xff1a;有穷规则集合ZZZ&#xff1a;是被符号&#xff0c;不能是终结符 关于不同文法的区别 类型…

【多线程与高并发(锁)】1、锁的概念、分类和状态

1、锁的概念 java当中的锁、是在多线程环境下为保证共享资源健康、线程安全的一种手段。 线程操作某个共享资源之前&#xff0c;先对资源加一层锁&#xff0c;保证操作期间没有其他线程访问资源&#xff0c;当操作完成后&#xff0c;再释放锁。 2、锁的分类 Java中的锁按照…

ChatGPT对我们的影响-ChatGPT能给我们带来什么

ChatGPT日常应用 ChatGPT是一种应用广泛的自然语言处理算法&#xff0c;其可以应用于多种日常场景。以下是一些ChatGPT的日常应用&#xff1a; 聊天机器人&#xff1a;ChatGPT可用于构建聊天机器人&#xff0c;通过与用户进行自然语言交互来提供个性化的服务和支持。 新闻稿和…

MyBatis零基础入门实践

MyBatis一、MyBatis简介1、MyBatis历史2、MyBatis特性3、MyBatis下载4、和其它持久化层技术对比二、搭建MyBatis1、开发环境2、创建maven工程3、创建MyBatis的核心配置文件4、创建mapper接口5、创建MyBatis的映射文件6、通过junit测试功能7、加入log4j日志功能三、核心配置文件…

代码随想录算法训练营第五十天 | 123. 买卖股票的最佳时机 III、188. 买卖股票的最佳时机 IV

123. 买卖股票的最佳时机 III 关键在于至多买卖两次&#xff0c;这意味着可以买卖一次&#xff0c;可以买卖两次&#xff0c;也可以不买卖。 动规五部曲&#xff1a; 1、确定dp数组以及下标的含义 一天一共就有五个状态&#xff0c; 没有股票第一次持有股票第一次不持有股…

SPI协议

SPI协议 物理层 信号线 SCK(Serial Clock)&#xff1a;时钟线 MOSI(Master Output&#xff0c; Slave Input )&#xff1a;主设备输出&#xff0c;从设备输入 MISO(Master Input,&#xff0c; Slave Output)&#xff1a;主设备输入&#xff0c;从设备输出 SSN&#xff08;…

API 测试 | 了解 API 接口测试 | API 接口测试指南

什么是 API&#xff1f; API 是一个缩写&#xff0c;它代表了一个 pplication P AGC 软件覆盖整个房间。API 是用于构建软件应用程序的一组例程&#xff0c;协议和工具。API 指定一个软件程序应如何与其他软件程序进行交互。 例行程序&#xff1a;执行特定任务的程序。例程也…

Redux的基本使用详解(从入门到入土)

Redux的基本使用过程详解 学习文档 中文文档: http://www.redux.org.cn/ 英文文档: https://redux.js.org/ Github: https://github.com/reactjs/redux 一&#xff0c;redux是什么 1&#xff0c;介紹&#xff1a; redux是一个专门用于做状态管理的JS库(不是react插件库)。它…

程序员讨厌的“笔试题”,还有存在的必要性吗?

面试&#xff0c;是我们拿到offer的必经之地&#xff0c;在面试中我们会遇到各种“刁难”&#xff0c;而让程序员最为排斥的&#xff0c;非“笔试题”莫属。 △ 截图来源脉脉&#xff0c;如侵删 为什么程序员越来越排斥做面试题呢&#xff1f;我们先来看看网友们的说法&#x…

【Vue2从入门到精通】深入浅出,带你彻底搞懂Vue2组件通信的9种方式

文章目录Vue组件间通信分类1.props / $emit1.1 父组件向子组件传值1.2 子组件向父组件传值2.$parent / $children3.ref / $refs3.1 ref作用于组件3.2 ref作用于Html标签3.3 $nextTick()4.EventBus &#xff08;$emit / $on&#xff09;4.1 初始化4.2 发送事件4.3 接收事件4.4 移…

博客首页效果

学习来自风宇blog的博客首页效果 全部用的基本上都是原生的html&#xff0c;css&#xff0c;js特别是flex布局的使用&#xff0c;主轴方向可以是横轴&#xff0c;也可以是纵轴&#xff0c;弹性项还可可以使用百分比sticky粘性布局&#xff0c;作为侧边栏&#xff0c;它不会超出…

分享一个国内可用的免费ChatGPT网站

背景 ChatGPT作为一种基于人工智能技术的自然语言处理工具&#xff0c;近期的热度直接沸腾&#x1f30b;。 作为一个程序员&#xff0c;我也忍不住做了一个基于ChatGPT的网站&#xff0c;免费&#xff01;免登陆&#xff01;&#xff01;国内可直接对话ChatGPT&#xff0c;也…

c++类和对象

&#x1f646;&#x1f3fc;关注作者&#xff1a;玺子写代码 ✍️gitee&#xff1a;玺子写代码 目录&#x1f449;&#x1f3fb;类的定义&#x1f449;&#x1f3fd;类的两种定义方式&#x1f449;&#x1f3fc;类的访问限定符及封装&#x1f449;&#x1f3fd;访问限定符&…

ML@sklearn@ML流程Part3@AutomaticParameterSearches

文章目录Automatic parameter searchesdemomodel_selection::Hyper-parameter optimizersGridSearchCVegRandomizedSearchCVegNoteRandomForestRegressorMSEpipeline交叉验证&#x1f388;egL1L2正则Next stepsUser Guide vs TutorialAutomatic parameter searches Automatic p…

6 计时器(一)

计时器 6.1 TIM TIM简介 TIM&#xff08;Timer&#xff09;定时器 定时器可以对输入的时钟进行计数&#xff0c;并在计数值达到设定值时触发中断 16位计数器、预分频器、自动重装寄存器的时基单元&#xff0c;在72MHz计数时钟下可以实现最大59.65s的定时 不仅具备基本的定时中…
最新文章