亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

javascript的幾種常見遍歷數(shù)據(jù)結(jié)構(gòu)的語法

kohoh_ / 658人閱讀

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

接觸JavaScript這么多年，第一次總結(jié)一下它的遍歷語法。以前我大部分時間都在老版本的JavaScript下寫代碼，所以大部分時間都是用for...in，隨著ES6的發(fā)布，有必要對各個遍歷語法進行梳理，指出它的優(yōu)缺點。

for/while循環(huán)語句

這就不多說了，所有語言都會涉及的循環(huán)。不過單純的for/while能力有限，而且性能上也堪憂。而且你必須借助特定的結(jié)構(gòu)才能遍歷數(shù)據(jù)結(jié)構(gòu)。這里就不詳解了，簡單舉例：

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];
}

優(yōu)點

它可以支持所有對象類型的數(shù)據(jù)，包括數(shù)組，甚至是函數(shù)等。而且語法簡單，在其他語言中都很少看到。

缺點

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

建議

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

forEach方法

在php中都有foreach語法，但是JavaScript中并沒有，而且php中的foreach遍歷對象也OK。但在JavaScript中，forEach僅是數(shù)組提供的內(nèi)置方法。

用法

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

有點

可以同時獲取index和value，不必再像以前遍歷數(shù)組那樣，還要再在for的{}去獲取值。

缺點

僅支持數(shù)組。而且一旦調(diào)用，會完全遍歷一次，break, continue, return都無效。

建議

僅在遍歷數(shù)組的時候使用。

for...of語句

這是ES6新增的語法，它基于ES6新增的Iterator和Symbol開發(fā)的，也就是說我們用ES5代碼只能模擬，但無法從原理上實現(xiàn)它。

用法

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

優(yōu)點

在遍歷中直接取值。感覺上和for...in形成互補，一個在遍歷中取鍵名，另一個取值。另一個優(yōu)點是，它可以遍歷任何部署了Iterator接口的數(shù)據(jù)結(jié)構(gòu)，甚至是非JavaScript的數(shù)據(jù)類型，即自己定義的數(shù)據(jù)結(jié)構(gòu)。

缺點

除了Map結(jié)構(gòu)外，不能取到鍵名。不能用來遍歷普通對象。

建議

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

遞歸（尾調(diào)用）

ES6中對函數(shù)尾調(diào)用進行了優(yōu)化，而如果尾調(diào)用結(jié)構(gòu)還是一個遞歸函數(shù)，那么更加節(jié)省性能，簡直升天。

用法

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);
});

優(yōu)點

可以不涉及循環(huán)，遞歸的性能高于循環(huán)，特別是尾調(diào)遞歸。

缺點

代碼結(jié)構(gòu)復(fù)雜，千變?nèi)f化，沒有統(tǒng)一的規(guī)律可以掌握。

建議

當處理比較復(fù)雜的數(shù)據(jù)，可能用循環(huán)會消耗掉性能，而又比較在意性能的時候使用。

map、filter方法

map方法也可以遍歷數(shù)組，但是它的主要用途是在遍歷過程中進行修改，而filter遍歷過程一樣，但是只是通過回調(diào)函數(shù)的返回值來確定是不是要保留當前遍歷到的這個值。也就是說，這兩個方法都可能會修改被遍歷的數(shù)組本身。

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

包括jQuery和underscore都提供了each。這是我們理想是使用方法，它結(jié)合了上面的forEach, for...of，是我們最希望得到的方法。

用法

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

優(yōu)點

對我們最常用的array和object兩種類型進行遍歷都可以，同時可以得到鍵名和值。

缺點

性能上不確定，畢竟不是語言的原生，內(nèi)部肯定經(jīng)過加工處理。而且目前不知道是否對Map等結(jié)構(gòu)支持。

建議

在復(fù)雜度比較高的情況下，希望代碼簡潔明確，同時也基于這些第三方庫的情況下使用。其實性能上也不用太過擔心，畢竟現(xiàn)在的電腦都很牛逼。

這篇文章最早發(fā)布在我的博客 http://www.tangshuang.net/286...
可以加我微信號和我交流：wwwtangshuangnet

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/91089.html

相關(guān)文章

  • 前端培訓(xùn)-初級階段（13、18）

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

    YorkChen 評論0 收藏0

  • JavaScript：遍歷

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

    ThinkSNS 評論0 收藏0

  • javascript 異步編程

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

    Nino 評論0 收藏0

  • JavaScript引擎

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

    馬龍駒 評論0 收藏0

  • JavaScript引擎

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

    garfileo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<