JavaScript - For...in 循环

for...in 循环

for...in 循环用于遍历对象的属性。JavaScript for...in 循环是 for 循环的变体。for 循环不能用于遍历对象属性。所以，引入 for...in 循环来遍历所有对象属性。

由于我们还没有讨论 Objects，因此您可能对这个循环感到不舒服。但是一旦你了解了对象在 JavaScript 中的行为方式，你就会发现这个循环非常有用。

for...in 循环也可用于遍历数组的元素。但是，不建议这样做，因为这比使用 for ...of 循环。

语法

for...in 循环如下 -


for (variableName in object) {
	 	statement or block to execute
}

参数

variableName - 它是对象的属性名称（键）。
in − 它是 JavaScript 中的 'in' 运算符。
object − 它是要遍历的对象。

在每次迭代中，将 object 中的一个属性分配给 variableName，并且此循环将继续，直到 object 的所有属性都用完。

例子

请尝试以下示例来实现 'for-in' 循环。

示例：迭代对象属性

在下面的示例中，car 对象包含各种属性。我们使用了 for...in 循环遍历对象的每个键。

在输出中，我们可以看到它打印了 key 及其值。我们使用 '[]' （member of）运算符从对象访问键的值。


<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 中，字符串是一个对象。因此，我们可以使用 for...in 循环遍历字符串的每个字符。字符的索引是键，字符是一个值。

该代码在输出中打印索引和字符。


<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 中，数组也是一个对象。所以，for...in 循环可用于遍历数组元素。与字符串一样，索引是键，数组元素是键的值。

下面的代码在输出中打印数组索引及其值。


<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 值的对象键。

所以，for...in 循环还可用于更新对象的所有或特定属性值。


<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 += "The updated object is - " + JSON.stringify(car);
	 	 </script>
</body>
</html>

输出

The updated object is - {"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!

打印本页