本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家比较一下6种JS数组遍历方法:for、foreach、for in、for of、. each、 ().each,介绍一下它们的区别。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。6种JS数组遍历方法
一、for
Javascript中的for循环,它用来遍历数组
1 2 3 4 5 |
|
九九乘法表:
1 2 3 4 5 6 7 |
|
二、foreach
forEach循环我们可以直接取到元素,同时也可以取到index值。但是forEach也有一些局限,不能continue跳过或者break终止循环
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
1 2 3 4 5 6 7 |
|
三、for in
for(var item in arr|obj){} 可以用于遍历数组和对象
遍历数组时,item表示索引值, arr表示当前索引值对应的元素 arr[item]
遍历对象时,item表示key值,arr表示key值对应的value值 obj[item]
for in一般循环遍历的都是对象的属性,遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性
1 2 3 4 5 6 7 8 9 10 11 12 |
|
四、for of
ES6中新增加的语法 for of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for of 循环,以替代 for in 和 forEach() ,并支持新的迭代协议。for of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等。
循环一个数组:
1 2 3 4 5 |
|
循环一个字符串:
1 2 3 4 5 6 7 8 |
|
循环一个Map:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
循环一个 Set:
1 2 3 4 5 6 7 |
|
循环一个拥有enumerable属性的对象
for of循环并不能直接使用在普通的对象上,但如果我们按对象所拥有的属性进行循环,可使用内置的Object.keys()方法:
1 2 3 |
|
循环一个生成器(generators):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
五、jQuery里面的$.each
$.each(arr|obj, function(k, v))
可以用来遍历数组和对象,其中k表示索引值或者key值,v表示value值
1 2 3 4 5 6 7 |
|
六、jQuery里面的$().each()
$().each()在dom处理上面用的较多,主要是用来遍历DOMList。如果页面有多个input标签类型为checkbox,对于这时用$().each()来处理多个checkbox,例如:
1 2 3 4 |
|
结论:
推荐在循环对象属性的时候使用for in,在遍历数组的时候的时候使用for of;
for in循环出的是key,for of循环出的是value;
for of是ES6新引入的特性。修复了ES5的for in的不足;
for of不能循环普通的对象,需要通过和Object.keys()搭配使用。
跳出循环的方式有如下几种:
return 函数执行被终止;
break 循环被终止;
continue 循环被跳过。
更多编程相关知识,请访问:编程视频!!
以上就是JavaScript数组遍历的6种方法比较的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
如何将 javascript 回调转换为 promise?方法介绍
javascript操作dom对象之select(详细解答)
更多相关阅读请进入《javascript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者