for-in 和 for-of的区别

在我们学习的过程中，经常使用for循环来作为逻辑代码的基础语句，但是对于for-in和for-of来说却少之又少只记得他们用来对象或数组的遍历，那么他们的区别究竟是什么呢？下面我们就细细研究一下！

for-in语句

首先我们要知道的是，for-in更适合遍历对象。

for-in的语法如下

for{property in expression} statement

下面是利用for-in语句遍历对象的例子

const obj = { a: 1, b: 2, c: 3 };

for (let prop in obj) {
  console.log(prop, obj[prop]);
}
// Output:
// a 1
// b 2
// c 3

ECMAScript中对象的属性是无序的，因此for-in语句不能保证返回对象属性的顺序，换句话说，所有可枚举的属性都会返回一次，但返回的顺序可能会因浏览器而异。

那么为什么说for-in更适合遍历对象而不是数组呢？先上一个例子

虽然 for-in循环的工作原理是遍历对象的属性名，而数组的索引被视为属性名。然而，数组也有一些其他的属性，如length和其他可能被添加到数组对象中的属性，这些属性也会被for-in循环遍历到，从而导致不可预料的结果。

const arr = [1, 2, 3];

for (let index in arr) {
  console.log(index, arr[index]);
}
// Output:
// 0 1
// 1 2
// 2 3
// length 3

在上面的示例中，for-in循环遍历了数组的所有索引，同时也遍历了数组的length属性。这并不是我们所期望的结果。而相对于for-of则更为适合遍历数组

for-of语句

for-of语句可用于遍历数组。

for-of的语法如下：

for{property of expression} statement

下面是利用for-of语句遍历对象的例子

const arr = [1, 2, 3];

for (let element of arr) {
  console.log(element);
}
// Output:
// 1
// 2
// 3

for-of循环也可以与if语句一起使用，用于控制循环的流程。例如：break、continue

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

for (let element of arr) {
  if (element === 3) {
    continue; // 跳过值为 3 的元素
  }
  if (element === 5) {
    break; // 终止循环
  }
  console.log(element);
}
// Output:
// 1
// 2
// 4

总结

for-in和for-of 是 JavaScript 中两个不同的循环语句，它们的区别在于它们迭代的对象和迭代的方式。

for-in更适合遍历对象，for-of语句适合于遍历数组。