在 JavaScript 中枚举对象属性
本教程将教你使用不同的方法来枚举 JavaScript 对象的属性。这些方法将使用内置的 JavaScript 功能，如 for...in、Object.keys 和 Object.entries。
你可以使用 for...in 枚举 JavaScript 对象属性。但是，如果 JavaScript 符号是属性名称，它们将被忽略。
此外，for...in 返回继承的可枚举属性；你可以使用 hasOwnProperty() 方法来避免这种情况。hasOwnProperty() 方法确保返回的属性属于当前对象。
在下面的示例代码中，我们有一个具有一些属性和值的对象。此外，属性名称之一是 JavaScript 符号。
当你使用 for...in 枚举对象时，结果将不包括 JavaScript 符号。
let Java = Symbol("Java");
let inventors = {
"HTML": "Sir Tim Berners-Lee",
"JavaScript": "Brendan Eich",
[Java]: "James Gosling",
"PHP": "Rasmus Lerdorf",
"Ruby on Rails": "DHH",
"Python": "Guido van Rossum"
}
for (let propName in inventors) {
if (inventors.hasOwnProperty(propName)) {
console.log(propName);
}
}
输出：
HTML
JavaScript
PHP
Ruby on Rails
Python
你可以通过将对象作为参数传递给 object.keys() 来枚举对象属性。结果是可枚举属性名称的数组，按对象中出现的顺序排列。
以下代码有一个包含星期几及其数值的对象。我们只想获取星期几，所以我们在对象上使用 object.keys()。
let daysOfTheWeek = {
"Sunday": 1,
"Monday": 2,
"Tuesday": 3,
"Wednesday": 4,
"Thursday": 5,
"Friday": 6,
"Saturday": 7
}
let daysArray = Object.keys(daysOfTheWeek);
for (let i = 0; i < daysArray.length; i++) {
console.log(daysArray[i]);
}
输出：
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Object.entries() 返回一个数组。该数组的每个元素都是一个由对象属性名称和值组成的数组。
但是，我们需要属性名称。因此，我们将遍历结果数组以获取属性名称。
我们在下面的代码中对数组使用 Object.keys()。之后，我们使用 for...of 循环来提取属性名称。
请注意，我们使用的是与上一节相同的数组。
let daysOfTheWeek = {
"Sunday": 1,
"Monday": 2,
"Tuesday": 3,
"Wednesday": 4,
"Thursday": 5,
"Friday": 6,
"Saturday": 7
}
let daysArray = Object.entries(daysOfTheWeek);
for (const [propName, propValue] of daysArray) {
console.log(`${propName}`);
}
输出：
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Underscore.js 有一个 .keys() 方法以数组形式返回对象属性。但是，由于要枚举属性，因此需要遍历数组。
你可以在循环期间一个接一个地列出属性名称。
在以下代码中，我们通过 CDN 使用 Underscore.js。当 Underscore.js 下载并可供我们的脚本使用时，我们使用它的 .keys() 方法。
<body>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.2/underscore-min.js"
integrity="sha512-anTuWy6G+usqNI0z/BduDtGWMZLGieuJffU89wUU7zwY/JhmDzFrfIZFA3PY7CEX4qxmn3QXRoXysk6NBh5muQ==" crossorigin="anonymous"
referrerpolicy="no-referrer"
>
</script>
<script>
let daysOfTheWeek = {
"Sunday": 1,
"Monday": 2,
"Tuesday": 3,
"Wednesday": 4,
"Thursday": 5,
"Friday": 6,
"Saturday": 7
}
let underscore = _;
let days = _.keys(daysOfTheWeek);
days.forEach((propKey, propValue) => {
console.log(propKey);
});
</script>
</body>
输出：
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
