JavaScript for...in

JavaScript for…in 循环语句遍历一个对象的可枚举属性，遍历的过程不保证属性的顺序。

JavaScript for...in 循环语句遍历一个对象的可枚举属性，遍历的过程不保证属性的顺序。

for…in 语法

for (key in object) {
  // 循环代码
}

说明：

  • key：每次循环过程中的对象的属性名
  • object：被遍历的对象

for…in 循环对象

JavaScript for...in 语句循环遍历对象的可枚举属性。

const person = { fname: "John", lname: "Doe", age: 25 };

let text = "";
for (let x in person) {
  text += person[x];
}

说明：

  • 此 for 循环遍历 person 对象的所有属性
  • 每次循环一个属性，并将属性名赋值给变量 x
  • 在每次循环中使用 person[x] 访问对象的属性值

for…in 循环数组

JavaScript for...in 语句还可以遍历数组的属性。

const numbers = [45, 4, 9, 16, 25];

let txt = "";
for (let x in numbers) {
  txt += numbers[x];
}

可以把数组看成一个特殊的对象，数组的索引相当于对象的属性。上面例子中的 x 变量在每次循环的中的值就是数组的索引值。

如果要按顺序处理数组元素，不要使用 for...in，因为循环的顺序得不到保证。

当顺序很重要时，最好使用 for 循环、 for...of 循环或 Array.forEach() 。

Array.forEach()

forEach() 方法为数组中的每一个元素都调用给定的回调函数。

forEach() 接受一个回调函数作为参数， 回调函数可以传入 3 个参数：

  • 元素的值
  • 元素的索引（可选参数）
  • 数组本身（可选参数）
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt += value + "<br>";
}

上面的示例仅使用 value 参数。该示例可以重写为：

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
  txt += value + "<br>";
}

更多数组循环的操作，参见 JavaScript 数组循环章节。

JavaScript for 循环 JavaScript for...of