Javascript 简明教程

JavaScript - For…​in Loop

The for…​in Loop

JavaScript 中的 for…​in 循环用于循环遍历对象的属性。JavaScript for…​in 循环是 for 循环的一个变体。 for 循环不能用于遍历对象属性。因此，引入了 for…​in 循环来遍历所有对象属性。

由于我们尚未讨论对象，因此你可能不熟悉此循环。但是一旦你了解 JavaScript 中对象的行为方式，你就会发现此循环非常有用。

JavaScript 中的 for…​in 循环也可以用于遍历数组元素。但是，不建议这样做，因为这不如使用 for…​of 循环有效。

Syntax

JavaScript 中的 for…​in 循环的语法如下 −

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

Parameters

  1. variableName − 这是对象的属性名称（键）。

  2. in − 这是 JavaScript 中的“in”运算符。

  3. object − 这是要遍历的对象。

在每次迭代中， object 中的一个属性被赋值给 variableName ，此循环会一直持续到对象的全部属性都已用尽。

Examples

尝试以下示例来实现“for-in”循环。

Example: Iterate through object properties

在以下示例中，car 对象包含多个属性。我们使用 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) {
         output.innerHTML += key + " -> " + car[key] + "<br>";
      }
    </script>
</body>
</html>
brand -> OD
model -> Q7
color -> Black

Example: Iterating over a string

在 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

Exampl: Iterating over an array

在 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

Example: Update value of each property of an object

在以下示例中，我们遍历对象的每个键，并将其值更新为 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}

Example: Iterating the Browser’s Navigator Object

尝试以下示例来实现“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!