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中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 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
PHP5中MVC结构学习
2006/10/09 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
PHP写日志的实现方法
2014/11/05 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
javascript模拟命名空间
2015/04/17 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
Django基础知识与基本应用入门教程
2018/07/20 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
Django实现学生管理系统
2019/02/26 Python
django框架使用方法详解
2019/07/18 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
岗位职责定义及内容
2013/11/08 职场文书
结构工程个人自荐信范文
2013/11/30 职场文书
干部下基层实施方案
2014/03/14 职场文书
大专生求职信
2014/06/29 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
2014年检验科工作总结
2014/11/22 职场文书
地道战观后感500字
2015/06/04 职场文书
网吧管理制度范本
2015/08/05 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers