es6中for of怎么用

ES6中for of怎么用

在ES6（ECMAScript 2015）中，for...of 循環是一種新的迭代語法，用于遍歷可迭代對象（如數組、字符串、Map、Set等）。與傳統的 for 循環和 for...in 循環相比，for...of 提供了更簡潔、直觀的方式來遍歷集合中的元素。本文將詳細介紹 for...of 的用法及其與其它循環語法的區別。

1. for...of 的基本語法

for...of 循環的基本語法如下：

for (variable of iterable) {
  // 循環體
}

• variable：每次迭代時，variable 會被賦值為 iterable 中的當前元素。
• iterable：一個可迭代對象，如數組、字符串、Map、Set等。

示例：遍歷數組

const arr = [1, 2, 3, 4, 5];

for (const item of arr) {
  console.log(item);
}

輸出：

1
2
3
4
5

在這個例子中，for...of 循環遍歷了數組 arr 中的每一個元素，并將其賦值給 item，然后在循環體中打印出來。

2. for...of 與 for...in 的區別

for...of 和 for...in 都是用于遍歷的循環語法，但它們的行為有所不同。

• for...in：遍歷對象的可枚舉屬性（包括原型鏈上的屬性），通常用于遍歷對象的鍵（key）。
• for...of：遍歷可迭代對象的值（value），適用于數組、字符串、Map、Set等。

示例：for...in 遍歷數組

const arr = [1, 2, 3, 4, 5];

for (const index in arr) {
  console.log(index);
}

輸出：

0
1
2
3
4

在這個例子中，for...in 遍歷的是數組的索引（index），而不是數組的值。

示例：for...of 遍歷對象

const obj = { a: 1, b: 2, c: 3 };

for (const key of obj) {
  console.log(key);
}

輸出：

TypeError: obj is not iterable

在這個例子中，for...of 無法直接遍歷普通對象，因為普通對象不是可迭代對象。如果需要遍歷對象的屬性，可以使用 for...in 或 Object.keys() 等方法。

3. for...of 遍歷字符串

for...of 也可以用于遍歷字符串中的字符。

示例：遍歷字符串

const str = "hello";

for (const char of str) {
  console.log(char);
}

輸出：

h
e
l
l
o

在這個例子中，for...of 遍歷了字符串 str 中的每一個字符。

4. for...of 遍歷 Map 和 Set

for...of 還可以用于遍歷 Map 和 Set 等數據結構。

示例：遍歷 Map

const map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);

for (const [key, value] of map) {
  console.log(key, value);
}

輸出：

a 1
b 2
c 3

在這個例子中，for...of 遍歷了 Map 中的每一個鍵值對。

示例：遍歷 Set

const set = new Set([1, 2, 3, 4, 5]);

for (const item of set) {
  console.log(item);
}

輸出：

1
2
3
4
5

在這個例子中，for...of 遍歷了 Set 中的每一個元素。

5. for...of 與迭代器

for...of 循環的背后是迭代器（Iterator）機制。任何實現了 [Symbol.iterator] 方法的對象都可以被 for...of 遍歷。

示例：自定義可迭代對象

const myIterable = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const item of myIterable) {
  console.log(item);
}

輸出：

1
2
3

在這個例子中，myIterable 對象實現了 [Symbol.iterator] 方法，使其成為一個可迭代對象，因此可以使用 for...of 進行遍歷。

6. for...of 的優勢

• 簡潔直觀：for...of 語法簡潔，直接遍歷集合中的值，不需要手動處理索引或鍵。
• 支持多種數據結構：for...of 不僅適用于數組，還適用于字符串、Map、Set 等可迭代對象。
• 避免 for...in 的陷阱：for...in 會遍歷對象的原型鏈上的屬性，而 for...of 只遍歷集合中的值，避免了不必要的麻煩。

7. 總結

for...of 是 ES6 中引入的一種強大的循環語法，適用于遍歷數組、字符串、Map、Set 等可迭代對象。與 for...in 相比，for...of 更加簡潔直觀，且避免了遍歷對象屬性時的潛在問題。掌握 for...of 的使用，可以讓你在處理集合數據時更加得心應手。

希望本文能幫助你更好地理解和使用 for...of 循環。如果你有任何問題或建議，歡迎在評論區留言討論。