JavaScript中的for...of循环

一、jsforof与forin的用法和区别

在JavaScript中，有两种常见的遍历数组元素的方式：for...of循环和for...in循环。

for...in循环用于遍历对象中的属性，而for...of循环用于遍历可迭代对象中的值。可迭代对象指的是具有Symbol.iterator属性的对象。

// for...in循环示例
const obj = {
  a: 1,
  b: 2,
  c: 3
};

for(let prop in obj) {
  console.log(prop + ': ' + obj[prop]);
}
//输出结果：
//a: 1
//b: 2
//c: 3

// for...of循环示例
const arr = [1, 2, 3];

for(let value of arr) {
  console.log(value);
}
//输出结果：
//1
//2
//3

可以看到，for...in循环遍历的是对象的属性，for...of循环遍历的是值。

二、jsforof的用法与区别

除了遍历数组，for...of循环还可以遍历其他类型的可迭代对象，例如字符串、Set和Map等。

// 遍历字符串
const str = 'hello';

for(let char of str) {
  console.log(char);
}
//输出结果：h e l l o

// 遍历Set
const set = new Set([1, 2, 3]);

for(let value of set) {
  console.log(value);
}
//输出结果：1 2 3

// 遍历Map
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

for(let entry of map) {
  console.log(entry);
}
//输出结果：['a', 1] ['b', 2] ['c', 3]

需要注意的是，for...of循环不仅可以遍历数组等自带迭代器的对象，还可以遍历实现了迭代器协议的对象。

// 自定义迭代器
const obj = {
  data: ['a', 'b', 'c'],
  [Symbol.iterator]: function() {
    let index = 0;

    return {
      next: () => {
        if(index < this.data.length) {
          return { value: this.data[index++], done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
};

for(let value of obj) {
  console.log(value);
}
//输出结果：a b c

需要注意的是，for...of循环不仅可以遍历数组等自带迭代器的对象，还可以遍历实现了迭代器协议的对象。

三、jsforof有什么用

使用for...of循环可以更加简洁地遍历数组和其他可迭代对象，避免了for循环中的索引值管理和越界问题。

同时，for...of循环还可以遍历实现了迭代器协议的对象，使得程序的可扩展性更好。

总之，for...of循环是现代JavaScript开发中一个非常实用的功能。