了解JavaScript中属性遍历的三种方法

在JavaScript中,我们经常需要遍历对象的属性。这可以通过使用for in、Object.keys和Object.getOwnPropertyNames三种方法来实现。但是,这三种方法之间有什么区别呢?在本文中,我们将深入探讨这个问题,并提供一些示例代码来帮助您更好地理解它们之间的差异。

开始

在深入探讨这三种方法之前,让我们先了解一下它们的基本概念。

  • for in:用于遍历对象的可枚举属性,包括原型链上的属性。
  • Object.keys:用于返回一个由对象的可枚举属性组成的数组。
  • Object.getOwnPropertyNames:用于返回一个由对象的所有属性组成的数组,包括不可枚举属性。

优缺点

  1. for…in循环遍历属性

优点:

  • 简单易用,适用于遍历对象的所有可枚举属性
  • 可以遍历对象的原型链上的属性

缺点:

  • 无法保证属性的遍历顺序
  • 遍历时会包括对象的原型链上的属性,可能会导致意外的属性遍历
  1. Object.keys()方法遍历属性

优点:

  • 返回一个包含对象所有可枚举属性的数组
  • 不会遍历对象的原型链上的属性

缺点:

  • 无法遍历对象的原型链上的属性
  • 无法保证属性的遍历顺序
  1. Object.getOwnPropertyNames()方法遍历属性

优点:

  • 返回一个包含对象所有属性(包括不可枚举属性)的数组
  • 不会遍历对象的原型链上的属性

缺点:

  • 无法保证属性的遍历顺序
  • 无法遍历对象的原型链上的属性

for in

for in语句可以用于遍历对象的属性。下面是一个简单的示例:

const person = {name: 'John',age: 30,gender: 'male'
};for (const key in person) {console.log(`${key}: ${person[key]}`);
}

在上面的代码中,我们使用for in语句遍历了person对象的所有属性,并打印了它们的键和值。输出结果如下:

name: John
age: 30
gender: male

需要注意的是,for in语句不仅会遍历对象的自身属性,还会遍历其原型链上的属性。因此,您需要使用hasOwnProperty()方法来检查属性是否属于对象本身,如下所示:

for (const key in person) {if (person.hasOwnProperty(key)) {console.log(`${key}: ${person[key]}`);}
}

Object.keys

Object.keys方法返回一个由对象的可枚举属性组成的数组。下面是一个示例:

const person = {name: 'John',age: 30,gender: 'male'
};const keys = Object.keys(person);
console.log(keys);

在上面的代码中,我们使用Object.keys方法获取了person对象的所有可枚举属性,并将它们存储在一个数组中。输出结果如下:

["name", "age", "gender"]

需要注意的是,Object.keys方法只会返回对象的可枚举属性,不会返回其原型链上的属性。

Object.getOwnPropertyNames

Object.getOwnPropertyNames方法返回一个由对象的所有属性组成的数组,包括不可枚举属性。下面是一个示例:

const person = {name: 'John',age: 30,gender: 'male'
};const propertyNames = Object.getOwnPropertyNames(person);
console.log(propertyNames);

在上面的代码中,我们使用Object.getOwnPropertyNames方法获取了person对象的所有属性,并将它们存储在一个数组中。输出结果如下:

["name", "age", "gender"]

需要注意的是,Object.getOwnPropertyNames方法会返回对象的所有属性,包括不可枚举属性和Symbol属性。

结论

在JavaScript中,我们可以使用for in、Object.keys和Object.getOwnPropertyNames三种方法来遍历对象的属性。它们之间的区别在于:

  • for in语句会遍历对象的原型链上的属性,需要使用hasOwnProperty()方法来检查属性是否属于对象本身。
  • Object.keys方法只会返回对象的可枚举属性,不会返回其原型链上的属性。
  • Object.getOwnPropertyNames方法会返回对象的所有属性,包括不可枚举属性和Symbol属性。

根据您的具体需求,选择适合您的方法来遍历对象的属性。

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

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

相关文章

Unity技美35——再URP管线环境下,配置post后期效果插件(post processing)

前两年在我的unity文章第10篇写过,后效滤镜的使用,那时候大部分项目用的还是unity的基础管线,stander管线。 但是现在随着unity的发展,大部分项目都用了URO管线,甚至很多PC端用的都是高效果的HDRP管线,这就…

位图及有关海量数据处理

bitset 1.给40亿个不重复的无符号整数,没排过序,给一个无符号整数,如何快速判断一个数是否在这40亿个中 ①.如果用排序加二分查找,40亿个数需要16g内存,内存开不出这么大连续空间 ②.每个值映射一个比特位,…

基于Haclon的图形镜像案例

项目要求: 图为HALCON的例图“green-dot”,请将其中的圆形图案按水平和垂直两个方向分别进行镜像。 项目知识: 首先要用BLOB分析的方法,得到圆形图案的目标区域,再对其进行镜像。 在HALCON中与镜像相关的算子为mirr…

笔记,B+树

B树面对的场景,是一个有10亿行的表,希望某一列是有序的。这么大的数据量,内存里放不下,需要放在硬盘里。结果,原本运行于内存的二叉树,就升级为B树了。 在二叉树中,每个节点存储着一个数字&…

基于Eclipse+Swing+MySQL开发的借贷平台

