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代码和jquery对比体会
Sep 10 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
layer插件select选中默认值的方法
Aug 14 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
javascript 类型判断代码分析
2010/03/28 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
Python找出9个连续的空闲端口
2016/02/01 Python
Python实现字典依据value排序
2016/02/24 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
什么是python类属性
2020/06/10 Python
python如何代码集体右移
2020/07/20 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
房屋过户委托书范本
2014/10/07 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
教师创先争优承诺书
2015/04/27 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
vue组件vue-esign实现电子签名
2022/04/21 Vue.js
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS