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開發中一個非常實用的功能。