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的面向对象(二)
Nov 09 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
浅谈node模块与npm包管理工具
Jan 03 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
React实现todolist功能
Dec 28 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
javascript回到顶部特效
2016/07/30 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
Python获取系统默认字符编码的方法
2015/06/04 Python
详解Python中的日志模块logging
2015/06/19 Python
Python编写Windows Service服务程序
2018/01/04 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
python画图常规设置方式
2020/03/05 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
入学生会自荐书范文
2014/02/05 职场文书
行政人事岗位职责
2014/03/17 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
小学老师寄语大全
2014/04/04 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
Java对文件的读写操作方法
2022/04/29 Java/Android