JavaScript - For...in 循环
for...in 循环
JavaScript 中的 for...in 循环用于循环遍历对象的属性。JavaScript 中的 for...in 循环是 for 循环的一种变体。for 循环不能用于遍历对象属性。因此，我们引入了 for...in 循环来遍历所有对象属性。
由于我们还没有讨论过对象，您可能对这个循环不太熟悉。但是，一旦您了解了对象在 JavaScript 中的行为方式，您就会发现这个循环非常有用。
JavaScript 中的 for...in 循环也可以用来迭代数组的元素。但是，不建议这样做，因为这比使用 for...of 循环效率低。
语法
JavaScript 中 for...in 循环的语法如下 -
for (variableName in object) {
要执行的语句或代码块
}
参数
variableName - 对象的属性名称(键)。
in - JavaScript 中的"in"运算符。
object - 要遍历的对象。
每次迭代都会赋值 object 的一个属性。到 variableName，此循环持续进行，直到对象的所有属性都遍历完毕。
示例
尝试以下示例实现"for-in"循环。
示例:遍历对象属性
在下面的示例中，car 对象包含各种属性。我们使用 forin 循环遍历对象的每个键。
在输出中，我们可以看到它打印了键及其值。我们使用"[]"(成员)运算符从对象中访问键的值。
<html>
<head>
<title> JavaScript - for...in loop </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 中，字符串是一个对象。因此，我们可以使用 forin 循环遍历字符串中的每个字符。字符的索引是键，字符本身是值。
代码会在输出中打印索引和字符。
<html>
<head>
<title> JavaScript - for...in loop </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 中，数组也是一个对象。因此，可以使用 forin 循环遍历数组元素。与字符串类似，索引是键，而数组元素是该键的值。
以下代码在输出中打印数组索引及其值。
<html>
<head>
<title> JavaScript - for...in loop </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 的对象键。
因此，forin 循环也可用于更新对象的所有或特定属性值。
<html>
<head>
<title> JavaScript - for...in loop </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 Object Properties<br> ";
for (aProperty in navigator) {
output.innerHTML += aProperty;
output.innerHTML += "<br>";
}
output.innerHTML += "Exiting from the loop!";
</script>
</body>
</html>
输出
Navigator Object Properties 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!
