关于JS循环遍历

eternalshallow 发布于2019-08-21 11:38 / 1320人阅读

摘要：关于循环遍历写下这篇文章的目的，主要是想总结一下关于对于集合对象遍历的方式方法，以及在实际应用场景中怎样去使用它们。的作用主要是去遍历对象的可枚举属性。例如索引，数值打印结果为当第二项不满足条件式跳出循环，返回。

关于JS循环遍历

写下这篇文章的目的，主要是想总结一下关于JS对于集合对象遍历的方式方法，以及在实际应用场景中怎样去使用它们。本文会主要介绍：while,for,forEach,every,some,filter,reduce,map,indexOf...

while/do while

while、do while主要的功能是，当满足while后边所跟的条件时，来执行相关业务。这两个的区别是，while会先判断是否满足条件，然后再去执行花括号里面的任务，而do while则是先执行一次花括号中的任务，再去执行while条件，判断下次还是否再去执行do里面的操作。也就是说 do while至少会执行一次操作，生产中这个就可能用的比较少了，因为他与接下来要讲的for循环相比，个人觉得可读性上差了一点。

while(条件){
执行...
}
------------
do{
执行...
}
while(条件)

for

for (语句 1; 语句 2; 语句 3)
  {
  被执行的代码块
  }

语句 1 在循环（代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

这个就不赘述了，也比较好理解，主要聊一下for...in/for...of这两个东西。

for...in

for...in的作用主要是去遍历对象的可枚举属性。即

 var foo = {
                name: "bar",
                sex: "male"
            }
            Object.defineProperty(foo, "age", { value : 18})
            for(var a in foo){
                console.log(`可枚举属性：${a}`)
            }
            console.log(`age属性：${foo.age}`)

因为Object.defineProperty，建立的属性，默认不可枚举，因此在浏览器中打印的结果为：

在JS当中，数组也算作对象，但一般不推荐把for...in用在数组遍历上面，如果for...in普通数组的话，a返回数组的索引。

for...of

for...of是ES6新增的方法，主要作用是用来遍历具有iterator接口的数据集合，除了ES5的Array，还有ES6新增的Map,Set等，但是for...of不能去遍历普通的对象（普通对象不具备iterator接口），如果想去遍历普通对象，可以使用generator函数去给普通对象先生成iterator接口。for...of的好处是可以使用break跳出循环。

every/some

返回一个布尔值。当我们需要判定数组中的元素是否满足某些条件时，可以使用every/some。这两个的区别是，every会去判断判断数组中的每一项，而some则是当某一项满足条件时返回。例如：

let foo=[5,1,3,7,4].every(function (item,index) {
                console.log(`索引：${index}，数值：${item}`)
                return item>2
            })
            console.log(foo)

打印结果为：

当第二项不满足条件式跳出循环，返回false。

let foo=[5,1,3,7,4].some(function (item,index) {
                console.log(`索引：${index}，数值：${item}`)
                return item>2
            })
            console.log(foo)

打印结果为：

当数组的某项满足条件时跳出循环，返回true.
在按照约定条件筛选数组时，every/some是非常方便的方法。

filter

筛选出一个满足相关条件的新数组。

let foo=[5,1,3,7,4].filter(function (item,index) {
                console.log(`索引：${index}，数值：${item}`)
                return item>2
            })
            console.log(foo)

将满足返回值条件的item组成一个新的数组。过滤器，顾名思义，比较好理解。在按照约定条件筛选数组元素时，filter比较方便。

map

let foo=[5,1,3,7,4].map(function (item,index) {
                console.log(`索引：${index}，数值：${item}`)
                return item+2
            })
            console.log(foo)

返回一个将每个元素进行“二次加工”的新数组，map与filter都是返回一个新的数组，区别则是filter是将原数组，通过相关条件筛选出合法的item，来组成一个新的数组，而map则是将每个item通过再加工来返回一个新的数组。

reduce

将数组元素做“叠加”处理，返回一个值。

let foo=[5,1,3,7,4].reduce(function (pre,cur) {
                console.log(`索引：${pre}，数值：${cur}`)
                return pre+cur
            })
            console.log(foo)

