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 相关文章推荐
基于JQuery的密码强度验证代码
Mar 01 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
vue使用nprogress实现进度条
Dec 09 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
也谈 PHP 和 MYSQL
2006/10/09 PHP
php xml实例 留言本
2009/03/20 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
node.js使用redis储存session的方法
2018/09/26 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
Python闭包思想与用法浅析
2018/12/27 Python
python 字典操作提取key,value的方法
2019/06/26 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
中软国际Java程序员笔试题
2014/07/19 面试题
高一地理教学反思
2014/01/18 职场文书
2014春晚主持词
2014/03/25 职场文书
党课培训心得体会
2014/09/02 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
邀请书模板
2015/02/02 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
Golang二维数组的使用方式
2021/05/28 Golang