理清Js的各种遍历
Posted ZpandaZ
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了理清Js的各种遍历相关的知识,希望对你有一定的参考价值。
JS的遍历
说起遍历,我常用JQ的each遍历DOM集,以及用map遍历Json。然而还有很多遍历方法for,forEach,for in等,有原生的有JQ的,他们有何区别呢?
所以我决定写一写博客梳理我关于遍历的知识。
1.原生JS遍历方法:for、for in、forEach、for of、map
2.jquery遍历方法:$.each、find
原生JS遍历方法
for
常用于遍历数组
forEach
(ES5新增方法)用于遍历数组,遍历过程不能被终止(不能使用continue, break,但是可以使用return或者if中止)
[].forEach(function(value,index,arr){...} [, thisObject]);
callback : 函数测试数组的每个元素。(value:遍历数组的对应内容,index:对应的索引,arr:数组本身)
thisObject : 对象作为该执行回调时使用(可用于改变上下文参数this)。
返回值:返回创建数组
for in
循环遍历对象的key,即键值对里的键。
常用于遍历对象(一般不推荐遍历数组 [把数组索引当成key去遍历],该遍历不能保证顺序,而且 原型链 上的属性也会被遍历到,因此一般常用来遍历 非数组的对象 并且使用 hasOwnProperty() 方法去过滤掉原型链上的属性)。
for (variable in object) { ...}
for of
(ES6新增方法)循环遍历对象的value,即键值对里的值,与for in遍历key相反。
for-of循环不仅仅是为遍历数组而设计的。基本上所有类数组对象都适用,比如DOM NodeListS。
相比forEach(),它支持break,continue和return。
总之,他设计的初衷就是成为一个优秀的遍历方法,已解决现有遍历的问题。
for (variable of iterable) {...}
map
(ES5新增方法,Array.prototype.map,注意与ES6的Map键值对结构的对象的区别)这里的map指“映射”,也就是原数组被“映射”成对应新数组,返回值是一个新数组。基本用法跟forEach方法类似:
var newArray = [].map(function(value,index,arr){return ...} [, thisObject]);
跟forEach区别:map的回调函数中支持return返回值(即不改变原数组,克隆该数组,把克隆这一份数组的对应项改变)
JQuery遍历方法
$.each
这里有两种遍历
1.选择器遍历
用于DOM操作
$(selector).each(function(index,element)){...}
index:选择器的index位置,element:当前的元素(也可使用 “this” 选择器)
2.$.each
用于遍历(数组、对象、JSON),类似原生JS的forEach(注意这里函数的参数顺序不同)
$.each(data, function (index, value) {...}
data:遍历的对象,index:当前元素位置,value:遍历的值
find
用于DOM操作
$(selector).find(selector)
如果给定一个表示 DOM 元素集合的 jQuery 对象,.find() 方法允许我们在 DOM 树中搜索这些元素的后代,并用匹配元素来构造一个新的 jQuery 对象。.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。
以上是关于理清Js的各种遍历的主要内容,如果未能解决你的问题,请参考以下文章