巧用 JavaScript 循环：揭秘 for in 与 for of 的不同之处，以及获取索引值的神奇秘诀

2023-09-07 20:20:07

JavaScript 中的 for in 与 for of：区别与 for of 获取索引

JavaScript 中的循环语句是处理数据和遍历数组或对象的强大工具。在众多循环类型中，for in 和 for of 占据着举足轻重的地位，它们各自拥有不同的功能和适用场景。本文将深入剖析 for in 和 for of 的区别，并探索一种获取 for of 循环中索引值的神奇技巧。

`for in` 和 `for of` 的区别

for in 和 for of 循环用于遍历不同的数据结构。for in 循环主要用于遍历对象的属性，而 for of 循环则用于遍历数组或类似数组的对象（如字符串）。

for in

for (const key in object) {
  // ...
}

遍历对象的可枚举属性（包括原型链中的属性）。
返回属性的键（key），而非值。
顺序不一定。

for of

for (const element of array) {
  // ...
}

遍历数组或类似数组对象中的值。
返回数组中的每个元素。
顺序与数组元素的顺序一致。

获取 `for of` 循环中的索引值

获取 for of 循环中的索引值通常需要使用附加方法。以下代码段演示了一种巧妙的方法：

for (const [index, element] of array.entries()) {
  // ...
}

entries() 方法返回一个数组迭代器，其中每个元素都是一个长度为 2 的数组，第一个元素是索引，第二个元素是值。
此方法允许同时访问索引和值，提供了一种高效且优雅的方式来遍历数组。

实例

为了进一步理解这些概念，让我们编写一些代码示例：

遍历对象属性

const person = {
  name: 'John Doe',
  age: 30,
};

for (const key in person) {
  console.log(key); // 输出：name, age
}

遍历数组元素

const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
  console.log(number); // 输出：1, 2, 3, 4, 5
}

遍历数组元素并获取索引值

for (const [index, number] of numbers.entries()) {
  console.log(`Index: ${index}, Value: ${number}`);
  // 输出：
  // Index: 0, Value: 1
  // Index: 1, Value: 2
  // Index: 2, Value: 3
  // Index: 3, Value: 4
  // Index: 4, Value: 5
}