請(qǐng)教大家一個(gè)問題：什么特性讓該編程語言更加優(yōu)秀?

個(gè)人見解：當(dāng)該特性可以組合多個(gè)其他語言特性時(shí)。

[[323625]]

JavaScript 中的for...of語句就是這種情況，可從ES2015開始使用。

for...of可以迭代數(shù)組，類似數(shù)組的對(duì)象以及通常所有可迭代的對(duì)象(map，set，DOM集合)。

接下我們通過事例來看看 for...of 一些有用的地方。

1. 數(shù)組的迭代

for...of的最常見應(yīng)用是對(duì)數(shù)組項(xiàng)進(jìn)行迭代。該循環(huán)可以很好且短暫地完成它，而無需其他變量來保持索引。

例如：

const products = ['橘子', '蘋果'] 
 
for (const product of products.entries()) { 
  console.log(product) 
} 
// "橘子" 
// "蘋果" 

for...of循環(huán)遍歷products，迭代的每項(xiàng)值分配給變量product。

數(shù)組方法 entries() 可以用于訪問迭代項(xiàng)的索引，該方法在每次迭代時(shí)返回一組鍵值對(duì)[index, item]。

const products = ['橘子', '蘋果'] 
 
for (const [index, product] of products.entries()) { 
  console.log(index, product) 
} 
// 0 "橘子" 
// 1 "蘋果" 

在每次迭代中，products.entries()返回一對(duì)索引和值，它們由const [index，product]表達(dá)式解構(gòu)。

(1) 就地解構(gòu)

首先，讓我們看一下 for...of 循環(huán)的語法：

for (LeftHandSideExpression of Expression) { 
  // statements 
} 

LeftHandSideExpression表達(dá)式可以替換為賦值表達(dá)式左側(cè)的任何內(nèi)容。

在上面的例子中，LeftHandSideExpression是一個(gè)變量聲明 const products，也可以是一個(gè)解構(gòu)表達(dá)式 const [index, product]。

接著，我們遍歷一系列對(duì)象，提取每個(gè)對(duì)象的屬性name ：

const persons = [ 
  { name: '前端小智' }, 
  { name: '王大冶' } 
] 
 
for (const { name } of persons) { 
  console.log(name) 
} 
 
// 前端小智 
// 王大冶 

循環(huán)for (const { name } of persons) 遍歷person數(shù)組的對(duì)象，同時(shí)也就地解構(gòu)( {name}) person對(duì)象的 name 屬性值。

2. 類似數(shù)組遍歷

for...of 除了可以遍歷對(duì)象外，還可以遍歷類似數(shù)組的對(duì)象。

arguments是函數(shù)體內(nèi)的特殊變量，表示包含函數(shù)的所有參數(shù)，arguments 也是一個(gè)類似數(shù)組對(duì)象。例如：

function sum() { 
  let sum = 0 
  for (const number of arguments) { 
    sum += number 
  } 
 
  return sum 
} 
 
sum(1, 2, 3) // 6 

3.可迭代的簡(jiǎn)要概述JavaScript中的可迭代對(duì)象是什么? 它是一個(gè)支持迭代協(xié)議的對(duì)象。

要檢查數(shù)據(jù)類型是否可迭代，可以配合Symbol.iterator方法。例如，下面的演示顯示了數(shù)組是可迭代的：

const array = [1, 2, 3] 
const iterator = array[Symbol.iterator]() 
iterator.next()  // {value: 1, done: false} 

for...of接受可迭代,這很棒，因?yàn)檫@樣，我們就可以遍歷字符和數(shù)據(jù)結(jié)構(gòu)(數(shù)組，類型化數(shù)組，集合，映射)等。

4. 字符串字符的遍歷

JavaScript 中的原始類型字符串是可迭代的。因此，我們可以輕松地遍歷字符串的字符。

const message = 'hello'; 
 
for (const character of message) { 
  console.log(character); 
} 
// 'h' 
// 'e' 
// 'l' 
// 'l' 
// 'o' 

