Javascript中最基本的迭代方法是for循环。它需要三个表达式：变量声明、在每次迭代之前要计算的表达式以及在每次迭代结束时要计算的表达式。例如，这个for循环将console.log数组中的每个项。
const array = [‘a’, ‘b’, ‘c’, ‘d’];
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}
// Result: a, b, c, d
除了for循环之外，我们还可以使用另外两种for迭代方法：for..in和for..of。
for..in
for..in是一种迭代对象的“可枚举”属性的方法。因此，它适用于所有具有这些属性的对象(不仅是object())。 可枚举属性定义为可枚举值为true的对象的属性。从本质上讲，如果一个属性是可枚举的，它就是“可枚举的”。我们可以通过调用property.Enumerable来检查属性是否可枚举，它将返回true或false。 我们使用for..in循环与以下语法一起使用
for (variable in enumerable) {
// do stuff
}
例如，要循环遍历console.log此Object中的所有值，我们可以执行以下操作 -
const obj = {
a: 1,
b: 2,
c: 3,
d: 4
}
for (const key in obj) {
console.log( obj[key] )
}
for…in循环也将迭代继承的属性，只要它们是可枚举的属性。for…in迭代以任意顺序发生。因此，如果需要按照定义的顺序发生，则不应使用它。
for..in 和 Object
for..in方法为我们提供了循环对象键和值的最简单方法，因为对象不能访问数组所使用的forEach方法。
for..in 和 Array
数组中值的“键”是数字索引。因此，这些索引本质上只是可枚举的属性，就像Object键一样，只是它们是整数而不是字符串。 这意味着我们可以通过使用for..in来检索数组中的索引来循环数组中的所有值。
const array = [‘a’, ‘b’, ‘c’, ‘d’];
for (const index in array) {
console.log(array[index])
}
// Result: a, b, c, d
但是，一般建议不要将for..in与数组一起使用，特别是因为不能保证迭代按顺序进行，这通常对数组很重要。
for..in 和 String
字符串中的每个字符都有一个索引。因此，与Array类似，索引是可枚举的属性，恰好是整数。
const string = ‘Ire Aderinokun’;
for (const index in string) {
console.log(string[index])
}
// Result: I, r, e, , A, d, e, r, i, n, o, k, u, n
for..of
for..of是在ES2015中引入的一种方法，用于迭代“iterable collections”。这些对象具有[symbol.iterator]属性。 [symbol.iterator]属性允许我们通过调用[symbol.iterator]().next()方法来检索集合中的下一项，从而手动迭代集合。
const array = [‘a’,’b’,’c’, ‘d’];
const iterator = array[Symbol.iterator]();
console.log( iterator.next().value )
console.log( iterator.next().value )
console.log( iterator.next().value )
console.log( iterator.next().value )
// Result: a, b, c, d
for..of语法实质上是围绕[symbol.iterator]的包装，以创建循环。它使用以下语法-
for (variable of iterable) {
// do stuff
}
for..of 和 Object
for..of循环不适用于对象，因为他们不是“迭代”，因此不具有[Symbol.iterator]属性。
for..of 和 Array/String
for..of循环使用数组和字符串的效果很好，因为它们是可迭代。此这种方法是一种更可靠的循环遍历数组的方法。
const array = [‘a’, ‘b’, ‘c’, ‘d’];
for (const item of array) {
console.log(item)
}
// Result: a, b, c, d
const string = ‘Ire Aderinokun’;
for (const character of string) {
console.log(character)
}
// Result: I, r, e, , A, d, e, r, i, n, o, k, u, n
for..of 和 NodeLists
最后，另一个非常有用的案例for..of是迭代NodeLists。当我们在文档中查询一组元素时，返回的是NodeList，而不是Array。这意味着我们不能使用forEach等数组方法对列表进行迭代。 为了解决这个问题，我们可以使用Array.from()或者使用for..of循环将其转换为数组，这不仅仅适用于数组。
const elements = document.querySelectorAll(‘.foo’);
for (const element of elements) {
element.addEventListener(‘click’, doSomething);
}
对比
for..in
for..of
适用于
可枚举属性
无法检索的集合
与Object一起使用?
Yes
No
与Array一起使用?
Yes, 不建议
Yes
与String一起使用?
Yes, 不建议
Yes
