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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
基于vue实现swipe轮播组件实例代码
May 24 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
Vue数据双向绑定底层实现原理
Nov 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
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
婚礼证婚人证婚词
2014/01/13 职场文书
红旗方阵解说词
2014/02/12 职场文书
cf搞笑广告词
2014/03/14 职场文书
小学生暑假家长评语
2014/04/17 职场文书
国庆促销活动总结
2014/08/29 职场文书
毕业生党员个人总结
2015/02/14 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle