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 相关文章推荐
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
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 md5下16位和32位的实现代码
2008/04/09 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
python和php哪个更适合写爬虫
2020/06/22 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
家长评语和期望
2014/02/10 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
司机职责范本
2014/03/08 职场文书
业务内勤岗位职责
2014/04/30 职场文书
爱护草坪标语
2014/06/24 职场文书
应届毕业生求职信范文
2014/07/07 职场文书