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 相关文章推荐
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 Javascript
利用 JavaScript 构建命令行应用
Nov 17 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实现webservice实例
2014/11/06 PHP
PHP中文编码小技巧
2014/12/25 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
详解python 注释、变量、类型
2018/08/10 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
python实现在一个画布上画多个子图
2020/01/19 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
Python如何实现机器人聊天
2020/09/10 Python
numpy实现RNN原理实现
2021/03/02 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
水利公司纪检监察自我鉴定
2014/02/25 职场文书
品质标语大全
2014/06/21 职场文书
大学迎新生标语
2014/10/06 职场文书
新郎结婚感言
2015/07/31 职场文书
新郎新娘致辞
2015/07/31 职场文书