打印结果为：

pre为累加值，cur为当前值。reduce函数值得注意的是，reduce(fn,init)第二个参数，可以传一个初始值，如果代码改成这样：

let foo=[5,1,3,7,4].reduce(function (pre,cur) {
                console.log(`索引：${pre}，数值：${cur}`)
                return pre+cur
            },"")
            console.log(foo)

则为：

indexOf

返回指定字符串首次出现的位置

 let foo=["57","17","37","7","4"].indexOf("7")
            console.log(foo)

这个函数比较常用的应用场景是，在做if判断时，可以代替||，&&等关系符。比如：

可以代替
if（value=="next"||value=="pre"）的这种写法，当判断元素较多时，这种写法比较划算。

总结

个人非常喜欢filter/map/reduce，但是看到身边的同学一言不合就foreach,替这三个函数心疼几秒。。。不过低版本浏览器也确实不支持这些函数。。。根据自己需要去选择合适的遍历方式可以大大提升效率。哦耶

超融合服务器专线服务 js 循环遍历json数据 js循环遍历json数据循环遍历字典 python遍历循环

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86963.html

jS:关于对象遍历和数组遍历的那些事

摘要：如图遍历数组遍历数组元素并以某种方式处理每个元素是一个常见的操作。如图不过，里的功能比较强大，可以遍历而且返回值是的则被省略掉总结遍历对象，遍历出来的是键名，而不是键值，参数必须是对象。可能是由于职业的关系，下班之后完全不想Open PC，但很多知识点有必要自己做个小小总结。本人之前对原生Array和Object完全没概念。遍历对象的方法： Object.keys(Object)...

qingshanli1988 2019-08-20 18:16 评论0 收藏0
JS内置对象-关于String字符串对象的2个小实验

摘要：希望索引值之间用隔开，而最后的索引值后面无。优化代码这个判断用于防止最后一个索引值后面还有结果查看其实用来跳出循环一直觉得不太规范。。。小实验是显示次数其实就是那个索引值啦，这次显示的是字符哦涉及到字符，就要用到方法。第一篇技术文章写些简单点的~在大三上web前端开发课程时，虽然能用JavaScript制作一些简单的页面动态效果，但其实很多JS知识并未掌握，所以自己又通过视频再复习一...

Imfan 2019-08-22 10:43 评论0 收藏0
js遍历之for forEach in of

摘要：语法参数当前遍历项。遍历的范围在第一次调用前就会确定。已删除的项不会被遍历到。的是由提出的，目的是作为遍历所有数据结构的统一方法。不仅可以遍历数组，还可以遍历结构，某些类似数组的对象如对象对象，对象，以及字符串。即使是最简单的循环，其中也深藏学问 ECMAScript5(es5)有三种for循环简单for for in forEach ECMAScript6(es6)新增 fo...

yeyan1996 2019-08-20 17:38 评论0 收藏0
vue.js关于循环出来多个input并让每个input后的修改按钮控制其值

摘要：从后端返回的数据中，有时候你会遇到一堆的，然后每个后面都跟有一个按钮，就像这种情况其中有两个问题，在一个框里面输入值，然后所有的值都都会显示你输入的结果每个输入框点击能控制所有的而不只是它前面的那一个其实解决也不复杂，主要是运用到了循环以及从后端返回的数据中，有时候你会遇到一堆的input，然后每个input后面都跟有一个按钮，就像这种情况showImg(https://segmen...

xiangchaobin 2019-08-22 11:16 评论0 收藏0
JavaScript专题之jQuery通用遍历方法each的实现

摘要：语法为回调函数拥有两个参数第一个为对象的成员或数组的索引，第二个为对应变量或内容。但是对于的函数，如果需要退出循环可使回调函数返回，其它返回值将被忽略。 JavaScript 专题系列第十一篇，讲解 jQuery 通用遍历方法 each 的实现 each介绍 jQuery 的 each 方法，作为一个通用遍历方法，可用于遍历对象和数组。语法为： jQuery.each(object,...

blankyao 2019-08-20 18:30 评论0 收藏0