前言随着ES6的引入,js中循环遍历的方法越来越多,但也有很多不同在他们的职能中。本文对js中比较常用的循环遍历方法做一些简单的总结。1、for循环for循环是js中比较早的一种遍历方式for(leti=0;i<10;i++){console.log(`${i}loop`);}可以在for循环中使用使用break终止循环,继续跳过本次循环for(leti=0;i<10;i++){if(i===4)break;//终止下面的循环语句console.log(`section${i}loop`);}for(leti=0;i<10;i++){if(i===4)continue;//跳过本次循环,继续执行下一次循环console.log(`${i}循环`);}for..of遍历数组(也可以使用break和continue)constarr=['a','b','c','d','e']for(letiofarr){console.log(i);//a,b,c,d,e}for..in可以遍历对象属性和数组下标(也可以使用break和continue)constobj={name:'小明',age:18,sex:'男'}for(letiinobj){console.log(i);//姓名、年龄、性别}constarr=['a','b','c','d','e']for(letiinarr){console.log(i);//0,1,2,3,4}其次,forEachforEach()可以遍历数组改变自身,无返回值,不能使用break继续终止跳出循环forEach(function(value,index,array){.....})第一个参数值:must,为当前正在遍历的元素第二个参数index:optional,为当前遍历元素的索引第三个参数array:可选,为当前正在遍历的数组遍历constarr=[1,2,3,4,5]arr.forEach((value,index,arr)=>{arr[index]=arr[index]*10})控制台日志(arr);//[10,20,30,40,50]如果数组中的每一项都是引用数据类型,可以通过第一个参数修改自己的值constArr=[{num:1},{num:2},{num:3}]Arr.forEach(item=>{item.num=item.num+10})console.log(Arr);//[{num:11},{num:12},{num:13}]forEach不能用break继续终止跳出循环如果想跳出终止循环可以用otherforEach方法可以使用returnfalse跳出这个循环constarr=[1,2,3,4,5]arr.forEach(item=>{if(item===4)returnconsole.log(item)//1,2,3,5})forEach可以使用抛出异常(trycatch)来终止循环constarr=[1,2,3,4,5]try{arr.forEach((item)=>{if(item===3){thrownewError('end')}console.log(item)//1,2})}catch(e){if(e.message==='end')throwe}注意:使用forEach时循环不会经常终止,所以这种方法一般很少使用三、mapmap()是数组的映射,不会改变原数组,而是将处理后的结果作为一个新的数组const返回Arr=[1,2,3,4,5]constnewArr=Arr.map(item=>{returnitem*item})console.log(Arr);//[1,2,3,4,5]console.log(newArr);//[1,4,9,16,25]四、findfind()返回第一个满足条件的数组元素的值,否则返回undefinedconstarr=[15,25,35,45,55]const资源ult=arr.find(item=>{returnitem>30})c??onsole.log(result);//35}5.findIndexfindIndex()方法常用于查找数组中第一个满足条件的元素的下标,如果数组没有符合条件的元素,则返回-1constarr=[15,25,35,45,55]constresult=arr.findIndex(item=>{returnitem>30})console.log(result);//2六、somesome()用于检测数组中的元素是否满足指定条件。如果一个元素满足条件,则表达式返回真,其余元素不执行测试。如果没有满足条件的元素,则返回falseconstarr=[15,25,35,45,55]constresult=arr。some((item,index)=>{console.log(index)//0,1,2returnitem>30})c??onsole.日志(结果);//true七、every与some()相反,every()用于检查数组的所有元素是否满足指定条件,如果有一个元素不满足条件,则表达式返回false,其余元素将不被执行检测。如果所有元素都满足条件,则返回trueconstarr=[15,25,35,45,55]constresult=arr.every((item,index)=>{console.log(index)//0,1,2,3返回项<40})console.log(result);//false8.filterfilter()用于过滤数组,返回满足指定条件的新数组constArr=[11,14,32,47,48,53,56,70]constnewArr=Arr.filter(item=>{returnitem%2===0})console.log(Arr);//[11,14,32,47,48,53,56,70]console.log(newArr);//[14,32,48,56,70]9.reducereduce()方法对数组中的每个元素(按升序)执行你提供的reduce函数,将其结果聚合成一个单一的返回值arr.reduce(函数(上一个,当前,索引,arr){...},初始化);上一页必填。累加器累加回调的返回值;表示上次调用回调时的返回值,或者初始值init;当前必需。表示当前正在处理的数组元素;索引是可选的。指示当前正在处理的数组元素的索引。如果提供了init值,则起始索引为0,否则起始索引为1;arr是可选的。代表原数组;初始化是可选的。表示初值循环遍历几乎可以做reduce()可以做的所有事情。以数组求和为例constarr=[1,2,3,4,5]constresult=arr.reduce((pre,cur)=>{returnpre+cur})console.日志(结果);//15
