通过几个事例，就可以说明 for...of 循环在 JS 是不可或缺

请教大家一个问题：什么特性让该编程语言更加优秀?

个人见解：当该特性可以组合多个其他语言特性时。

JavaScript 中的for...of语句就是这种情况，可从ES2015开始使用。

for...of可以迭代数组，类似数组的对象以及通常所有可迭代的对象（map，set，DOM集合）。

接下我们通过事例来看看 for...of 一些有用的地方。

1. 数组的迭代

for...of的最常见应用是对数组项进行迭代。该循环可以很好且短暂地完成它，而无需其他变量来保持索引。

例如：

const products = ['橘子', '苹果']

for (const product of products.entries()) {
  console.log(product)
}
// "橘子"
// "苹果"

for...of循环遍历products，迭代的每项值分配给变量product。

数组方法 entries() 可以用于访问迭代项的索引，该方法在每次迭代时返回一组键值对[index, item]。

const products = ['橘子', '苹果']

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

在每次迭代中，products.entries()返回一对索引和值，它们由const [index，product]表达式解构。

1.1 就地解构

首先，让我们看一下 for...of 循环的语法：

for (LeftHandSideExpression of Expression) {
  // statements
}

LeftHandSideExpression表达式可以替换为赋值表达式左侧的任何内容。

在上面的例子中，LeftHandSideExpression是一个变量声明 const products，也可以是一个解构表达式 const [index, product]。

接着，我们遍历一系列对象，提取每个对象的属性name ：

const persons = [
  { name: '前端小智' },
  { name: '王大冶' }
]

for (const { name } of persons) {
  console.log(name)
}

// 前端小智
// 王大冶

循环for (const { name } of persons) 遍历person数组的对象，同时也就地解构( {name}) person对象的 name 属性值。

2. 类似数组遍历

for...of 除了可以遍历对象外，还可以遍历类似数组的对象。

arguments是函数体内的特殊变量，表示包含函数的所有参数，arguments 也是一个类似数组对象。例如：

function sum() {
  let sum = 0
  for (const number of arguments) {
    sum += number
  }

  return sum
}

sum(1, 2, 3) // 6

3.可迭代的简要概述

JavaScript中的可迭代对象是什么? 它是一个支持迭代协议的对象。

要检查数据类型是否可迭代，可以配合Symbol.iterator方法。例如，下面的演示显示了数组是可迭代的：

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

for...of接受可迭代,这很棒，因为这样，我们就可以遍历字符和数据结构（数组，类型化数组，集合，映射）等。

4. 字符串字符的遍历

JavaScript 中的原始类型字符串是可迭代的。因此，我们可以轻松地遍历字符串的字符。

const message = 'hello';

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

message包含一个字符串值。由于message也是可迭代的，因此for...of循环遍历message的字符。

5. Map 与 Set 迭代

Map是一个特殊的对象，它将一个键关联到一个值。键可以是任何基本类型(通常是字符串，但也可以是数字等)

幸运的是，Map也是可迭代的（在键/值对上进行迭代），所以使用for...of可以轻松地在所有键/值对上循环遍历。

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 键/值对映射上进行迭代。

在每个循环中，迭代器都会返回一个数组[key，value]，并使用const [number，name]立即对这对数组进行解构。

同样，以相同的方式可以遍历Set的项：

const colors = new Set(['white', 'blue', 'red', 'white']);

for (color of colors) {
  console.log(color);
}
// 'white'
// 'blue'
// 'red'

6. 遍历普通 JavaScript 对象

遍历普通 JS 对象的属性/值对总是很痛苦的。

通常，我要先使用Object.keys()提取对象键，然后使用forEach()来遍历键数组：

const person = {
  name: '前端小智',
  job: '前端分享者'
}

Object.keys(person).forEach(prop => {
  console.log(prop, person[prop])
})

// name 前端小智
// job 前端分享者

幸运的是，新的Object.entries()函数与for...of组合提供了一个不错的选择：

const person = {
  name: '前端小智',
  job: '前端分享者'
}

for (const [prop, value] of Object.entries(person)) {
  console.log(prop, value)
}

// name 前端小智
// job 前端分享者

Object.entries(person)返回一个键和值元组数组：[['name', 'John Smith'], ['job', 'agent']]。然后，对于for...of循环，遍历元组，并将每个元组解构const [prop，value]。

7.遍历 DOM 集合

你可能知道在 DOM 中使用HTMLCollection是多么令人沮丧。因为HTMLCollection是一个类似数组的对象(而不是一个常规数组)，所以我们不能使用常规数组方法。

例如，每个 DOM 元素的children属性都是HTMLCollection。因此，由于for...of可以在类似数组的对象上进行迭代，因此我们可以轻松地迭代子代：

const children = document.body.children;

for (const child of children) {
  console.log(child); // logs each child of 
}

此外，for...of可以遍历NodeList集合（可迭代）。例如，函数document.querySelectorAll(query)返回一个NodeList。

const allImages = document.querySelectorAll('img');

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

如果你想遍历 DOM 中的不同种类的集合，那么for...of语句是一个不错的选择。

8. 性能

在遍历大数组时，for...of的速度可能比 for 要慢：

const a = [/* big array */];
for (let i = 0; i