JavaScript 中的12种循环遍历方法【总结】


Posted in Javascript onMay 31, 2018

1、for 循环

let arr = [1,2,3];
for (let i=0; i<arr.length; i++){
 console.log(i,arr[i])
}
// 0 1
// 1 2
// 2 3

for 循环是 Js 中最常用的一个循环工具,经常用于数组的循环遍历。

2、for in 循环

let obj = {name:'zhou',age:'**'}
for(let i in obj){
 console.log(i,obj[i])
}
// name zhou
// age **

for in 循环主要用于遍历普通对象,i 代表对象的 key 值,obj[i] 代表对应的 value,当用它来遍历数组时候,多数情况下也能达到同样的效果,但是你不要这么做,这是有风险的,因为 i 输出为字符串形式,而不是数组需要的数字下标,这意味着在某些情况下,会发生字符串运算,导致数据错误,比如:'52'+1 = '521' 而不是我们需要的 53。

另外 for in 循环的时候,不仅遍历自身的属性,还会找到 prototype 上去,所以最好在循环体内加一个判断,就用 obj[i].hasOwnProperty(i),这样就避免遍历出太多不需要的属性。

3、while 循环

同样的遍历 cars 数组,先用 for 循环方法

let cars=["BMW","Volvo","Saab","Ford"];
let i=0;
for (;cars[i];)
{
console.log(cars[i])
i++;
};
// BMW
// Volvo
// Saab
// Ford

然后是 while 循环方法

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
console.log(cars[i] + "<br>")
i++;
};

我们发现,它们可以实现同样的效果,事实上它们底层的处理是一样的,不过 for 循环可以把定义、条件判断、自增自减操作放到一个条件里执行,代码看起来方便一些,仅此而已。

4、do while 循环

let i = 3;
do{
 console.log(i)
 i--;
}
while(i>0)
// 3
// 2
// 1

do while 循环是 while 循环的一个变体,它首先执行一次操作,然后才进行条件判断,是 true 的话再继续执行操作,是 false 的话循环结束。

5、Array forEach 循环

let arr = [1,2,3];
arr.forEach(function(i,index){
 console.log(i,index)
})
// 1 0
// 2 1
// 3 2

forEach循环,循环数组中每一个元素并采取操作, 没有返回值, 可以不用知道数组长度,他有三个参数,只有第一个是必需的,代表当前下标下的 value。

另外请注意,forEach 循环在所有元素调用完毕之前是不能停止的,它没有 break 语句,如果你必须要停止,可以尝试 try catch 语句,就是在要强制退出的时候,抛出一个 error 给 catch 捕捉到,然后在 catch 里面 return,这样就能中止循环了,如果你经常用这个方法,最好自定义一个这样的 forEach 函数在你的库里。

6、Array map()方法

let arr = [1,2,3];
let tt = arr.map(function(i){
 console.log(i)
 return i*2;
})
// [2,4,6]

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
注意:map 和 forEach 方法都是只能用来遍历数组,不能用来遍历普通对象。

7、Array filter() 方法

let arr = [1,2,3];
let tt = arr.filter(function(i){
 return i>1;
})
// [2,3]

filter 方法是 Array 对象内置方法,它会返回通过过滤的元素,不改变原来的数组。

8、Array some() 方法

let arr = [1,2,3];
let tt = arr.some(function(i){
 return i>1;
})
// true

some() 方法用于检测数组中的元素是否满足指定条件(函数提供),返回 boolean 值,不改变原数组。

9、Array every() 方法

let arr = [1,2,3];
let tt = arr.some(function(i){
 return i>1;
})
// 检测数组中元素是否都大于1
// false

every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供),返回 boolean 值,不改变原数组。

10、Array reduce()方法

let arr = [1,2,3];
let ad = arr.reduce(function(i,j){
 return i+j;
})
// 6

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

11、Array reduceRight()方法

let arr = [1,2,3];
let ad = arr.reduceRight(function(i,j){
 return i+j;
})
// 6

reduceRight()方法,和 reduce() 功能是一样的,它是从数组的末尾处向前开始计算。

12、for of 循环

let arr = ['name','age'];
for(let i of arr){
 console.log(i)
}
// name
// age

for of 循环是 Es6 中新增的语句,用来替代 for in 和 forEach,它允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代(Iterable data)的数据结构,注意它的兼容性。

总结

以上就是我总结的 Js 中常见的循环遍历方法,随着 Es6 标准的兼容性越来越好,我发现很多实现方案慢慢都不再必要了,比如 let、const 取代var 后,在某些情况下的闭包函数也就不存在了。

Javascript 相关文章推荐
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 #Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 #Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 #jQuery
Vue2.0 实现移动端图片上传功能
May 30 #Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 #jQuery
Javascript获取某个月的天数
May 30 #Javascript
JS实现键值对遍历json数组功能示例
May 30 #Javascript
You might like
再次研究下cache_lite
2007/02/14 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
js控制frameSet示例
2013/09/10 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
纯javascript版日历控件
2016/11/24 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中的map、reduce和filter浅析
2014/04/26 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
思想汇报范文
2013/11/04 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
环保建议书100字
2014/05/14 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python