Javascript 简明教程

JavaScript - For…​in Loop

The for…​in Loop

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

The for…​in loop in JavaScript is used to loop through an object’s properties. The JavaScript for…​in loop is a variant of the for loop. The for loop can’t be used to traverse through the object properties. So, the for…​in loop is introduced to traverse through all object properties.

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

As we have not discussed Objects yet, you may not feel comfortable with this loop. But once you understand how objects behave in JavaScript, you will find this loop very useful.

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

The for…​in loop in JavaScript can also be used to iterate through the elements of an array. However, it is not recommended to do this as this is less efficient than using a for…​of loop.

Syntax

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

The syntax of for…​in loop in JavaScript is as follows −

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

Parameters

  1. variableName − It is a property name (key) of the object.

  2. in − It is an 'in' operator in JavaScript.

  3. object − It is the object to traverse.

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

In each iteration, one property from object is assigned to variableName and this loop continues till all the properties of the object are exhausted.

Examples

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

Try the following examples to implement 'for-in' loop.

Example: Iterate through object properties

在以下示例中，car 对象包含多个属性。我们使用 for…in 循环遍历对象的每个键。

In the example below, the car object contains various properties. We used the for…in loop to traverse through each key of the object.

在输出中，我们可以看到它打印键及其值。我们使用“[ ]”（成员）运算符来访问对象中键的值。

In the output, we can see that it prints the key and its value. We use the '[]' (member of) operator to access the value of the key from the object.

<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 循环遍历字符串中的每个字符。字符的索引是键，字符是一个值。

In JavaScript, the string is an object. So, we can use the for…in loop to traverse through each character of the string. The index of the character is the key, and the character is a value.

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

The code prints the index and character in the output.

<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 循环可用于遍历数组元素。就像字符串一样，索引是键，数组元素是键的值。

In JavaScript, the array is also an object. So, the for…in loop can be used to traverse through array elements. Like a string, the index is a key, and the array element is a value for the key.

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

The below code prints the array index and its value in the output.

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

In the example below, we traverse each key of the object and update its value to null. In the output, the code prints the object keys with null values.

因此，for…in 循环还可用于更新对象的全部或特定属性值。

So, the for…in loop can also be used to update all or particular property values of the object.

<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 对象。

Try the following example to implement 'for-in' loop. It prints the web browser’s Navigator object.

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