理清Js的各种遍历

JS的遍历

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

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

首先，先分清原生js和jQuery的遍历方法：

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 树向下遍历单一层级。