如何迭代 JavaScript 对象

2025年3月18日 | 阅读时长 4 分钟

使用 JavaScript 键遍历对象数据。这有助于通过唯一的数字获取特定数据集的数据。

遍历对象可以通过以下两种方式完成：

方法 1：使用 for...in 循环
方法 2：Object.entries() map

方法 1：使用 for...in 循环

for...in 循环可用于遍历对象的属性。此循环用于遍历对象中非 Symbol 的可迭代属性。

某些对象可能具有从其原型继承的属性。"hasOwnProperty() { [JavaScript 代码] }() " 方法能够验证该属性是否属于元素本身。

可以通过将键用作对象的数组索引来标识元素每个键的值。

语法

以下语法显示了用于键元素的 for...in 循环。

<script>
for (let key_ele in dataObj) {
if (dataObj.hasOwnProperty(key_ele)) {
value_ele = dataObj[key_ele];
console.log(key_ele, value_ele);
}
}
</script>

“for...in”循环用于 JavaScript 中的迭代函数。
“hasOwnProperty()”用于迭代特定数据的唯一键。
之后，我们可以使用原生 JavaScript 代码来显示值。

示例

以下示例显示了使用带有 "hasOwnProperty()" 方法的 JavaScript 对象迭代数据。

示例 1

以下 JavaScript 示例显示了使用对象迭代数组数据。

<!DOCTYPE html>
<html>
<head>
<title>
How to iterate using a JavaScript object?
</title>
</head>
<body>
<h1 style="color: red">
TpointTech
</h1>
<b>
How to iterate using a JavaScript object?
</b>
<p>
Click the below button to iterate data using the JavaScript object.
</p>
<p>
Check the console to Get the output data
</p>
<button onclick="iterateData()">
Iterate Data
</button>
<script type="text/JavaScript">
function iterateData() {
let dataObj = [
"TpointTech.com",
"JavaScript language",
" online learning",
"programmer and student"
];
for (let key_ele in dataObj) {
if (dataObj.hasOwnProperty(key_ele))
{
value_ele = dataObj[key_ele];
console.log(key_ele, value_ele);
}
}
}</script>
</body>
</html>

输出

以下输出图像显示了显示输出和控制台输出。

点击按钮前

How to Iterate through a JavaScript Object

点击按钮后

示例 2

以下 JavaScript 示例显示了使用对象迭代哈希数据。

<!DOCTYPE html>
<html>
<head>
<title>
How to iterate using a JavaScript object?
</title>
</head>
<body>
<h1 style="color: red">
TpointTech
</h1>
<b>
How to iterate using a JavaScript object?
</b>
<p>
Click the below button to iterate using the JavaScript object.
</p>
<p>
Check the console to Get the output data
</p>
<button onclick="iterateData()">
Iterate Data
</button>
<script type="text/JavaScript">
function iterateData() {
let dataObj = {
website: ": TpointTech.com",
subject: ": JavaScript ",
Mode: ": online",
User: ": Developer"
};
for (let key_ele in dataObj) {
if (dataObj.hasOwnProperty(key_ele))
{
value_ele = dataObj[key_ele];
console.log(key_ele, value_ele);
}
}
}</script>
</body>
</html>

输出

以下输出图像显示了显示输出和控制台输出。

方法 2：Object.entries() map

“Object.entries()”方法显示对象的自有可迭代字符串键值对的数组。返回的数组用于使用 map() 方法从对中提取键和值。

可以通过获取数组对的第一个和第二个索引来检索键值对中的键值系统。

第一个索引与键相关，第二个索引与序列的值相关。

语法

以下语法显示了用于键元素的 "Object.entries()" 循环。

<script>
Object.entries(dataObj).map(entries => {
let key_ele = entries[0];
let value_ele = entries[1];
console.log(key_ele, value_ele);
});
</script>

“Object.entries()”函数使用映射操作来迭代键和值。
元素的第一个对象 (entries[0]) 显示键信息。
元素的第二个对象 (entries[1]) 显示原始值。

示例

以下示例显示了使用带有 object.entries() 方法的 JavaScript 对象迭代数据。

示例 1

以下 JavaScript 示例显示了使用对象迭代数据或映射值。

<!DOCTYPE html>
<html>
<head>
<title>
How to iterate using a JavaScript object?
</title>
</head>
<body>
<h1 style=" color: red">
TpointTech
</h1>
<b>
How to iterate using a JavaScript object?
</b>
<p>
Click the below button to iterate using the JavaScript object.
</p>
<p>
Check the console to Get the output data
</p>
<button onclick="iterateData()">
Iterate Data
</button>
<script type="text/JavaScript">
function iterateData() {
let dataObj = {
website: ": TpointTech.com",
subject: ": JavaScript",
Mode: ": online",
User: ": developer and student"
};
Object.entries(dataObj).map(entries => {
let key_ele = entries[0];
let value_ele = entries[1];
console.log(key_ele, value_ele);
});
}
</script>
</body>
</html>

输出

以下输出图像显示了显示输出和控制台输出。

点击按钮前

点击按钮后

示例 2

以下 JavaScript 示例显示了使用对象迭代数组值。

<!DOCTYPE html>
<html>
<head>
<title>
How to iterate using a JavaScript object?
</title>
</head>
<body>
<h1 style="color: red">
TpointTech
</h1>
<b>
How to iterate using a JavaScript object?
</b>
<p>
Click the below button to iterate using the JavaScript object.
</p>
<p>
Check the console to Get the output data
</p>
<button onclick="iterateData()">
Iterate Data
</button>
<script type="text/JavaScript">
function iterateData() {
let dataObj = [
"TpointTech.com",
"JavaScript",
"online",
"developer and student"
];
Object.entries(dataObj).map(entries => {
let key_ele = entries[0];
let value_ele = entries[1];
console.log(key_ele, value_ele);
});
}
</script>
</body>
</html>

输出

以下输出图像显示了显示输出和控制台输出。

结论

需要迭代多个数据才能使用 JavaScript 显示和操作。使用对象显示迭代数据的两种方法。对于开发人员来说，这是一个简单而重要的功能，可以获取信息的键和值。

下一主题JavaScript Fetch API

如何迭代 JavaScript 对象

方法 1：使用 for...in 循环

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

如何迭代 JavaScript 对象

方法 1：使用 for...in 循环

示例

结论

相关帖子

JavaScript 是如何工作的？

如何将字符串的首字母大写在 JavaScript 中

Javascript 中的 oninput 函数

如何在 JavaScript 中发出蜂鸣声

JavaScript padStart() 方法

从 JavaScript 的 select 列表中移除选项

JavaScript String startsWith

如何在 html 中添加 JavaScript

如何从数组中选取随机元素

JavaScript Infinity 属性

订阅 Tpoint Tech

联系信息

关注我们

教程