0

0

js 怎样遍历对象的属性和值

月夜之吻

月夜之吻

发布时间:2025-08-22 15:17:01

|

1030人浏览过

|

来源于php中文网

原创

遍历对象属性和值的核心方法包括:1. 使用for...in循环结合hasownproperty()过滤自身属性;2. 使用object.keys()遍历自身可枚举属性名;3. 使用object.values()获取属性值数组;4. 使用object.entries()同时获取键值对数组;5. 使用object.getownpropertysymbols()遍历symbol属性;6. 使用reflect.ownkeys()遍历所有自身属性,包括字符串和symbol类型;其中for...in会遍历原型链属性,需用hasownproperty()排除,而object.keys/values/entries仅遍历自身可枚举属性;遍历顺序在es6及以上版本中基本按属性添加顺序或整数索引升序保证,但不建议依赖顺序,如需特定顺序应先提取到数组并排序;性能上object.keys() + foreach()通常略优于for...in + hasownproperty(),但差异在现代引擎中可忽略,选择应基于可读性和需求。

js 怎样遍历对象的属性和值

直接遍历对象的属性和值,核心在于理解JavaScript中对象属性的访问方式以及循环机制。通常,我们会用到

for...in
循环或者
Object.keys()
Object.values()
Object.entries()
等方法。选择哪种方式取决于你的具体需求,比如是否需要考虑原型链上的属性,或者是否需要同时访问属性和值。

解决方案:

最常用的方法是使用

for...in
循环。它会遍历对象自身以及原型链上所有可枚举的属性。如果你只想遍历对象自身的属性,可以使用
hasOwnProperty()
方法进行过滤。

const myObject = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

for (let key in myObject) {
  if (myObject.hasOwnProperty(key)) {
    console.log(`属性: ${key}, 值: ${myObject[key]}`);
  }
}

另一种方法是使用

Object.keys()
,它会返回一个包含对象自身所有可枚举属性名称的数组。然后,你可以使用
forEach()
或其他数组方法来遍历这个数组。

const myObject = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

Object.keys(myObject).forEach(key => {
  console.log(`属性: ${key}, 值: ${myObject[key]}`);
});

如果你需要同时访问属性和值,并且希望得到一个包含键值对的数组,可以使用

Object.entries()
。它会返回一个包含所有
[key, value]
对的数组。

const myObject = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

Object.entries(myObject).forEach(([key, value]) => {
  console.log(`属性: ${key}, 值: ${value}`);
});

Object.values()
方法则直接返回对象自身所有可枚举属性的值的数组,不需要属性名。

const myObject = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

Object.values(myObject).forEach(value => {
  console.log(`值: ${value}`);
});

如何避免遍历到原型链上的属性?

使用

hasOwnProperty()
方法是关键。
for...in
循环会遍历到原型链上的属性,这在某些情况下可能不是你想要的。
hasOwnProperty()
方法可以判断一个属性是否是对象自身定义的,而不是从原型链上继承来的。

Object.prototype.protoProperty = "I'm from prototype"; // 模拟原型链上的属性

const myObject = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

for (let key in myObject) {
  if (myObject.hasOwnProperty(key)) {
    console.log(`属性: ${key}, 值: ${myObject[key]}`); // 只会输出myObject自身的属性
  } else {
    console.log(`原型链属性: ${key}, 值: ${myObject[key]}`); // 输出原型链上的属性
  }
}

Object.keys()
Object.values()
Object.entries()
本身就只遍历对象自身的属性,所以不需要额外使用
hasOwnProperty()

Cutout.Pro抠图
Cutout.Pro抠图

AI批量抠图去背景

下载

不同遍历方法在性能上有什么差异?

通常情况下,

Object.keys()
+
forEach()
的性能会比
for...in
+
hasOwnProperty()
略好一些,因为
for...in
需要每次循环都检查
hasOwnProperty()
。 但是,现代 JavaScript 引擎对这些方法都做了优化,所以在实际应用中,除非是处理非常大的对象,否则性能差异通常可以忽略不计。

选择哪种方法更多取决于代码的可读性和你的具体需求。如果你需要同时访问属性和值,

Object.entries()
可能更方便。 如果你只需要遍历对象自身的属性,
Object.keys()
可能更清晰。

需要考虑 Symbol 类型的属性吗?

默认情况下,上面提到的方法只会遍历对象的可枚举属性,不会遍历 Symbol 类型的属性。 如果你需要遍历 Symbol 类型的属性,可以使用

Object.getOwnPropertySymbols()
方法来获取对象自身所有的 Symbol 属性,然后进行遍历。

const mySymbol = Symbol("mySymbol");

const myObject = {
  name: "John Doe",
  [mySymbol]: "Symbol Value"
};

const symbols = Object.getOwnPropertySymbols(myObject);

symbols.forEach(symbol => {
  console.log(`Symbol: ${symbol.toString()}, 值: ${myObject[symbol]}`);
});

如果要同时遍历可枚举属性和 Symbol 属性,可以使用

Reflect.ownKeys()
方法。

const mySymbol = Symbol("mySymbol");

const myObject = {
  name: "John Doe",
  [mySymbol]: "Symbol Value"
};

const allKeys = Reflect.ownKeys(myObject);

allKeys.forEach(key => {
  console.log(`属性: ${key.toString()}, 值: ${myObject[key]}`);
});

遍历顺序是否可以保证?

在 ES5 及更早的版本中,对象的属性遍历顺序是不确定的。 但在 ES2015 (ES6) 及之后的版本中,对象的属性遍历顺序在一定程度上得到了保证:

  • 对于整数索引属性(array index properties,即属性名可以被转换为非负整数的属性),会按照索引的升序进行遍历。
  • 对于字符串属性,会按照它们被添加到对象中的顺序进行遍历。
  • Symbol 属性的遍历顺序也按照它们被添加到对象中的顺序进行。

需要注意的是,如果对象在遍历过程中被修改,遍历顺序可能会受到影响。 另外,不同的 JavaScript 引擎在某些情况下可能会有不同的实现,所以最好不要依赖于特定的遍历顺序。 如果你需要特定的顺序,可以先将属性名或键值对提取到一个数组中,然后对数组进行排序。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

195

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

223

2025.12.24

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

76

2025.12.04

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

340

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

212

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1503

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

625

2023.11.24

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

54

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PostgreSQL 教程
PostgreSQL 教程

共48课时 | 8.2万人学习

MongoDB 教程
MongoDB 教程

共17课时 | 2.5万人学习

C# 教程
C# 教程

共94课时 | 8.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号