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!

列印頁面