for...of的使用

原创于 2024-03-11 19:05:54 发布 · 436 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言 #es6 #ecmascript

本文详细介绍了JavaScript中for...of循环的使用，比较了其与传统for循环的区别，强调了在处理数组、字符串、Set和Map等可遍历对象时的简洁性，并探讨了for...of在遍历过程中的索引获取和对象遍历限制。

for…of的使用

正常使用for循环遍历，想要除去arr中的2时，代码不简洁

var arr = [1, 2, 3, 4]

  for (var i = 0; i < arr.length; i++) {

  	 if (i == 2) {

     continue

   }

   console.log(arr[i]);

  }

使用箭头函数时，不能使用continue结束循环

arr.forEach(item => {

     if (item = 2) {

       continue  //使用continue会报错

     }

    console.log(item);

  })

字符串类型，for…in不能获取索引

for (let key in arr) {

    console.log(key);

  }

  console.log(...arr); //1 2 3 4

for…of中，可以使用continue，代码更简洁

for (let key of arr) {

    if (key == 2) {

      continue

    }

    console.log(key); // 1 3 4

  }

for…of可以获得索引

for (let key of arr.keys()) {

    console.log(key); // 0 1 2 3

  }

for…of可以取得索引和值

  for (let [key, value] of arr.entries()) {

    console.log(key, value); // 0 1     1 2     2 3    3 4
 
  }

for…of可以逐个输出字符串中的字符

 var str = '我们都是好孩子'

  for (let key of str) {

    console.log(key) // 我 们 都 是 好 孩 子

  }

for…of 不可以 遍历对象

  var obj = {

    name: 'zs',

    age: 18

  }

  // obj is not iterable

  for (let key of obj) {

    console.log(key);

  }

  // 可遍历对象：可以被for..of遍历的对象叫做可遍历对象，数组，字符串，伪数组，Set, Map

可遍历对象：

可以被for…of遍历的对象叫做可遍历对象，数组，字符串，伪数组，Set, Map