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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
js兼容的placeholder属性详解
Aug 18 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 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中的加密功能
2006/10/09 PHP
操作Oracle的php类
2006/10/09 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
大学生的应聘自我评价
2013/12/13 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
供电工程专业求职信
2014/08/09 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android