详细介绍javascript中的几种for循环的区别
偶然间见到了forEach循环,感觉很新奇,就研究了一下,顺带着把js中的几种for循环做了一个比较。
首先,简单说一下,js中一共大概有四种for循环:(1)、那种简单常见的for循环;(2)、for-in循环;(3)、forEach循环;(4)、es6中新增的for-of循环。
(1)简单的for循环
例如
var arr = [1,2,3,4];
for(var i=0;i<arr.length;i++){
console.log(arr[i])
}
当遍历的数组长度不变时,可以选择将数组的长度用一个变量保存下来,这样会获得更好的效率。
比如
var arr = [1,2,3,4];
for(var i= 0,len = arr.length;i<len;i++){
console.log(arr[i])
}
(2)for-in循环,我一般是在遍历对象的时候用的比较多。其实for-in循环也可以遍历数组,只不过有时候会出现一些问题。比如:
var arr = [1,2,3,4,5];
arr.name = 'lili';
for(var i in arr){
console.log(arr[i])
}
// 会打印出 1,2,3,4,5,lili
对,没错,它把最后添加的属性也给遍历了。我们知道,在js中,数组Array也是属于对象的,所以,for-in在遍历对象的时候,会把所有的属性都会遍历一遍而不仅仅是索引(另,数组中的索引不是Number类型的,而是String类型的),还包括原型链上的可枚举属性。由此可见,for-in并不适合来遍历数组。但是还有一种特殊的情况,那就是稀疏数组。比如:
var arr = [];
arr[0] = 100;
arr[10] = 102;
arr[15] = 104;
for(var i in arr){
console.log(arr[i])
}
// 输出结果是 100,102,104
对比普通的for循环:
var arr = [];
arr[0] = 100;
arr[10] = 102;
arr[15] = 104;
// for(var i in arr){
// console.log(arr[i])
// }
//// 输出结果是 100,102,104 for(var i=0;i<arr.length;i++){
console.log(arr[i])
}
//输出 100,undefined,102,undefined,104
for-in只遍历了三次,而普通的for循环遍历了16次。只要处理得当,for-in循环在数组循环当中也能发挥巨大的作用。
(3)forEach循环,这个我在项目中还是很少用到,偶然间看ife的题的时候看见了,就很好奇。
forEach方法为数组中含有有效值的每一项执行一次callback函数,那些已经删除的或者没有被赋值的项会被跳过。callback函数会被依次传入三个参数,
1.数组当前项的值,2.数组当前项的索引,3.数组对象本身。如果只传入一个参数,则默认是数组当前项。例如:
var arr = [1,2,3,4,5];
arr.forEach(function(i){
console.log(i)
})
// 输出为1,2,3,4,5
arr.forEach(function(value,index,arr){
console.log("当前项"+value)
console.log("当前项索引"+index)
console.log("数组本身"+arr)
})
// 输出 当前项1,当前索引0,数组本身【1,2,3,4,5】
// 输出 当前项2,当前索引1,数组本身【1,2,3,4,5】
// 依次类推。。。。。。
需要注意的是,forEach遍历的范围在第一次调用callback的时候就已经确定了。调用callback之后,再添加的项就不会被遍历了。并且forEach不能break和return,如果想要跳出循环,就要用到try语句,所以forEach虽然有时候很方便简短,但是也有坑的时候哇。。
最后一种for-of循环,咱们稍后再续。。。。。
最新文章
- 【分布式】Zookeeper与Paxos
- HTML 播放器 写给自己
- 理解Docker容器的进程管理
- CentOS7 SSH相关
- Windows Internals学习笔记(四)Trap Dispatching
- BZOJ_1028_[JSOI2007]_麻将_(模拟+贪心)
- scrollview始终显示滚动条 Android
- 构建安全的Xml Web Service系列之wse之证书存储位置
- 第十二章——SQLServer统计信息(2)——非索引键上统计信息的影响
- 开启属于你的GNOME桌面
- spring boot整合Hadoop
- Linux qemu-nbd mount qemu disk image
- Asp.Net解析json字符串
- EJB简介
- 离线人脸识别 ArcFaceSharp -- ArcFace 2.0 SDK C#封装库分享
- 收集Cocos2d提供的字体!共57种
- pytorch之Tensor
- Spring Boot专题背景简介
- SSH 错误解决案例1:Read from socket failed: Connection reset by peer
- C#检测系统是否激活[转自StackOverFlow]