for...of 与 for...in 循环中实际发生了什么，为什么它们有时可以互换？

Question

我想知道 JavaScript 中的 for...in 与 for...of 循环幕后发生了什么。我不小心在两个相似的实例上切换了它们，一个有效，一个无效，我想弄清楚为什么一个有效而另一个无效。

问题涉及做基本的编码练习，首先列出包含 1-10 整数的数组的所有奇数，然后列出所有偶数。我写的详细信息如下。

对于第一个，列出所有奇数，我写道：

let numbers = [1,2,3,4,5,6,7,8,9,10]
function displayOddNumbers() {
    for (num in numbers) {
        num % 2 != 0 ? console.log(num) : console.log();
    };
};

这行得通，所以我继续我的生活，没有意识到我无意中使用了 for...in 循环而不是 for...of 循环，然后进行了下一个练习，该练习要求列出所有偶数来自同一个数组。我写道：

function displayEvenNumbers() {
    for (num in numbers) {
        num % 2 == 0 ? console.log(num) : console.log();
    };
};

这没有用；它列出了 0、2、4、6、8。当我把它改成

function displayEvenNumbers() {
    for (num in numbers) {
        num % 2 != 0 ? console.log(numbers[num]) : console.log();
    };
};
then it worked.

但是这是怎么回事？我意识到我应该使用 for...of 循环来遍历数组，但是幕后发生了什么让这段代码有时能工作，但其他时候却不能，这似乎违反直觉？

Answer 1

for...of

方法 遍历值而

for...in

方法 遍历键。

当是数组的时候，key基本就是

0...(n-1)

，其中

n

就是数组的长度。它适用于您的情况的原因是因为值的值与索引非常相似，因此看起来是正确的。

Answer 2

JavaScript 中 for...in 和 for...of 循环的主要区别在于它们迭代的对象。 for...in 循环遍历对象的属性，而 for...of 循环遍历可迭代对象（例如数组）的值。

在您的第一个示例中，您使用了 for...in 循环来遍历数字数组。但是，for...in 循环遍历对象的属性，在数组的情况下，属性是数组的索引。因此，在循环的每次迭代中，num 变量被赋予当前元素的索引，而不是元素本身的值。因此，当您使用表达式 num % 2 != 0 时，您是在检查索引是奇数还是偶数，而不是元素的值。

在第二个示例中，您还使用了 for...in 循环来遍历数字数组。同样，num 变量被赋予了当前元素的索引，而不是元素本身的值。因此，当您使用表达式 num % 2 == 0 时，您是在检查索引是偶数还是奇数，而不是元素的值。

要解决这个问题，您需要使用索引来访问数组中元素的值。在更正后的示例中，您使用了表达式 numbers[num] 来访问当前索引处元素的值。这允许您检查元素的值是偶数还是奇数，这正是您想要做的。

总而言之，使用 for...in 循环遍历数组可能会有问题，因为循环变量被赋予当前元素的索引，而不是元素本身的值。在某些情况下，这可能会导致意外行为，例如检查索引是偶数还是奇数而不是检查元素的值是偶数还是奇数。通常建议使用 for...of 循环来迭代数组的值，因为这样更直观且不易出错。