理清Js的各种遍历

Posted ZpandaZ

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了理清Js的各种遍历相关的知识,希望对你有一定的参考价值。

JS的遍历

说起遍历,我常用JQ的each遍历DOM集,以及用map遍历Json。然而还有很多遍历方法for,forEach,for in等,有原生的有JQ的,他们有何区别呢?

所以我决定写一写博客梳理我关于遍历的知识。

首先,先分清原生jsjQuery的遍历方法:

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的各种遍历的主要内容,如果未能解决你的问题,请参考以下文章

js数组遍历方法总结

AJAX相关JS代码片段和部分浏览器模型

js遍历 各种方法优缺点

js遍历 各种方法优缺点

vbscript 各种自定义代码片段 - 有关详细信息,请参阅注释

十条jQuery代码片段助力Web开发效率提升