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

kohoh_ 發布于2019-08-22 10:41 / 593人閱讀

摘要：接觸這么多年，第一次總結一下它的遍歷語法。而且你必須借助特定的結構才能遍歷數據結構。它的作用是遍歷對象的鍵名。建議僅在遍歷數組的時候使用。另一個優點是，它可以遍歷任何部署了接口的數據結構，甚至是非的數據類型，即自己定義的數據結構。

接觸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

GPU云服務器云服務器最基本的幾種 js緩存的幾種方法 js繼承的幾種方式服務器請求的幾種方式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91089.html

前端培訓-初級階段（13、18）

摘要：年月歐洲計算機制造商協會發表了標準，它是的一個擴延，它也被稱為年月首版年月日截止發布日期，的官方名稱是，國際意在更頻繁地發布包含小規模增量更新的新版本，下一版本將于年發布，命名為。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的...

YorkChen 2019-08-23 16:22 評論0 收藏0
JavaScript：遍歷

摘要：中可以實現遍歷的數據類型主要是對象，其中包括普通對象與數組。遍歷器是一種接口，為各種不同的數據結構提供統一的訪問機制。實例五遍歷器對象實例五是的遍歷過程，通過手動調用其對象的方法實現信息獲取。為每個數組元素執行函數。前言 ??將依據自身痛點學習，計劃對原生JavaScript寫一個系統，本文為第一篇，感興趣的同學可以關注個人公眾號：ZeroToOneMe，或者github博客，將持續...

ThinkSNS 2019-08-23 17:51 評論0 收藏0
javascript 異步編程

摘要：執行棧清空后，檢查微任務隊列，將可執行的微任務全部執行。對象的錯誤具有冒泡性質，會一直向后傳遞，直到被捕獲為止。返回的遍歷器對象，可以依次遍歷函數內部的每一個狀態。表示函數里有異步操作，表示緊跟在后面的表達式需要等待結果。 javascript 是單線程執行的，由js文件自上而下依次執行。即為同步執行，若是有網絡請求或者定時器等業務時，不能讓瀏覽器傻傻等待到結束后再繼續執行后面的js吧...

Nino 2019-08-23 18:33 評論0 收藏0
JavaScript引擎

摘要：由于這些是驅動的工具，因此它們由引擎提供支持。兩個主要引擎是的和的引擎。然后，四個即時進程啟動，分析并執行解析器生成的字節碼。簡單來說，這個引擎獲取源代碼，將其分解為字符串，獲取這些字符串并將它們轉換為編譯器可以理解的字節碼，然后執行它。渲染引擎和JavaScript引擎先從一張圖片來理解下這兩個引擎 showImg(https://segmentfault.com/img/bVb...

馬龍駒 2019-08-30 15:55 評論0 收藏0
JavaScript引擎

摘要：由于這些是驅動的工具，因此它們由引擎提供支持。兩個主要引擎是的和的引擎。然后，四個即時進程啟動，分析并執行解析器生成的字節碼。簡單來說，這個引擎獲取源代碼，將其分解為字符串，獲取這些字符串并將它們轉換為編譯器可以理解的字節碼，然后執行它。渲染引擎和JavaScript引擎先從一張圖片來理解下這兩個引擎 showImg(https://segmentfault.com/img/bVb...

garfileo 2019-08-02 13:57 評論0 收藏0