javascript的幾種常見遍歷數據結構的語法

接觸JavaScript這麼多年，第一次總結一下它的遍歷語法。之前我大部分時間都在老版本的JavaScript下寫代碼，因此大部分時間都是用for...in，隨着ES6的發佈，有必要對各個遍歷語法進行梳理，指出它的優缺點。

for/while循環語句

這就很少說了，全部語言都會涉及的循環。不過單純的for/while能力有限，並且性能上也堪憂。並且你必須藉助特定的結構才能遍歷數據結構。這裏就不詳解了，簡單舉例：

var arr = [1,2,3];
for(var i = 0,len = arr.length;i < len;i ++) {
  var value = arr[i];
}

for...in語句

這也是JavaScript比較早特有的一個語句。它的做用是遍歷對象的鍵名。

用法

var obj = {
  a : '1',
  b : '2',
  c : '3'
};
for(var key in obj) {
  var value = obj[key];
}

優勢

它能夠支持全部對象類型的數據，包括數組，甚至是函數等。並且語法簡單，在其餘語言中都不多看到。

缺點

不只遍歷普通鍵，連原型鏈上的鍵都去遍歷了。

建議

在遍歷經常使用對象時使用，這裏的經常使用對象，就是咱們上面舉例的鍵值對（不是Map）。

forEach方法

在php中都有foreach語法，可是JavaScript中並無，並且php中的foreach遍歷對象也OK。但在JavaScript中，forEach僅是數組提供的內置方法。

用法

[1,2,3].forEach(function(value,index){
  console.log(index + ':' + value);
});

有點

能夠同時獲取index和value，沒必要再像之前遍歷數組那樣，還要再在for的{}去獲取值。

缺點

僅支持數組。並且一旦調用，會徹底遍歷一次，break, continue, return都無效。

建議

僅在遍歷數組的時候使用。

for...of語句

這是ES6新增的語法，它基於ES6新增的Iterator和Symbol開發的，也就是說咱們用ES5代碼只能模擬，但沒法從原理上實現它。

用法

var list = new Map().set('a',1).set('b',2).set('c',3);
for (var [key,value] of list) {
  console.log(key + ' => ' + value);
}

優勢

在遍歷中直接取值。感受上和for...in造成互補，一個在遍歷中取鍵名，另外一個取值。另外一個優勢是，它能夠遍歷任何部署了Iterator接口的數據結構，甚至是非JavaScript的數據類型，即本身定義的數據結構。

缺點

除了Map結構外，不能取到鍵名。不能用來遍歷普通對象。

建議

在遍歷時想要值的時候，可使用，但不能用在普通對象上面。Map類型推薦使用。

遞歸（尾調用）

ES6中對函數尾調用進行了優化，而若是尾調用結構仍是一個遞歸函數，那麼更加節省性能，簡直升天。

用法

function forEach(object,factory,_keyIndex = 0,_keys = object.keys()) {
 var key = _keys[_keyIndex];
 var value = object[key];
 if(typeof factory === 'function') factory(key,value);
 _keyIndex ++;
 return forEach(object,factory,_keyIndex,_keys);
}
var obj = {
  a : 1,
  b : 2,
  c : 3
};
forEach(obj,function(key,value){
  console.log(key + ' => ' + value);
});

優勢

能夠不涉及循環，遞歸的性能高於循環，特別是尾調遞歸。

缺點

代碼結構複雜，變幻無窮，沒有統一的規律能夠掌握。

建議

當處理比較複雜的數據，可能用循環會消耗掉性能，而又比較在乎性能的時候使用。

map、filter方法

map方法也能夠遍歷數組，可是它的主要用途是在遍歷過程當中進行修改，而filter遍歷過程同樣，可是隻是經過回調函數的返回值來肯定是否是要保留當前遍歷到的這個值。也就是說，這兩個方法均可能會修改被遍歷的數組自己。

第三方each、map方法：理想方法

包括jQuery和underscore都提供了each。這是咱們理想是使用方法，它結合了上面的forEach, for...of，是咱們最但願獲得的方法。

用法

$.each(object,(key,value) => {
  console.log(key + ' => ' + value);
});
[1,2,3].each((index,value) => {
  console.log(index + ':' + value);
});

優勢

對咱們最經常使用的array和object兩種類型進行遍歷均可以，同時能夠獲得鍵名和值。

缺點

性能上不肯定，畢竟不是語言的原生，內部確定通過加工處理。並且目前不知道是否對Map等結構支持。

建議

在複雜度比較高的狀況下，但願代碼簡潔明確，同時也基於這些第三方庫的狀況下使用。其實性能上也不用太過擔憂，畢竟如今的電腦都很牛逼。

---

這篇文章最先發布在個人博客 http://www.tangshuang.net/286...
能夠加我微信號和我交流：wwwtangshuangnet