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) {
   statement or block to execute
}

参数

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

在每次迭代中，object 中的一个属性被赋值给 variableName，并且此循环持续到对象的所有属性都遍历完为止。

示例

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

示例：遍历对象属性

在下面的示例中，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

示例：迭代字符串

在 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!

打印页面