跳到主要内容

JavaScript for...in 循环

提示
  1. 循环语法：for\.\.\.in 循环的语法为 for (key in object) { // 循环体 }，用于遍历对象的所有属性键。
  2. 遍历对象属性：使用for\.\.\.in 循环可以遍历对象的所有属性和值。
  3. 适用性和限制：虽然for\.\.\.in 循环可用于字符串和数组，但不建议用于数组遍历，因为它不保证属性的顺序，并且可能会遍历非数字键。对于数组，for...of 循环是更好的选择。

在之前的教程中，我们已经涵盖了：

还有其他类型的循环。JavaScript 中的 for..in 循环允许您遍历对象的所有属性键。

JavaScript for...in 循环​

for\.\.\.in 循环的语法是：

for (key in object) {
  // for...in 的主体
}

在循环的每次迭代中，一个键被赋值给变量 key。循环将持续遍历所有对象属性。

注意：一旦获取到键，您可以轻松找到它们对应的值。

示例 1：遍历一个对象​

const student = {
  name: "Monica",
  class: 7,
  age: 12,
};

// 使用 for...in
for (let key in student) {
  // 显示属性
  console.log(`${key} => ${student[key]}`);
}

输出

name => Monica
class => 7
age => 12

在上述程序中，使用for\.\.\.in 循环遍历 student 对象并打印其所有属性。

  • 对象键被赋值给变量 key。
  • student[key] 用于访问 key 的值。

示例 2：更新属性的值​

const salaries = {
  Jack: 24000,
  Paul: 34000,
  Monica: 55000,
};

// 使用 for...in
for (let i in salaries) {
  // 添加货币符号
  let salary = "$" + salaries[i];

  // 显示值
  console.log(`${i} : ${salary}`);
}

输出

Jack : $24000,
Paul : $34000,
Monica : $55000

在上面的示例中，使用for\.\.\.in 循环遍历 salaries 对象的属性。然后，字符串 $ 被添加到对象的每个值上。

for...in 与字符串​

您还可以使用for\.\.\.in 循环遍历字符串值。例如，

const string = "code";

// 使用 for...in 循环
for (let i in string) {
  console.log(string[i]);
}

输出

c;
o;
d;
e;

for...in 与数组​

您也可以使用for\.\.\.in 循环来处理数组。例如，

// 定义数组
const arr = ["hello", 1, "JavaScript"];

// 使用 for...in 循环
for (let x in arr) {
  console.log(arr[x]);
}

输出

hello;
1;
JavaScript;

在后续教程中您将了解更多关于数组的内容。

注意：当数组的索引顺序很重要时，您不应该使用for\.\.\.in 遍历数组。

遍历数组的更好方式之一是使用 for...of 循环。

要了解更多关于 for...of 循环，请访问 JavaScript for...of 循环。

最后于 更新