通过几个例子可以看出，for...of循环在JS中是不可或缺的/github.com/qq44924588...已经收录，更多往期好评文章已经归类，还有我的很多文档和教程资料也整理好了。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。我想问你一个问题：什么特性让这门编程语言变得更好？个人意见：当这个特性可以结合多个其他语言的特性。自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循环遍历products，迭代的每个值都赋值给变量product。数组方法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.1就地解构首先，让我们看一下for...of循环的语法：for(LeftHandSideExpressionofExpression){//statements}LeftHandSideExpression表达式可以替换为赋值表达式左侧的任何内容。在上面的例子中，LeftHandSideExpression是一个变量声明constproducts，它也可以是一个解构表达式const[index,product]。接下来，我们遍历一系列对象，提取每个对象的属性名称：{console.log(name)}//前端小智//王大爷循环for(const{name}ofpersons)遍历person数组中的对象，解构({name})的name属性值人物对象到位。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。2.类数组遍历for...of除了遍历对象，还可以遍历类数组对象。arguments是函数体中的一个特殊变量，表示它包含了函数的所有参数，arguments也是一个类数组对象。例如：functionsum(){letsum=0for(constnumberofarguments){sum+=number}returnsum}sum(1,2,3)//63.iterables简要概述JavaScript中的Iterableobjects是什么它？它是一个支持迭代协议的对象。要检查数据类型是否可迭代，可以使用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...的组合提供了一个很好的选择：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);//记录
的每个孩子}此外，for...of可以遍历NodeList集合（可迭代）。例如，函数document.querySelectorAll(query)返回一个NodeList。constallImages=document.querySelectorAll('img');for(constimageofallImages){console.log(image);//记录文档中的每张图片}如果你想遍历DOM中不同种类的集合，那么对于...of语句是一个不错的选择。8.性能当遍历一个大数组时，for...of的速度可能比for慢：consta=[/*bigarray*/];for(leti=0;i