For-Of 循环与 For 循环

Question

这两个是相同的还是可以互换的？

在哪些用例中有人会选择其中之一？

for(let i of array){some code}

for(let i = 0; i < array.length; i++){some code}

示例

Complete the solution so that the function will break up camel casing, using a space between words.

solution("camelCasing") == "camel Casing"

如果我们使用这个示例，除了性能优势（如果有的话），为什么有人会在另一个循环上使用一个循环？

如果还有其他 examples/instances 那就太好了。

Answer 1

一些背景知识来解释你的问题：

在Javascript中，对象（其中有数组）以键-值对存储属性。这意味着每个分配的值都有一个键（属性名称）来访问它。例如在

person[name] = 'Tom'

person是对象，name是键，'Tom'是对应的值。

数组使用索引（即数字）作为键：

array[5] = 10

现在，请在下面的解释中牢记这一点。

让我们从传统的for循环开始:

for(let i = 0; i < array.length; i++) {...}

这种遍历数组的方法是最古老的方法（只要您不使用 while 循环）您会发现用几乎所有（命令式）编程语言编写 for 循环的相应方法。您会注意到，它的工作方式非常明确。例如。您可以将 break-condition i < array.length 更改为其他内容（例如 i < array.length-1 用于跳过最后一个位置），或步骤 i++ （例如i+=2)，或从不同的索引开始（例如 let i = 5）。如果需要，您可以向后而不是向前迭代数组。几乎任何你可以在另一个 for 循环中做的事情，你也可以在这种循环中做，如果你知道怎么做的话。

在方括号 {...} 内，您可以使用 i 作为 key 来访问数组 values

现在这一切都非常强大和漂亮，但每次编写都会变得很麻烦，特别是如果在大多数情况下您只想迭代一个数组。但幸运的是我们有 for-in:

For-in 将检索您自己设置的所有 keys。使用数组，您可以使用它来实现与上面使用

相同的结果

for(let i in array) {...}

但是请注意，for-in 不仅会为您提供数组中的数字键。它也适用于您为任何对象设置的其他键：

let object = {
    key1 : 'value',
    key2 : 'value'
}

for(let i in object) {
    console.log(i)
}

将注销 'key1' 和 'key2'（是的，这里的键也是字符串）。

要更准确地描述它会为您提供哪些键，请查看下面的 link。

你什么时候会用for-in？每当您想为数组的每个元素/（几乎）对象的每个属性调用一次代码时。例如。当您想将数组中的所有值递增 1 时。什么时候不使用 for-in？如果您需要对遍历数组的顺序进行更精细的控制，或者您不想命中数组的所有元素，但只是每个 second/third.

，请不要使用它

关于 for-in 循环的优秀资源，我推荐 Mozilla Developer Network

那么，什么是 for-of 循环？

For-of 循环在句法上（即您编写它们的方式）与 for-in 循环非常相似：

for(let v of array) {...}

然而，一方面，它们只适用于所谓的 iterable 对象（数组是可迭代的）。其次，您只能获得值。他们不会再给你任何钥匙了！

let array = ['a', 'b', 'c']
for(let v of array) {
    console.log(v)
}

记录 'a'、'b' 和 'c'。你不会再知道这些值有什么键了！

那么，什么时候使用这些？每次你只需要值而不关心键。例如。如果您只想打印值。什么时候不使用它们？如果你想交换数组的元素，如果你想颠倒顺序。您甚至不能将值递增 1 并将它们存储回数组中，因为为此，您需要知道它们对应的键。

有关 for-in 循环的更多信息以及可迭代的实际含义，我再次推荐 MDN

Answer 2

您必须考虑的唯一主要区别是

假设您想从特定索引开始循环，您可以使用传统的 for 循环而不是使用 for...of.

您无法本地访问数组元素的索引。您需要寻找解决方法来实现此目的。

  //Cannot access indices
  for(const num of [11,22,33,44,55]){
     console.log(num);
  }


  //Workaround
  for(const [index, num] of [11,22,33,44,55].entries()){
     console.log(num, index);
  }

For-Of 循环与 For 循环

For-Of Loop vs. For Loop

javascript

arrays

string

for-loop

for-of-loop