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 相关文章推荐
js导出格式化的excel 实例方法
Jul 17 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
如何用JS模拟实现数组的map方法
Jul 30 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 header函数的常用http头设置
2015/06/25 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
js选择器全面解析
2016/06/27 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
js实现小时钟效果
2020/03/25 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
python 网络编程详解及简单实例
2017/04/25 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
仓库管理专业个人的自我评价
2013/12/30 职场文书
房屋授权委托书范本
2014/10/07 职场文书
新教师教学工作总结
2015/08/12 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android
德生2P3收音机开箱评测
2022/04/30 无线电
PHP 时间处理类Carbon
2022/05/20 PHP