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 Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
Vue渲染函数详解
Sep 15 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
实例分析js事件循环机制
Dec 13 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
vue监听dom大小改变案例
Jul 29 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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
杏林同学录(三)
2006/10/09 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
Python使用gensim计算文档相似性
2016/04/10 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python的多重继承的理解
2017/08/06 Python
快速了解Python相对导入
2018/01/12 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Django中多种重定向方法使用详解
2019/07/17 Python
python命令 -u参数用法解析
2019/10/24 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
python如何从键盘获取输入实例
2020/06/18 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
安全检查验收制度
2014/01/12 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
检举信的格式及范文
2014/04/04 职场文书
药店促销活动总结
2014/07/10 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL