英文 | https://www.javascripttutorial.net

翻譯 | 楊小愛(ài)

在今天的教程中，我們將學(xué)習(xí)如何使用 JavaScript for...of 語(yǔ)句來(lái)迭代可迭代對(duì)象。

JavaScript for...of 循環(huán)簡(jiǎn)介

ES6 引入了一個(gè)新的 for...of 語(yǔ)句，它遍歷一個(gè)可迭代的對(duì)象，例如：

內(nèi)置Array , String , Map , Set , ...
類(lèi)似數(shù)組的對(duì)象，例如參數(shù)或 NodeList
實(shí)現(xiàn)迭代器協(xié)議的用戶(hù)定義對(duì)象。

下面說(shuō)明了 for...of 的語(yǔ)法：


for (variable of iterable) {   // ...

variable

在每次迭代中，將可迭代對(duì)象的屬性分配給variable。我們可以使用 var、let 或 const 來(lái)聲明變量。

iterable

可迭代對(duì)象是其可迭代屬性被迭代的對(duì)象。

JavaScript for of 循環(huán)示例

讓我們看一些使用 for...of 循環(huán)的例子。

1) 遍歷數(shù)組

下面的例子展示了如何使用 for...of 來(lái)遍歷數(shù)組的元素：


let scores = [80, 90, 70];
for (let score of scores) {    score = score + 5;    console.log(score);

輸出：

在此示例中，for...of 迭代了 score 數(shù)組的每個(gè)元素。它在每次迭代中將scores數(shù)組的元素分配給變量score。

如果我們不改變循環(huán)內(nèi)的變量，我們應(yīng)該使用 const 關(guān)鍵字而不是 let 關(guān)鍵字，如下所示：


let scores = [80, 90, 70];
for (const score of scores) {    console.log(score);}

輸出：

要訪(fǎng)問(wèn)循環(huán)內(nèi)數(shù)組元素的索引，可以使用 for...of 語(yǔ)句和數(shù)組的 entries() 方法。

array.entries() 方法在每次迭代中返回一對(duì) [index, element]。例如：


let colors = ['Red', 'Green', 'Blue'];
for (const [index, color] of colors.entries()) {    console.log(`${color} is at index ${index}`);}

輸出：


Red is at index 0Green is at index 1Blue is at index 2

在此示例中，我們使用數(shù)組解構(gòu)將 entry() 方法的結(jié)果分配給每次迭代中的 index 和 color 變量：


const [index, color] of colors.entries()

2) 使用 for...of 就地對(duì)象解構(gòu)

考慮以下示例：


const ratings = [    {user: 'John',score: 3},    {user: 'Jane',score: 4},    {user: 'David',score: 5},    {user: 'Peter',score: 2},];
let sum = 0;for (const {score} of ratings) {    sum += score;}
console.log(`Total scores: ${sum}`); // 14

輸出：


Total scores: 14

程序是怎么運(yùn)行的

ratings是一個(gè)對(duì)象數(shù)組。每個(gè)對(duì)象都有兩個(gè)屬性 user 和 score。
for...of 遍歷評(píng)級(jí)數(shù)組并計(jì)算所有對(duì)象的總分。
ratings的表達(dá)式 const {score} 使用對(duì)象解構(gòu)，將當(dāng)前迭代元素的 score 屬性分配給 score 變量。

3) 遍歷字符串

以下示例使用 for...of 循環(huán)遍歷字符串的字符。


let str = 'abc';for (let c of str) {    console.log(c);}

輸出：

abc

4) 迭代 Map 對(duì)象

以下示例說(shuō)明了如何使用 for...of 語(yǔ)句來(lái)迭代Map對(duì)象。


let colors = new Map();
colors.set('red', '#ff0000');colors.set('green', '#00ff00');colors.set('blue', '#0000ff');
for (let color of colors) {    console.log(color);}

輸出：


[ 'red', '#ff0000' ][ 'green', '#00ff00' ][ 'blue', '#0000ff' ]

5) 迭代set對(duì)象

下面的例子展示了如何使用 for...of 循環(huán)遍歷一個(gè)set對(duì)象：


let nums = new Set([1, 2, 3]);
for (let num of nums) {    console.log(num);}

for...of 與 for...in的區(qū)別

for...in 遍歷對(duì)象的所有可枚舉屬性。它不會(huì)遍歷集合，例如 Array、Map 或 Set。

for...of 迭代一個(gè)集合，而不是一個(gè)對(duì)象。事實(shí)上，for...of 迭代任何具有 [Symbol.iterator] 屬性的集合元素。

以下示例說(shuō)明了 for...of 和 for...in 之間的區(qū)別。


let scores = [10,20,30];scores.message = 'Hi';
console.log("for...in:");for (let score in scores) {  console.log(score); }
console.log('for...of:');for (let score of scores) {  console.log(score);}

輸出：


for...in:012messagefor...of:102030

在此示例中，for...in 語(yǔ)句迭代了 scores 數(shù)組的屬性：

for...in:012message

而 for...of 遍歷數(shù)組的元素：


for...of:102030

總結(jié)

使用 for...of 循環(huán)遍歷可迭代對(duì)象的元素。

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

【ES6 教程】第一章 新的ES6語(yǔ)法08— for…of 循環(huán)

variable

2) 使用 for...of 就地對(duì)象解構(gòu)

4) 迭代 Map 對(duì)象

學(xué)習(xí)更多技能請(qǐng)點(diǎn)擊下方公眾號(hào)

【ES6 教程】第一章新的ES6語(yǔ)法08— for…of 循環(huán)

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)