JavaScript - For...in 循环：初学者指南

你好，有抱负的程序开发者！今天，我们将深入了解JavaScript的一个便捷工具：for...in循环。别担心如果你之前从未编写过代码——我会一步一步地引导你，就像我在多年教学中对无数学生所做的那样。所以，拿起一杯咖啡（或者如果你喜欢，一杯茶），让我们开始吧！

for...in 循环是什么？

在我们深入了解之前，让我们先了解一下for...in循环是怎么回事。想象你有一个装满玩具的大箱子（在JavaScript中我们称这个箱子为“对象”）。for...in循环就像一只神奇的手，它伸进箱子，一次拿出一个玩具，让你能够单独查看每个玩具。

在编程术语中，for...in循环允许我们遍历一个对象的所有属性。这是一种查看存储在对象中的每一块数据的方式，一次一块。

for...in 循环的语法

现在，让我们来看看如何编写一个for...in循环。别担心一开始看起来有点奇怪——我们会一起分析！

for (let key in object) {
// 要执行的代码
}

让我们分解一下：

• for：这个关键字告诉JavaScript我们正在开始一个循环。
• let key：这创建了一个变量（我们在这里称之为key），它将持有我们在遍历对象时每个属性的名称。
• in：这个关键字将变量名和我们正在循环的对象分开。
• object：这是我们想要检查的对象。
• 花括号{}包含了对对象中的每个属性都要运行的代码。

for...in 循环的实际应用示例

示例 1：探索一个简单的对象

让我们从一个简单的示例开始。想象我们有一个表示书的对象：

let book = {
title: "了不起的盖茨比",
author: "F. Scott Fitzgerald",
year: 1925
};

for (let property in book) {
console.log(property + ": " + book[property]);
}

如果我们运行这段代码，这里是我们将在控制台中看到的内容：

title: 了不起的盖茨比
author: F. Scott Fitzgerald
year: 1925

这里发生了什么？我们的for...in循环正在遍历book对象的每个属性。在每次迭代中：

• property持有当前属性的名称（"title"，"author"，或"year"）。
• book[property]给我们那个属性的值。
• 我们使用console.log()来打印出属性名称及其值。

示例 2：计数属性

假设我们想要计算一个对象有多少个属性：

let car = {
make: "Toyota",
model: "Corolla",
year: 2020,
color: "blue"
};

let propertyCount = 0;

for (let prop in car) {
propertyCount++;
}

console.log("The car object has " + propertyCount + " properties.");

这将输出："The car object has 4 properties."

在这个示例中，我们使用for...in循环来遍历car对象的每个属性。我们没有对属性本身做任何事情，而是每次循环时增加一个计数器。这给了我们对象中的属性总数。

示例 3：过滤属性

有时，你可能只想对某些属性做操作。让我们看一个例子：

let person = {
name: "Alice",
age: 30,
city: "New York",
job: "Engineer",
hobby: "painting"
};

console.log("以 'j' 开头的属性：");
for (let prop in person) {
if (prop.startsWith('j')) {
console.log(prop + ": " + person[prop]);
}
}

这将输出：

以 'j' 开头的属性：
job: Engineer

在这个示例中，我们使用for...in循环来遍历person对象的所有属性，但我们只记录以字母'j'开头的属性。我们使用startsWith()方法来检查这个条件。

与 for...in 循环一起使用的常见方法

下面是一些你可能会与for...in循环结合使用的方法的表格：

方法	描述	示例
hasOwnProperty()	检查属性是否直接在对象上（不是继承的）	if (object.hasOwnProperty(property))
Object.keys()	返回一个对象自身可枚举的属性名称数组	Object.keys(object)
Object.values()	返回一个对象自身可枚举的属性值数组	Object.values(object)
Object.entries()	返回一个对象自身可枚举的字符串键属性的[key, value]对数组	Object.entries(object)

总结

就这样！你已经迈出了进入for...in循环世界的第一步。记住，就像学习骑自行车一样，编程需要练习。如果一开始没有马上理解，不要气馁——继续尝试不同的对象，看看你能用for...in循环做些什么。

正如编程界所说，“学习的唯一方法是编程！”那么，为什么不尝试创建你自己的对象，并用for...in循环来探索它们呢？也许可以创建一个代表你最喜欢的电影或书的对象，看看你能对它做些什么。

快乐编程，记住——每个专家都曾是初学者。继续努力，在你意识到之前，你将像专业人士一样循环遍历对象！

Credits: Image by storyset