JavaScript中遍历的十种方法总结


Posted in Javascript onDecember 15, 2020

1.while循环

while后面跟循环条件和执行语句,只要满足条件,就会一直执行里面的执行

var i = 0
while(i<10){
 console.log(i)
 i++ 
}

2.do...while循环

与while相似,但是他会先执行一次,再做判断条件

var i=0
do{
 console,log(i)
 i++
}while(i<10)

3.for循环

var arr = [0,1,2,3]
for(let i = 0;i < arr.length;i++){
 console.log(i)
}

4.forEach循环

var arr = [0,1,2,3]
arr.forEach((item,index)=>{
 console.log(`下标${index}的数为${item}`)
})

5.for...in循环

一般用来遍历对象的属性,遍历数组的话拿到的是下标

var obj = {name:'snail',age:18}
for(var key in obj){
 console.log(key)
}

6.for...of循环

可以遍历拿到每一个元素

var str = 'snail'
for(var item of str){
 console.log(item)
}

7.map映射

map方法将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。

该函数调用时,map方法向它传入三个参数:当前成员、当前位置和数组本身。

注意:是返回一个新数组,而不会改变原数组。

var arr = [0,1,2,3]
arr.map((item)=>{
 return item*2
})

8.filter()过滤循环

filter方法用于过滤数组成员,满足条件的成员组成一个新数组返回。

它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

var arr = [0,4,2,3,5]
arr.filter((item)=>{
 return (item>3)
})

9.some(),every()遍历

统计数组是否满足某个条件,这两个方法返回一个布尔值,表示判断数组成员是否符合某种条件。

它们接受一个函数作为参数,所有数组成员依次执行该函数。该函数接受三个参数:当前成员、当前位置和整个数组,然后返回一个布尔值。

some方法是只要一个成员的返回值是true,则整个some方法的返回值就是true,否则返回false。

every方法则相反,所有成员的返回值都是true,整个every方法才返回true,否则返回false。两相比较,some()只要有一个是true,便返回true;而every()只要有一个是false,便返回false.

这两个方法在实际开发中,大有可用之处。比如在判定用户是否勾选了不可操作的数据,或者是否勾选了一条可以操作的数据可以使用这两个方法遍历循环数组。

10.reduce()遍历

reduce方法第一个参数是一个函数。该函数接受以下四个参数。

1.Accumulator(累计器)

2.Current Value(当前值)

3.Current Index(当前索引)

4.Source Array(源数组)

函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果值。

这四个参数之中,只有前两个是必须的,后两个则是可选的。

到此这篇关于JavaScript中遍历的十种方法的文章就介绍到这了,更多相关JavaScript遍历方法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 Javascript
token 机制和实现方式
Dec 15 #Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 #Vue.js
一分钟学会JavaScript中的try-catch
Dec 14 #Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 #Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 #Vue.js
element-ui点击查看大图的方法示例
Dec 14 #Javascript
小程序中手机号识别的示例
Dec 14 #Javascript
You might like
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
ASP Json Parser修正版
2009/12/06 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
Vue指令指令大全
2019/02/09 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
python实现简单的TCP代理服务器
2014/10/08 Python
Python之时间和日期使用小结
2019/02/14 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
python将字符串转换成json的方法小结
2019/07/09 Python
献爱心活动总结
2014/05/07 职场文书
小学节能减排倡议书
2014/05/15 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
亮剑观后感300字
2015/06/05 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python
TensorFlow的自动求导原理分析
2021/05/26 Python