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 相关文章推荐
预加载css或javascript的js代码
Apr 23 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
jquery遍历json对象集合详解
May 18 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
详解用async/await来处理异步
Aug 28 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 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 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
php获取错误信息的方法
2015/07/17 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
jquery等待效果示例
2014/05/01 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
浅谈Koa服务限流方法实践
2017/10/23 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
js实现打字小游戏
2019/12/17 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
Python的Flask框架与数据库连接的教程
2015/04/20 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
python 实现端口扫描工具
2020/12/18 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
大学生评语大全
2014/04/18 职场文书
社区禁毒工作方案
2014/06/02 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
java设计模式--七大原则详解
2021/07/21 Java/Android