数据结构|for in / for of / forEach 循环前端|vue.js|javascript

- 1. for 循环
- 2. for...in 循环
- 3. forEach 循环
- 4. for...of循环
- 5. const 在 for in 或者for of 中的使用

1. for 循环 for 循环的最大缺点是需要跟踪计数器和退出条件。
虽然 for 循环在循环数组时的确具有优势，但是某些数据结构不是数组，因此并非始终适合使用 loop 循环。

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; for (let i = 0; i < digits.length; i++) { console.log(digits[i]); }

2. for…in 循环依然需要使用 index 来访问数组的值
当你需要向数组中添加额外的方法（或另一个对象）时，for…in 循环会带来很大的麻烦。因为 for…in 循环循环访问所有可枚举的属性，意味着如果向数组的原型中添加任何其他属性，这些属性也会出现在循环中。

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; for (const index in digits) { console.log(digits[index]); }

3. forEach 循环 forEach 循环是另一种形式的 JavaScript 循环。但是，forEach() 实际上是数组方法，因此只能用在数组中。也无法停止或退出 forEach 循环。如果希望你的循环中出现这种行为，则需要使用基本的 for 循环。
4. for…of循环 【数据结构|for in / for of / forEach 循环】for…of循环是最新添加到 JavaScript 循环系列中的循环。
它结合了其兄弟循环形式 for 循环和 for…in 循环的优势，可以循环任何可迭代（也就是遵守可迭代协议）类型的数据。默认情况下，包含以下数据类型：String、Array、Map 和 Set，注意不包含 Object 数据类型（即 {}），默认情况下，对象不可迭代

for…of 循环用于循环访问任何可迭代的数据类型
for…of 循环的编写方式和 for…in 循环的基本一样，只是将 in 替换为 of，可以忽略索引
for…of 循环解决了 for 和 for…in 循环的不足之处，你可以随时停止或退出 for…of 循环
不用担心向对象中添加新的属性。for…of 循环将只循环访问对象中的值。

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; for (const digit of digits) { console.log(digit); }

5. const 在 for in 或者for of 中的使用 const声明的变量在一个块级作用域中是不能够重新赋值。

for循环当中使用const会报错
在for of或者for in当中使用就不会产生错误

原因：for in 和for of它们两个都是一种严格的迭代语句，对于对象中的每一个属性值，有一个指定的语句块被执行。也就是每一次循环，都会产生一个块级作用域来完成每个变量的行为；
然而for循环并不会遍历对象的属性，每一次循环都是在同个块级作用域中进行，使用const声明就会报错。所以在for in或者for of当中，推荐使用const来确保访问到的属性值不会被后续语句所改变。