几个例子说明for...of循环在JS小时是必不可少的。自ES2015以来可用的JavaScript中的for...of语句就是这种情况。for...of可以遍历数组、类数组对象，以及通常所有可迭代对象（映射、集合、DOM集合）。接下来我们通过例子来看看for...of的一些有用的地方。1.数组迭代for...of最常见的应用是迭代数组项。循环很好地、简单地完成了它，没有额外的变量来保存索引。例如：constproducts=['orange','apple']for(constproductofproducts.entries()){console.log(product)}//"orange"//"apple"for...of循环遍历产品，迭代每个值都分配给可变产品。数组方法entries()可用于访问迭代项的索引，它在每次迭代时返回一组键值对[index,item]。constproducts=['orange','apple']for(const[index,product]ofproducts.entries()){console.log(index,product)}//0"orange"//1"apple"在每个In迭代，products.entries()返回一对索引和值，由const[index,product]表达式解构。(1)就地解构首先，我们看一下for...of循环的语法：for(LeftHandSideExpressionofExpression){//statements}LeftHandSideExpression表达式可以用赋值表达式左边的任何内容替换。在上面的例子中，LeftHandSideExpression是一个变量声明constproducts，它也可以是一个解构表达式const[index,product]。接下来，我们遍历一系列对象，提取每个对象的属性名：log(name)}//前端小智//王大爷循环for(const{name}ofpersons)遍历person数组中的对象，解构({name})中person对象的name属性值地方。2.类数组遍历for...of除了遍历对象，还可以遍历类数组对象。arguments是函数体中的一个特殊变量，表示它包含了函数的所有参数，arguments也是一个类数组对象。例如：functionsum(){letsum=0for(constnumberofarguments){sum+=number}returnsum}sum(1,2,3)//63。可迭代对象的简要概述什么是JavaScript中的可迭代对象？它是一个支持迭代协议的对象。要检查数据类型是否可迭代，可以使用Symbol.iterator方法。例如，下面的演示展示了数组是可迭代的：constarray=[1,2,3]constiterator=array[Symbol.iterator]()iterator.next()//{value:1,done:false}for。..of接受迭代，这很棒，因为这样我们就可以迭代字符和数据结构（数组、类型化数组、集合、映射）等。4.字符串字符的遍历JavaScript中的原始类型字符串是可迭代的。因此，我们可以轻松地遍历字符串的字符。constmessage='hello';for(constcharacterofmessage){console.log(character);}//'h'//'e'//'l'//'l'//'o'消息包含一个字符串值。由于消息也是可迭代的，因此for...of循环迭代消息的字符。5.Map和Set迭代Map是一种将键与值相关联的特殊对象。键可以是任何原始类型（通常是字符串，但也可以是数字等）幸运的是，Map也是可迭代的（迭代键/值对），所以使用for...of可以很容易地在Loopoverall中完成键/值对。constnames=newMap()names.set(1,'one')names.set(2,'two')for(const[number,name]ofnames){console.log(number,name)}//1"one"//2"two"for(const[number,name]ofnames)遍历名称键/值对映射。在每个循环中，迭代器返回一个数组[key,value]，然后使用const[number,name]立即解构该对。同理，可以用同样的方式遍历Set的项：constcolors=newSet(['white','blue','red','white']);for(colorofcolors){console.log(color);}//'white'//'blue'//'red'6.遍历纯JavaScript对象遍历纯JS对象的属性/值对总是很痛苦。通常，我先使用Object.keys()提取对象key，然后使用forEach()遍历key数组：constperson={name:'前端小智',job:'前端分享者'}Object.keys(person).forEach(prop=>{console.log(prop,person[prop])})//name前端小智//job前端分享者好在新的Object.entries()函数是同for...of的组合提供了一个很好的选择：constperson={name:'前端小智',job:'前端分享者'}for(const[prop,value]ofObject.entries(person)){console.log(prop,value)}//姓名前端小智//职位前端分享者Object.entries(person)返回键值元组数组：[['name','JohnSmith'],['工作','代理']]。然后，对于for...of循环，遍历元组，并解构每个元组const[prop,value]。7.遍历DOM集合您可能知道在DOM中使用HTMLCollection是多么令人沮丧。因为HTMLCollection是一个类数组对象（不是常规数组），所以我们不能使用常规数组方法。例如，每个DOM元素的children属性是一个HTMLCollection。所以因为for...of可以遍历类似数组的对象，我们可以轻松地遍历子对象：constchildren=document.body.children;for(constchildofchildren){console.log(child);//logseachchildof
}另外，for...of可以遍历NodeList集合（可迭代）。例如，函数document.querySelectorAll(query)返回一个NodeList。installImages=document.querySelectorAll('img');for(constimageofallImages){console.log(image);//logeachimageinthedocument}如果你想遍历DOM中不同种类的集合，for...of语句是一个很好的选择一个选择。8.性能当遍历一个大数组时，for...of可能比for慢：consta=[/*bigarray*/];for(leti=0;i