返回顶部
首页 > 资讯 > 前端开发 > JavaScript >详解如何优雅迭代JavaScript字面对象
  • 204
分享到

详解如何优雅迭代JavaScript字面对象

2024-04-02 19:04:59 204人浏览 薄情痞子
摘要

目录为什么要实现自定义迭代器如何实现javascript字面量对象迭代实现方法解析为什么生成器函数要这样设计为什么要实现自定义迭代器 因为在JavaScript中字面量对象是不支持迭

为什么要实现自定义迭代器

因为在JavaScript中字面量对象是不支持迭代的

如何实现JavaScript字面量对象迭代

  • 只要正确实现字面对象的Symbol.iterator这个属性所对应的迭代器函数即可
  • 注意⚠️该迭代器函数只是一个函数,而不是真正的迭代器
  • 迭代器是一个对象,需要提供next函数来提供给类似for of forEach这种迭代函数使用

实现方法

第一种使用比较简单的遍历来实现

let obj = {uname: "zhangsan"};
obj[Symbol.iterator] = function () {
  const keys = Object.keys(this);
  let index = 0;
  return {
    next() {
      return {
        value: obj[keys[index++]],
        done: index > keys.length
      }
    }
  };
};

let iterator = obj[Symbol.iterator]();

console.log(iterator.next());
//{value: 'zhangsan', done: false}

obj.uname='sudongyu'

iterator = obj[Symbol.iterator]();

console.log(iterator.next());
//{value: 'sudongyu', done: false}

第二种使用生成器函数来实现


function object2iterator(obj){
    obj[Symbol.iterator]=function* () {
        let properties = Object.keys(this);
        for (let i of properties) {
            yield [i, this[i]];
        }
    }
    return obj
}

生成器详细api 请参考 mdn

解析为什么生成器函数要这样设计

以下纯个人理解,如果有歧义就当我放屁~ 哈哈哈

  • 迭代器函数是一个函数,这样每次调用都会为将要return的迭代器中的next函数创建一个全新的词法作用域
  • 这样每次在创建新的迭代器时,执行iterator.next()的时候就可以利用闭包访问到属于自己的外层词法环境中的变量,在方法一中也就是能够从index为0开始迭代
  • 这样每个独立的迭代器对象就能相互隔离~

注意⚠️:我还想表达以下几个观点:

  • JavaScript中的对象只是数据的载体,集合
  • 所以我们不能把对象中的函数或者属性作为对象的一部分
  • 对象的属性和函数它们只是一个间接的关系,虽然有点难理解,但是我还是想表达一下这个观点
  • 打个比方来讲,你(对象)身上的钱(属性或者对象上的函数)只是你作为了它暂时的载体,并不意味着这个钱就属于你身体的一部分

总结

到此这篇关于如何优雅迭代JavaScript字面对象的文章就介绍到这了,更多相关迭代js字面对象内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 详解如何优雅迭代JavaScript字面对象

