JavaScript 中的 for...in 与 for...of

缺乏、安全感 2022-09-09 04:38 241阅读 0赞

![75e7c8b6b6964b4f2389f4a0b5917583.png][]

英文 | https://dev.to/mehmehmehlol/for-in-vs-for-of-in-javascript-174g

翻译 | web前端开发（ID：web\_qdkf)

相当长一段时间，我一直在努力充分理解for...in和for...of之间的差异。如果你是通过 Google 或 dev.to feed 发现我的这篇文章，我可以有把握地假设你可能想知道同样的事情。

for...in 和 for...of 是我们都熟悉的 for 循环的替代方案。但是，for...in 和 for...of 用于不同的场合，其主要取决于你要查找的内容，而我们知道的 for 循环基本上可以在任何情况下使用。

我们将首先讨论示例/用法，然后我们将分解它们中的每一个。

**示例/用法**

##  ##

### **for** ###

const arr = [1, 2, 3, 4, 5]
    
    
    function printArr(arr) {
      for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
      }
    }
    
    
    console.log(printArr(arr));
    
    
    // 1
    // 2
    // 3
    // 4
    // 5

### **for...in** ###

const obj = { a: 1, b: 2, c: 3 }
    
    
    function printObj(obj) {
      for (let prop in obj) {
        console.log(`prop: ${prop}`)
        console.log(`obj[prop]: ${obj[prop]}`)
      }
    }
    
    
    console.log(printObj(obj));
    
    
    // prop: a
    // obj[prop]: 1
    // prop: b
    // obj[prop]: 2
    // prop: c
    // obj[prop]: 3

### **for...of** ###

const arrOf = [1, 2, 3, 4, 5]
    
    
    function printArrOf(arr) {
      for (let ele of arr) {
        console.log(ele);
      }
    }
    
    
    console.log(printArrOf(arrOf));
    
    
    // 1
    // 2
    // 3
    // 4
    // 5

现在你看到了它们是如何使用的，让我们一一分解它们！

##  ##

**我们亲爱的最好的朋友，for 语句**

当我们需要迭代任何东西时，可以随时使用这个基本的 for 循环。

**基本语法**

for ([initialization]; [condition]; [final-expression]) {
      statement
    }

迭代通常发生在block（又名\{\}）内部。我们将在要执行的循环的块中放置多个语句。你可以根据条件使用break、continue等来继续或中断 for 循环。

**示例与 break**

for (let i = 0;; i++) {
      console.log(i);
      if (i > 5) break;
    }
    
    
    // Expected Output: 
    // 0
    // 1
    // 2
    // 3
    // 4
    // 5
    // 6
    
    
    // Explanation: The loop breaks when i is larger than 5.

快速说明：括号内的所有表达式都是可选的。

**示例与 continue**

for (let i = 0; i < 10; i++) {
      if (i === 7) continue;
      else console.log(i);
    }
    
    
    // Expected Output:
    // 0
    // 1
    // 2
    // 3
    // 4
    // 5
    // 6
    // 8
    // 9
    
    
    // Explanation: if i is equal to 7, we will skip that i and move on to the next index.

## **for...in** ##

for...in循环遍历对象的所有可枚举属性。

如果你不知道 enumerable 是什么，我会尽力解释它是什么。基本上你可以认为可枚举属性是key对象中的键值。

它也会出现在Object.keys()方法中。因此，如果我们查看上一节中的示例...

const obj = { a: 1, b: 2, c: 3 }
    
    
    function printObj(obj) {
      for (let prop in obj) {
        console.log(`prop: ${prop}`)
        console.log(`obj[prop]: ${obj[prop]}`)
      }
    }
    
    
    console.log(printObj(obj));
    
    
    // prop: a
    // obj[prop]: 1
    // prop: b
    // obj[prop]: 2
    // prop: c
    // obj[prop]: 3

prop是key键值对中的键 ，这是我们的可枚举属性。如果你对如何检索对象的值有基本的了解，我们将键视为数组中的索引并将其放在方括号 ->obj\[prop\]中，如下所示。

const obj = { 
      name: "Megan", 
      age: "do the Math", 
      role: "front-end developer" 
    }
    
    
    for (const property in obj) {
      console.log(property);
    }
    
    
    // Expected Output:
    // name
    // age
    // role

到目前为止，我们的示例都在 object 或 \{\} 中（因为数组也是一个对象），不建议/好的做法for...in用于迭代数组，其中索引顺序很重要。

是的，数组索引也是可枚举的属性，但是是整数。如果我们用for...in来迭代一个数组，它的行为非常不可预测。不能保证元素按特定顺序迭代。

此外，如果你想通过分配给超出数组当前大小的索引来扩展数组，它可能无法反映正确的索引。因此，for...of, forEach, 或for带有数字索引的循环是迭代数组的更好方法。

## **for...of** ##

现在是我们的第二个主角for...of。如果你不知道，for...of在 ES6 中引入。for...of已经成为很多 JavaScript 开发者的有用迭代方法。for...of可以迭代任何可迭代对象。你把它命名为, String, Array, Object...

**String**

const name = "Megan";
    
    
    for (const alphabet of name) {
      console.log(alphabet);
    }
    
    
    // Expected Output:
    // M
    // e
    // g
    // a
    // n

**Array**（从示例部分复制）

const arrOf = [1, 2, 3, 4, 5]
    
    
    function printArrOf(arr) {
      for (let ele of arr) {
        console.log(ele);
      }
    }
    
    
    // Expected Output:
    // 1
    // 2
    // 3
    // 4
    // 5

**Object**（借助Object.entries()）

**注意侧边栏**  
Object.entries()返回给定对象自己的可枚举字符串键属性的数组。

const obj = {
      name: "Megan", 
      age: "do the Math", 
      role: "front-end developer" 
    };
    
    
    Object.entries(obj)
    // [
    //  [ 'name', 'Megan' ],
    //  [ 'age', 'do the Math' ],
    //  [ 'role', 'front-end developer' ]
    // ]

## **那我们该如何使用它们？** ##

本文内容的目的是将这两个for语句“并排”进行学习比较，以便我们更加清楚的区分与了解它们。

**在这里分享一个最直接简单的区分方法：**  
1、for...in在迭代对象的可枚举字符串键属性对时使用。你知道\{ blah1: blah blah, blah2: blah blah blah \}。

但不是数组！！请记住，无论记录什么，都类似于记录数组的索引，但记录字符串，因此如果要记录/返回值，请确保使用obj\[key\]。

2、for...of在迭代可迭代对象时使用 ：如果String，Array，等。

下次当你在做一些需要迭代的事情时，或者只是做你的常规 Leetcode 练习，甚至在你的技术面试中，用for...of和for...in炫耀你新获得的知识。

最后，感谢你的阅读，编程快乐！

**学习更多技能**

**请点击下方公众号**

![84f40cc0fdb705cae9fedbd06dd5b85b.gif][]

![15e0dce2688999d821d112d6e6920e9d.png][]

![0fa98d347f70a06edc3d2281e684adbd.png][]

[75e7c8b6b6964b4f2389f4a0b5917583.png]: /images/20220829/76df9c18192049258b4b8c5b69af683e.png
[84f40cc0fdb705cae9fedbd06dd5b85b.gif]: /images/20220829/7e02d31894244c599711f35c5286b0d1.png
[15e0dce2688999d821d112d6e6920e9d.png]: /images/20220829/ac71144466f4412b8b3c27f8fd12bafe.png
[0fa98d347f70a06edc3d2281e684adbd.png]: /images/20220829/2a28d9883b664b6a9570484cc7dc9af1.png