详细介绍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 ...
随机推荐
- js继承的几种方法和es6继承方法
一.原型链继 1.基本思想 利用原型链来实现继承,超类的一个实例作为子类的原型 2.具体实现 function F() {} //原型属性,原型方法: ...
- 吐血分享:QQ群霸屏技术教程之霸屏实施细则
小号,再不养,成本抗不住了;QQ群,再不玩,真的就玩不动啦. 霸屏系列,坚持下来差不多10来篇,最近更新的几篇,算是霸屏系列的更新版,毕竟相当的规则变动了. 经营自己,是一种前瞻能力,霸屏十篇,有多少 ...
- pynlpir + pandas 文本分析
pynlpir是中科院发布的一个分词系统,pandas(Python Data Analysis Library) 是python中一个常用的用来进行数据分析和统计的库,利用这两个库能够对中文文本数据 ...
- mysql 5.8 查询最新一条数据
SELECT * FROM ( ,) FROM (SELECT * FROM or_task_node ORDER BY created_date DESC) temp ) AS vars ) t g ...
- go学习笔记-常见命令
常见命令 go 命令 可以在控制台执行go来查看 go Go is a tool for managing Go source code. Usage: go <command> [arg ...
- 关于VSCode如何缩进两个空格
使用VSCode编写vue的时候,由于缩进问题经常报错.(默认缩进4个空格,实际规范上是两个空格) 更改VSCode的缩进格式. 但是此时你在编写代码的时候却发现任然缩进4格,此时因为vscode默认 ...
- Electron入门应用打包exe(windows)
最近在学习nodejs,得知Electron是通过将Chromium和Node.js合并到同一个运行时环境中,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一门技术.对于之前一直从 ...
- es同步mysql同步-logstash
1.下载es https://www.elastic.co/downloads/elasticsearch 修改 config 下elasticsearch.yml ip和端口等配置 2.下载ki ...
- mysql 函数以及操作总结
1. 拼接 concat(参数1,参数2,.. ,参数) 实现将多个字符串拼接到一起 要批量修改一个字段值 字段值又是复杂的sql 计算得来 通过查询字段值 和 修改的条件fundId(这是 ...
- es2017中的async和await要点
1. async和await最关键的用途是以同步的写法实现了异步调用,是对Generator异步方法的简化和改进.使用Generator实现异步的缺点如下: 得有一个任务执行器来自动调用next() ...