基于Swing的借贷平台 项目介绍💁🏻 本项目是一个基于Java JDBC的银行管理系统。开发环境为MyEclipse2014,数据库使用MySQL V5.5,操作系统为Windows 7 64位。 主要功能包括用户开户、存款、取款、转账、查询余额、修改密码和销户等…

洛谷P1047题 校门外的树

[NOIP2005 普及组] 校门外的树 题目描述 某校大门外长度为 l l l 的马路上有一排树,每两棵相邻的树之间的间隔都是 1 1 1 米。我们可以把马路看成一个数轴,马路的一端在数轴 0 0 0 的位置,另一端在 l l l 的位置;数轴上的每…

两巨头Facebook 和 GitHub 联手推出 Atom-IDE

9月13日,GitHub 宣布与 Facebook 合作推出了 Atom-IDE —— 它包括一系列将类 IDE 功能带到 Atom 的可选工具包。初次发布的版本包括更智能、感知上下文的自动完成;导航功能,如大纲视图和定义跳转(outline view and goto-definition)&#xf…

生态对对碰|华为OceanStor闪存存储与OceanBase完成兼容性互认证!

近日,北京奥星贝斯科技有限公司 OceanBase 数据库与华为技术有限公司 OceanStor Dorado 全闪存存储系统、OceanStor 混合闪存存储系统完成兼容性互认证。 OceanBase 数据库挂载 OceanStor 闪存存储做为数据盘和日志盘,在 OceanStor 闪存存储系统卓越性能…

Redis当中的BitMap,实现github打卡功能

写在开头 本文参考原文 BitMap Redis中的BitMap同我们所使用的算法当中的bitmap是相同的道理。简单来说就是使用二进制位,每一位的0/1状态表示信息。 二进制表示的优势: 大大节省空间。如两位二进制位00、01、10、11可以表示四种状态 Redis当中提供了…

css优化滚动条样式

css代码: ::-webkit-scrollbar {width: 6px;height: 6px; }::-webkit-scrollbar-track {background-color: #f1f1f1; }::-webkit-scrollbar-thumb {background-color: #c0c0c0;border-radius: 3px; }最终样式:

华为OD机试真题-围棋的气-2023年OD统一考试(C卷)

题目描述: 围棋棋盘由纵横各19条线垂直相交组成,棋盘上一共19x19=361个交点,对弈双方一方执白棋,一方执黑棋,落子时只能将棋子置于交点上。 “气”是围棋中很重要的一个概念,某个棋子有几口气,是指其上下左右方向四个相邻的交叉点中,有几个交叉点没有棋子,由此可知: …

TPLink-Wr702N 通过OpenWrt系统打造打印服务器实现无线打印

最近淘到了一个TPLink-Wr702N路由器,而且里面已经刷机为OpenWrt系统了,刚好家里有一台老的USB打印机,就想这通过路由器将打印机改为无线打印机,一番折腾后,居然成功了,这里记录下实现过程,为后面…

flink源码分析之功能组件(二)-kubeclient

简介 本系列是flink源码分析的第二个系列,上一个《flink源码分析之集群与资源》分析集群与资源,本系列分析功能组件,kubeclient,rpc,心跳,高可用,slotpool,rest,metrics,future。其中kubeclient上一个系列介绍过,为了系列完整性,这里“copy”一下。 kubeclient组件…

electron+vue3全家桶+vite项目搭建【26】electron本地安装Vue Devtool插件,安装浏览器扩展

文章目录 引入获取vue devtool导入插件排除插件的npm脚本最终效果 引入 demo项目地址 Vue Devtools插件是vue项目必备插件,它是安装在浏览器里的,而咱们的electron中实际就包含了一个浏览器,同理它也可以加载浏览器插件 获取vue devtool 直…

【开源】基于Vue+SpringBoot的食品生产管理系统

项目编号: S 044 ,文末获取源码。 \color{red}{项目编号:S044,文末获取源码。} 项目编号:S044,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 加工厂管理模块2.2 客户管理模块2.3…

WIFI模块(esp-01s)获取网络时间与天气信息

目录 一、硬件连接 二、获取网络时间 1、AT指令集 2、具体操作 三、获取天气信息 1、心知天气注册 2、AT指令集 3、具体操作 4、json格式检查 一、硬件连接 WiFi模块的RX连接TTL模块的TX, WiFi模块的TX连接TTL模块的RX,电源与地接对。 插入电脑…

Python 安装Vue依赖包发生异常:npm ERR! notsup Required: {“node“:“^18.17.0 || >=20.5.0“}

异常: 原因:node和npm要求升级为高版本 解决:重新安装node环境 (1) 官网下载Node.js (2)双击安装node.js (3)运行查看

智能优化算法应用:基于蝗虫算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于蝗虫算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于蝗虫算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.蝗虫算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…

第二十一章 解读XML与JSON文件格式(工具)

XML 带分隔符的文件仅有两维的数据:行 & 列。如果我们想在程序之间交换数据结构,需要一种方法把层次结构,序列,集合和其它的数据结构编码成文本。 今天要说的 XML 是最突出的处理上述这种转换的标记格式,它使用标…

每日一题2023.11.26——个位数统计【PTA】

题目要求: 输入格式: 每个输入包含 1 个测试用例,即一个不超过 1000 位的正整数 N。 输出格式: 对 N 中每一种不同的个位数字,以 D:M 的格式在一行中输出该位数字 D 及其在 N 中出现的次数 M。要求按 D 的升序输出。…