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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
JavaScript变量声明详解
Nov 27 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 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 获取客户端的真实ip
2009/11/30 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
python函数缺省值与引用学习笔记分享
2013/02/10 Python
python查找第k小元素代码分享
2013/12/18 Python
Python中的rfind()方法使用详解
2015/05/19 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
SQL语言面试题
2013/08/27 面试题
大学生自我鉴定
2013/12/08 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python