message包含一個(gè)字符串值。由于message也是可迭代的，因此for...of循環(huán)遍歷message的字符。

5. Map 與 Set 迭代

Map是一個(gè)特殊的對(duì)象，它將一個(gè)鍵關(guān)聯(lián)到一個(gè)值。鍵可以是任何基本類型(通常是字符串，但也可以是數(shù)字等)

幸運(yùn)的是，Map也是可迭代的(在鍵/值對(duì)上進(jìn)行迭代)，所以使用for...of可以輕松地在所有鍵/值對(duì)上循環(huán)遍歷。

const names = new Map() 
names.set(1, 'one') 
names.set(2, 'two') 
 
for (const [numbe, name] of names) { 
  console.log(number, name) 
} 
 
// 1 "one" 
// 2 "two" 

for (const [number, name] of names)在names 鍵/值對(duì)映射上進(jìn)行迭代。

在每個(gè)循環(huán)中，迭代器都會(huì)返回一個(gè)數(shù)組[key，value]，并使用const [number，name]立即對(duì)這對(duì)數(shù)組進(jìn)行解構(gòu)。

同樣，以相同的方式可以遍歷Set的項(xiàng)：

const colors = new Set(['white', 'blue', 'red', 'white']); 
 
for (color of colors) { 
  console.log(color); 
} 
// 'white' 
// 'blue' 
// 'red' 

6. 遍歷普通 JavaScript 對(duì)象

遍歷普通 JS 對(duì)象的屬性/值對(duì)總是很痛苦的。

通常，我要先使用Object.keys()提取對(duì)象鍵，然后使用forEach()來遍歷鍵數(shù)組：

const person = { 
  name: '前端小智', 
  job: '前端分享者' 
} 
 
Object.keys(person).forEach(prop => { 
  console.log(prop, person[prop]) 
}) 
 
// name 前端小智 
// job 前端分享者 

幸運(yùn)的是，新的Object.entries()函數(shù)與for...of組合提供了一個(gè)不錯(cuò)的選擇：

const person = { 
  name: '前端小智', 
  job: '前端分享者' 
} 
 
for (const [prop, value] of Object.entries(person)) { 
  console.log(prop, value) 
} 
 
// name 前端小智 
// job 前端分享者 

Object.entries(person)返回一個(gè)鍵和值元組數(shù)組：[['name', 'John Smith'], ['job', 'agent']]。然后，對(duì)于for...of循環(huán)，遍歷元組，并將每個(gè)元組解構(gòu)const [prop，value]。

7. 遍歷 DOM 集合

你可能知道在 DOM 中使用HTMLCollection是多么令人沮喪。因?yàn)镠TMLCollection是一個(gè)類似數(shù)組的對(duì)象(而不是一個(gè)常規(guī)數(shù)組)，所以我們不能使用常規(guī)數(shù)組方法。

例如，每個(gè) DOM 元素的children屬性都是HTMLCollection。因此，由于for...of可以在類似數(shù)組的對(duì)象上進(jìn)行迭代，因此我們可以輕松地迭代子代：

const children = document.body.children; 
 
for (const child of children) { 
  console.log(child); // logs each child of <body> 
} 

此外，for...of可以遍歷NodeList集合(可迭代)。例如，函數(shù)document.querySelectorAll(query)返回一個(gè)NodeList。

const allImages = document.querySelectorAll('img'); 
 
for (const image of allImages) { 
  console.log(image); // log each image in the document 
} 

如果你想遍歷 DOM 中的不同種類的集合，那么for...of語句是一個(gè)不錯(cuò)的選擇。

8. 性能

在遍歷大數(shù)組時(shí)，for...of的速度可能比 for 要慢：

const a = [/* big array */]; 
for (let i = 0; i < a.length; i++) { 
  console.log(a[i]); 
} 

在每次迭代中調(diào)用迭代器比通過增加索引訪問該項(xiàng)目的開銷更大。但是，這種細(xì)微差別在使用大型陣列的應(yīng)用程序中以及性能至關(guān)重要的應(yīng)用程序中非常重要，這種情況很少發(fā)生。