本文链接: https://lsjlt.com/news/149751.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 详解如何优雅迭代JavaScript字面对象
    目录为什么要实现自定义迭代器如何实现JavaScript字面量对象迭代实现方法解析为什么生成器函数要这样设计为什么要实现自定义迭代器 因为在JavaScript中字面量对象是不支持迭...
    99+
    2024-04-02
  • JavaScript可迭代对象详细介绍
    目录1、迭代器2、迭代器接口与可迭代对象3、自定义可迭代对象3.1、可迭代的Range对象3.2、使用Generator函数作为迭代器接口3.3、可迭代的List3.3、可迭代的迭代...
    99+
    2024-04-02
  • JavaScript 代理模式:揭秘面向对象编程的优雅解决方案
    代理模式揭秘 代理模式是一种设计模式,它通过提供一个替代对象来间接访问实际对象。代理对象负责控制对实际对象的访问、拦截对实际对象的调用,并根据需要修改实际对象的行为或属性。这使得我们能够实现对象行为的动态性和灵活性。 代理模式的实现 J...
    99+
    2024-03-09
    JavaScript、代理模式、面向对象编程、动态属性、对象拦截
  • 详解Python之可迭代对象,迭代器和生成器
    目录一、概念描述二、序列的可迭代性三、经典的迭代器模式四、生成器也是迭代器五、实现惰性迭代器六、使用生成器表达式简化惰性迭代器总结 一、概念描述 可迭代对象就是可以迭代的对象,我们可...
    99+
    2024-04-02
  • JavaScript类数组和可迭代对象如何实现
    本篇内容介绍了“JavaScript类数组和可迭代对象如何实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2024-04-02
  • JavaScript详解类数组与可迭代对象的实现原理
    目录可迭代对象(Iterable object)Symbol.iterator把对象本身构造成迭代器String也是可迭代的String的迭代器类数组对象和可迭代对象Array.fr...
    99+
    2024-04-02
  • 如何在 Laravel 中优雅地使用 Java 和 JavaScript 对象?
    Laravel 是一个基于 PHP 的 Web 应用程序框架,它提供了许多方便的工具和功能来帮助开发者快速构建高质量的 Web 应用程序。在 Laravel 中,开发者可以使用 Java 和 JavaScript 对象来增强应用程序的功能和...
    99+
    2023-09-22
    javascript 对象 laravel
  • python如何遍历可迭代对象
    这篇“python如何遍历可迭代对象”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“python如何遍历可迭代对象”文章吧。可...
    99+
    2023-07-05
  • python如何连接可迭代对象中的字符串
    这篇文章主要介绍python如何连接可迭代对象中的字符串,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!连接可迭代对象中的字符串在处理字符串时,有时需要通过连接列表、元组等可迭代对象内的一系列字符串来创建单个字符串。这...
    99+
    2023-06-27
  • 如何在JavaScript面试中优雅地应对Go的响应?
    在JavaScript的面试中,经常会涉及到Go的相关问题,而如何优雅地应对这些问题,是每个面试者都需要掌握的技能。本文将介绍一些应对Go相关问题的技巧和方法,帮助你在面试中表现得更加优秀。 熟悉Go的基本语法和特性 在面试中,最基本的...
    99+
    2023-11-06
    响应 面试 javascript
  • Python中如何使用 iterable可迭代对象
    Python中如何使用 iterable可迭代对象,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。前置知识如果给定一个 list 或 tuple,我们可以通过 f...
    99+
    2023-06-20
  • python如何跳过迭代对象的开头
    这篇文章主要介绍python如何跳过迭代对象的开头,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!跳过迭代对象的开头string_from_file = """&nbs...
    99+
    2023-06-27
  • 一文详解JavaScript数组对象和字符串对象
    目录一、数组对象1.数组类型检测2.添加或删除数组元素3.【案例】筛选数组4.数组排序5.数组索引6.【案例】数组去除重复元素7. 数组转换为字符串8.其他方法二、字符串对象1.字符...
    99+
    2023-05-17
    JavaScript字符串对象 JavaScript数组对象
  • 详解JS中的对象字面量
    目录前言1. 在对象构造上设置原型1.1 __proto__用法的特殊情况2.简写方法定义3. super 的使用3.1 super 使用限制4.计算属性名4.1 symbol 作为...
    99+
    2024-04-02
  • JavaScript面向对象编程详细讲解
    这篇文章主要介绍“JavaScript面向对象编程详细讲解”,在日常操作中,相信很多人在JavaScript面向对象编程详细讲解问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2024-04-02
  • 如何让你的JavaScript函数更加优雅详解
    目录对象参数使用解构命名回调函数让条件句具有描述性用 Map 或 Object替换 switch 语句使用 Object.assign 设置默认属性删除重复代码,合并相似函数;删除弃...
    99+
    2024-04-02
  • 详解JavaScript面向对象实战之封装拖拽对象
    目录概述1、如何让一个DOM元素动起来2、如何获取当前浏览器支持的transform兼容写法3、如何获取元素的初始位置5、我们需要用到哪些事件?6、拖拽的原理7、我又来推荐思维导图辅...
    99+
    2024-04-02
  • Java中如何优雅的把Map转为对象
    在项目开发中,经常碰到map转实体对象或者对象转map的场景,工作中,很多时候我们可能比较喜欢使用第三方jar包的API对他们进行转化,而且用起来也还算方便,比如像fastJson就可以轻松实现map和对象的互转,但这里,我想通过反射的方式...
    99+
    2023-08-31
    java spring spring boot
  • Python解压可迭代对象赋值给多个变量详解
    目录问题描述解决方案1.将N个元素赋值给N个变量,可以通过如下一个简单的赋值语句实现。2.如何将N个元素赋值给M个变量(M<N)?总结1.任何可迭代对象都可以实现这种解压赋值,...
    99+
    2024-04-02
  • 【C++】面向对象---多态(万字详解)
           🔥🔥 欢迎来到小林的博客!!       🛰️博客主页:✈️小林爱敲代码       🛰️文章专栏:✈️小林的C++之...
    99+
    2023-09-01
    c++ java 开发语言
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作