JavaScript 的 for...in 循环用于遍历对象的属性。JavaScript 的 for...in 循环是 for 循环的一种变种。由于普通的 for 循环不能用于遍历对象的属性，因此引入了 for...in 循环来遍历所有的对象属性。
因为我们还没有讨论过对象，所以你可能对这个循环感到不太适应。但是一旦你理解了 JavaScript 中的对象行为，你会发现这个循环非常有用。
JavaScript 的 for...in 循环也可以用来遍历数组的元素。但是不推荐这样做，因为这样做比使用 for...of 循环效率更低。
语法
for...in 循环在 JavaScript 中的语法如下：
for (variableName in object) {
要执行的语句或代码块
}
参数
-
variableName —— 它是对象的一个属性名（键）。
-
in —— 它是 JavaScript 中的一个 in 操作符。
-
在每次迭代中，对象的一个属性被赋值给 variableName，并且这个循环会一直持续到对象的所有属性都被遍历完为止。
示例
尝试以下示例来实现 for-in 循环。
示例：遍历对象属性
在下面的示例中，car 对象包含各种属性。我们使用 for...in 循环来遍历对象的每个键。
在输出中，我们可以看到它打印了键及其对应的值。我们使用 [] （成员访问）操作符从对象中获取键的值。
<html>
<head>
<title>JavaScript - for...in 循环</title>
</head>
<body>
<p id="output"></p>
<script>
let output = document.getElementById("output");
let car = {
brand: "OD",
model: "Q7",
color: "Black",
}
for (key in car) {
output.innerHTML += key + " -> " + car[key] + "<br>";
}
</script>
</body>
</html>
输出：
brand -> OD
model -> Q7
color -> Black
示例：遍历字符串
在 JavaScript 中，字符串也是一个对象。因此，我们可以使用 for...in 循环来遍历字符串的每一个字符。字符的索引是键，而字符本身是值。
代码在输出中打印了索引和字符。
<html>
<head>
<title>JavaScript - for...in 循环</title>
</head>
<body>
<p id="output"></p>
<script>
let output = document.getElementById("output");
let str = "Hello";
for (key in str) {
output.innerHTML += key + " -> " + str[key] + "<br>";
}
</script>
</body>
</html>
输出：
0 -> H
1 -> e
2 -> l
3 -> l
4 -> o
示例：遍历数组
在 JavaScript 中，数组也是一个对象。因此，for...in 循环可以用来遍历数组元素。与字符串类似，索引是键，而数组元素是该键的值。
下面的代码在输出中打印了数组索引及其值。
<html>
<head>
<title>JavaScript - for...in 循环</title>
</head>
<body>
<p id="output"></p>
<script>
let output = document.getElementById("output");
let array = ["Hi", "Hello", 900, 23, true, "JavaScript"];
for (key in array) {
output.innerHTML += key + " -> " + array[key] + "<br>";
}
</script>
</body>
</html>
输出：
0 -> Hi
1 -> Hello
2 -> 900
3 -> 23
4 -> true
5 -> JavaScript
示例：更新对象每个属性的值
在下面的示例中，我们遍历对象的每个键，并将其值更新为 null。在输出中，代码打印了带有 null 值的对象键。
因此，for...in 循环也可以用来更新对象的所有或某些特定属性值。
<html>
<head>
<title>JavaScript - for...in 循环</title>
</head>
<body>
<p id="output"></p>
<script>
let output = document.getElementById("output");
let car = {
brand: "OD",
model: "Q7",
color: "Black",
}
for (key in car) {
car[key] = null;
}
output.innerHTML += "更新后的对象是 - " + JSON.stringify(car);
</script>
</body>
</html>
输出：
更新后的对象是 - {"brand":null,"model":null,"color":null}
示例：遍历浏览器的 Navigator 对象
尝试以下示例来实现 for-in 循环。它打印了 Web 浏览器的 Navigator 对象。
<html>
<body>
<div id="demo"></div>
<script>
const output = document.getElementById("demo");
var aProperty;
output.innerHTML = "Navigator 对象属性<br>";
for (aProperty in navigator) {
output.innerHTML += aProperty;
output.innerHTML += "<br>";
}
output.innerHTML += "退出循环！";
</script>
</body>
</html>
输出：
Navigator 对象属性
vendorSub
productSub
vendor
maxTouchPoints
userActivation
doNotTrack
geolocation
connection
plugins
mimeTypes
pdfViewerEnabled
webkitTemporaryStorage
webkitPersistentStorage
hardwareConcurrency
cookieEnabled
appCodeName
appName
appVersion
platform
product
userAgent
language
languages
onLine
webdriver
getBattery
getGamepads
javaEnabled
sendBeacon
vibrate
scheduling
bluetooth
clipboard
credentials
keyboard
managed
mediaDevices
storage
serviceWorker
wakeLock
deviceMemory
ink
hid
locks
mediaCapabilities
mediaSession
permissions
presentation
serial
virtualKeyboard
usb
xr
userAgentData
canShare
share
clearAppBadge
setAppBadge
getInstalledRelatedApps
getUserMedia
requestMIDIAccess
requestMediaKeySystemAccess
webkitGetUserMedia
registerProtocolHandler
unregisterProtocolHandler
Exiting from the loop!
请注意，最后一段输出中的 "Exiting from the loop!" 应为 "退出循环！"，但由于浏览器的 Navigator 对象的具体属性可能因浏览器版本和实现的不同而有所差异，上述列出的属性仅作为示例。