详细介绍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循环,咱们稍后再续。。。。。
详细介绍javascript中的几种for循环的区别的更多相关文章
- JavaScript中的三种弹出对话框
学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性 ...
- 探究JavaScript中的五种事件处理程序
探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...
- [转]详细介绍java中的数据结构
详细介绍java中的数据结构 本文介绍的是java中的数据结构,本文试图通过简单的描述,向读者阐述各个类的作用以及如何正确使用这些类.一起来看本文吧! 也许你已经熟练使用了java.util包里面的各 ...
- 详细介绍java中的数据结构
详细介绍java中的数据结构 http://developer.51cto.com/art/201107/273003.htm 本文介绍的是java中的数据结构,本文试图通过简单的描述,向读者阐述各个 ...
- JavaScript 中的12种循环遍历方法
原文:JavaScript 中的12种循环遍历方法 题目:请介绍 JavaScript 中有哪些循环和遍历的方法,说说它们的应用场景和优缺点? 1.for 循环 let arr = [1,2,3];f ...
- JavaScript中的三种弹出框的区别与使用
JavaScript中有三种原生的弹出框,分别是alert.confirm.prompt.分别表示弹出框.确认框.信息框. 以下是示例代码: <!DOCTYPE html> <htm ...
- 对 JavaScript 中的5种主要的数据类型进行值复制
定义一个函数 clone(),可以对 JavaScript 中的5种主要的数据类型(包括 Number.String.Object.Array.Boolean)进行值复制 使用 typeof 判断值得 ...
- 实现一个函数clone,使JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制
实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number.String.Object.Array.Boolean)进行值复制. 1 /** 对象克隆 2 * 支持基本 ...
- javascript中back(-1)和go(-1)的区别
javascript中back(-1)和go(-1)的区别 一.总结 一句话总结: 数据 history.back(-1):直接返回当前页的上一页,数据全部消息,是个新页面 history.go(-1 ...
随机推荐
- Java 的标识接口作用
原文地址:标识接口 作用作者:feisong 时间:2019-01-2315:49:35 标识接口是没有任何方法和属性的接口.标识接口不对实现它的类有任何语义上的要求,它仅仅表明实现它的类属于一个特定 ...
- spring配置多个视图解析
<!-- 配置视图解析器 --> <bean class="org.springframework.web.servlet.view.InternalResourceVie ...
- C#判断系统是64位还是32位 支持.net4.0以前的版本
C#判断系统是64位还是32位的时候引用了一串代码,这个代码是从园子里面其他博文中转载过来的,引入自己的项目中发现无法使用,在引用了相应的命名空间之后还是提示: "未能找到类型或命名空间名称 ...
- Java四舍五入时保留指定小数位数
方式一: double f = 3.1516; BigDecimal b = new BigDecimal(f); , BigDecimal.ROUND_HALF_UP).doubleValue(); ...
- Python 一些好玩的函数
一.匿名函数 什么匿名是函数: 不需要使用def函数名的函数或者子程序 函数语法: lambda 参数:表达式 函数特点: 1.lambda只是一个表达式,省去定义函数过程,让代码更精简 2.lamb ...
- Linux Shell常用命令(长期更新)
#判断某个字段是否匹配指定值 awk -F"," '{if($4=="value"){print $1} else {print $0}}' file.txt ...
- nodeJs 对 Mysql 数据库的 curd
var mysql = require('mysql'); var connection = mysql.createConnection({ host : 'localhost', user : ' ...
- Cent OS 下 VI 使用方法
vi的基本概念 基本上vi可以分为三种状态,分别是命令模式(command mode).插入模式(Insert mode)和底行模式(last line mode),各模式的功能区分如下: 1) 命 ...
- scala成长之路(7)函数进阶——可能是史上最浅显易懂的闭包教程
由于scala中函数内部能定义函数,且函数能作为函数的返回值,那么问题来了,当返回的函数使用了外层函数的局部变量时,会发生什么呢?没错,就产生是闭包. 关于闭包的解释网上一大堆,但基本上都是照葫芦画瓢 ...
- python函数的返回值
返回值:return1.没有返回值 #不写return #只写return:结束一个函数 #return None2.有一个返回值 #可以返回任何数据类型 #只要返回就可 ...