理清Js的各種遍曆

標籤：屬性   表示   設計   兩種   index   []   sel   get   寫部落格   

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 樹向下遍曆單一層級。

理清Js的各種遍曆