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 数组排序函数
Aug 20 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
input框中的name和id的区别
Nov 16 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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 定义404页面的实现代码
2012/11/19 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP实现验证码校验功能
2017/11/16 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
JS实现图片切换效果
2018/11/17 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
vue实现登录拦截
2020/06/29 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
Python列表与元组的异同详解
2019/07/02 Python
Python3 assert断言实现原理解析
2020/03/02 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
高中生自我评价个人范文
2013/11/09 职场文书
教师岗位职责范本
2013/12/29 职场文书
继承公证书样本
2014/04/04 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书