for in / for of / forEach 循环

目录

    • 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…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来确保访问到的属性值不会被后续语句所改变。

你可能感兴趣的:(数据结构,javascript,前端,vue.js)