怎樣快速而優(yōu)雅地遍歷 JavaScript 數(shù)組

我們一般用循環(huán)來(lái)遍歷數(shù)組，而循環(huán)一直是 JavaScript

創(chuàng)新互聯(lián)專(zhuān)注于西安網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供西安營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，西安網(wǎng)站制作、西安網(wǎng)頁(yè)設(shè)計(jì)、西安網(wǎng)站官網(wǎng)定制、小程序開(kāi)發(fā)服務(wù)，打造西安網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供西安網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

性能問(wèn)題的常見(jiàn)來(lái)源，有時(shí)循環(huán)用得不好會(huì)嚴(yán)重降低代碼的運(yùn)行速度。例如，遍歷數(shù)組時(shí)，我們會(huì)很自然地寫(xiě)出下面這種代碼：

// 未優(yōu)化的代碼1

var array = [0,1,2,3,4,5,6,7,8,9];

// for-in 循環(huán)

for (var val in array) {

fn(val);

}

還有這一種常見(jiàn)寫(xiě)法：

// 未優(yōu)化的代碼2

var array = [0,1,2,3,4,5,6,7,8,9];

// for 循環(huán)

for (var i=0; i array.length; i++) {

fn(array[i]);

}

這兩個(gè)方法看上去似乎不錯(cuò)，而且語(yǔ)義上也很容易理解。但是這兩個(gè)方法都有性能問(wèn)題：

“未優(yōu)化的代碼1”中，for-in 需要分析出 array 的每個(gè)屬性，這個(gè)操作的性能開(kāi)銷(xiāo)很大，用在 key

已知的數(shù)組上是非常不劃算的。所以盡量不要用 for-in，除非你不清楚要處理哪些屬性，例如 JSON 對(duì)象這樣的情況。

“未優(yōu)化的代碼2”中，循環(huán)每執(zhí)行一次，都要檢查一次 array.length 的值，讀屬性要比讀局部變量慢，尤其是當(dāng) array

里存放的都是 DOM 元素（像 array =

document.getElementByClassName("class");），因?yàn)槊看巫x array.length

都要掃描一遍頁(yè)面上 class="class" 的元素，速度更是慢得抓狂。

假如你的任務(wù)是從頁(yè)面上 100 個(gè)復(fù)選框中，找出選中的復(fù)選框的 value，并把它們放入一個(gè)數(shù)組的話，在 IE

上可能得花上半秒才能完成。結(jié)果就是，用戶(hù)在列表里選擇了自己要的項(xiàng)目，點(diǎn)擊提交后起碼要過(guò)半秒才會(huì)有反應(yīng)，直觀感覺(jué)就是很卡。

我們絕不能接受這樣的結(jié)果，所以我們需要加快循環(huán)終止條件的計(jì)算速度。先把數(shù)組的長(zhǎng)度先查出來(lái)，存進(jìn)一個(gè)局部變量，那么循環(huán)的速度將會(huì)大大提高：

// 快速的代碼

var array = [0,1,2,3,4,5,6,7,8,9];

// for 循環(huán)

var length = array.length;

for (var i=0; i

length; i++) {

fn(array[i]);

}

現(xiàn)在只需要讀取一次 array.length 的值，遍歷數(shù)組的過(guò)程大大加快了。

不過(guò)我們還可以讓它更快。如果循環(huán)終止條件不需要進(jìn)行比較運(yùn)算，那么循環(huán)的速度還可以更快：

// 最快的代碼

var array = [0,1,2,3,4,5,6,7,8,9];

// for 循環(huán)

for (var i = array.length; i--;)

{

fn(array[i]);

}

把數(shù)組下標(biāo)改成向 0 遞減，循環(huán)終止條件只需要判斷 i 是否為 0

就行了。因?yàn)檠h(huán)增量和循環(huán)終止條件結(jié)合在一起，所以可以寫(xiě)成更簡(jiǎn)單的 while 循環(huán)：

// 最快且優(yōu)雅的代碼

var array = [0,1,2,3,4,5,6,7,8,9];

// while 循環(huán)

var i = array.length;

while (i--) {

fn(array[i]);

}

JS 隨機(jī)插入li

以下html代碼包括頁(yè)面的css，以及純 js 生成 li 的代碼注釋

!DOCTYPE html

html

head

title檢測(cè)/title

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

!-- ul li 的樣式，為了好看，要加上哦~~~ --

style type="text/css"

ul { border-right:1px solid green; border-bottom:1px solid green; width:404px; overflow:hidden; list-style:none; padding:0px; margin:0px; }

ul li { float:left; width:100px; height:100px; line-height:100px; text-align:center; margin:0 auto; padding:0px; border-left:1px solid green; border-top:1px solid green; }

/style

script type="text/javascript"

window.onload = function () {

// 獲得 ul

var ul = document.getElementById("ul");

for (var i = 0; i 12; i++) {

var math = Math.random(); // 隨機(jī)生成 0-1 之間的數(shù)，如果小于等于0.5則生成空的，否則生成內(nèi)容

var li = document.createElement("li");

if (math = 0.5) {

li.innerHTML = "";

} else {

li.innerHTML = "內(nèi)容";

}

// 為 ul 添加 li 節(jié)點(diǎn)

ul.appendChild(li);

}

}

/script

/head

body

ul id="ul"

/ul

/body

/html

js中l(wèi)et的問(wèn)題？

這個(gè)問(wèn)題涉及到JS閉包的概念，閉包的概念比較晦澀，以我的表達(dá)能力，想要給你講通不容易，嘗試一下吧，希望你能理解我說(shuō)的。

盡管?i?是存在于塊級(jí)作用域中，但是?arr[i]?也存在于塊級(jí)作用域中，?所以?arr[i]?是可以訪問(wèn)到?i的，這個(gè)可以理解吧。

當(dāng)你把一個(gè)匿名方法賦值給?arr[i]?時(shí)，匿名方法也是可以訪問(wèn)到?i?的，并且在匿名方法的方法體中保存了對(duì)?i?的引用，所以盡管for循環(huán)結(jié)束了，但是，引用依然存在。因?yàn)槟阍诙x這個(gè)匿名方法的時(shí)候就持有了?i。

后期這個(gè)i是始終不會(huì)被釋放的，也就是說(shuō)會(huì)造成我們常說(shuō)的內(nèi)存泄露。因?yàn)楹笃诒M管你不再調(diào)用arr[0]或arr[1]方法，但對(duì)i的引用始終存在。就好比是占著茅坑不拉屎，你不用，但是卻把坑給占著，導(dǎo)致別人也用不了。這樣的話內(nèi)存就白白的被浪費(fèi)掉了一個(gè)，也就是內(nèi)存泄露。

好吧，希望你能理解，不懂再問(wèn)吧

補(bǔ)充：

上面這段代碼的原理是一樣的。

標(biāo)題名稱(chēng)：javascript拉屎的簡(jiǎn)單介紹
轉(zhuǎn)載注明：http://sd-ha.com/article10/dseccdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、做網(wǎng)站、網(wǎng)站營(yíng)銷(xiāo)、網(wǎng)站策劃、企業(yè)建站、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)