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在事件监听方面的兼容性小结
Apr 07 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
JS面向对象编程详解
Mar 06 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
vue实现底部菜单功能
Jul 24 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 Javascript
Javascript中的解构赋值语法详解
Apr 02 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 验证码实例代码
2010/06/01 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
js实现随机8位验证码
2020/07/24 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
vue2路由基本用法实例分析
2020/03/06 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
详解Python的Django框架中的中间件
2015/07/24 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
SQL面试题
2013/04/30 面试题
财务分析个人的自荐书范文
2013/11/24 职场文书
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
公积金单位接收函
2014/01/11 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
公司开业致辞
2015/07/29 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python