這篇文章給大家分享的是有關(guān)JavaScript中for循環(huán)怎么用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

專業(yè)從事成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè),高端網(wǎng)站制作設(shè)計(jì),微信小程序開(kāi)發(fā),網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊(duì)竭力真誠(chéng)服務(wù)，采用H5場(chǎng)景定制+CSS3前端渲染技術(shù)，成都響應(yīng)式網(wǎng)站建設(shè)公司，讓網(wǎng)站在手機(jī)、平板、PC、微信下都能呈現(xiàn)。建站過(guò)程建立專項(xiàng)小組，與您實(shí)時(shí)在線互動(dòng)，隨時(shí)提供解決方案，暢聊想法和感受。

前言

對(duì)于for循環(huán)，相信大家再常用不過(guò)了。但是這回說(shuō)下for循環(huán)是因?yàn)榭创a時(shí)我居然沒(méi)有看明白一個(gè)for循環(huán)的意思，真是不應(yīng)該啊。

這個(gè)for循環(huán)是這么寫(xiě)的：

for (var i = 0, rule; rule = rules[i++];) {
 //do something
}

這個(gè)寫(xiě)法是什么意思呢？后面再說(shuō)，現(xiàn)賣個(gè)關(guān)子，這個(gè)寫(xiě)法我感覺(jué)還是挺好的。

for循環(huán)寫(xiě)法對(duì)效率的影響

說(shuō)上面那段代碼之前，先說(shuō)一下for循環(huán)的效率問(wèn)題。在接觸js時(shí)關(guān)于for循環(huán)的寫(xiě)法和對(duì)效率影響的文章挺不少的。但總的來(lái)說(shuō)對(duì)于for循環(huán)的寫(xiě)法有這么兩種：

1. 不寫(xiě)聲明變量的寫(xiě)法：for(var i = 0;i<arr.length;i++){}

2. 寫(xiě)聲明變量的寫(xiě)法：for(var i = 0,len = arr.length;i < len;i++){}

除了for循環(huán)還有forEach() ，也有文章說(shuō)forEach()效率最高，推薦用forEach()寫(xiě)法，那么到底哪個(gè)效率高呢？做個(gè)測(cè)試來(lái)看看吧。

測(cè)試方案

總的測(cè)試方案如下：

1. 做一個(gè)容納4千萬(wàn)的測(cè)試數(shù)組變量。

2. 分別用兩種寫(xiě)法的for循環(huán)和foreach對(duì)這個(gè)測(cè)試變量進(jìn)行遍歷。

3. 在同一臺(tái)穩(wěn)定機(jī)器上，進(jìn)行10次測(cè)試，最后取平均值。

4. 測(cè)試環(huán)境：CPU:Inter(R) Core i5-3210M,RAM:12GM,system:win10(x64)

測(cè)試流程

制作測(cè)試變量

先用while循環(huán)做個(gè)測(cè)試變量出來(lái)，這個(gè)很簡(jiǎn)單，具體如下：

var testArrs = [],
 i = 0;
while(i<40000000){
 testArrs.push(i);
 i++;
}

編寫(xiě)相應(yīng)測(cè)試函數(shù)

測(cè)量和執(zhí)行時(shí)間的代碼，我用的是console.time()和console.timeEnd()來(lái)進(jìn)行測(cè)試。

針對(duì)這個(gè)三個(gè)for循環(huán)，先做出三個(gè)函數(shù)出來(lái)，他們分別是

foreach循環(huán)測(cè)試:

function testForeach(testArrs){
 console.time('foreach');
 var newArrs = [];
 testArrs.forEach(function(i){
 newArrs.push(i);
 });
 console.timeEnd('foreach');
}

沒(méi)有聲明變量的for循環(huán):

function testNoDeclare(testArrs){
 console.time('no declare');
 var newArrs = [];
 for(var i = 0;i<testArrs.length;i++){
 newArrs.push(i);
 }
 console.timeEnd('no declare');
}

有變量聲明的寫(xiě)法

function testUseDeclare(testArrs){
 console.time('use declare');
 var newArrs = [];
 for(var i = 0,len = testArrs.length;i<len;i++){
 newArrs.push(i);
 }
 console.timeEnd('use declare');
}

執(zhí)行測(cè)試函數(shù)

執(zhí)行測(cè)試函數(shù)這里很簡(jiǎn)單啦，就是調(diào)用函數(shù)就可以了

testForeach(testArrs);
testNoDeclare(testArrs);
testUseDeclare(testArrs);

測(cè)試結(jié)果

經(jīng)過(guò)10次測(cè)試，得到了以下結(jié)果

foreach	不寫(xiě)聲明	寫(xiě)聲明
2372.891ms	672.530ms	743.974ms
2431.821ms	710.275ms	805.676ms
2422.448ms	729.287ms	741.014ms
2330.894ms	730.200ms	755.390ms
2423.186ms	703.255ms	769.674ms
2379.167ms	689.811ms	741.040ms
2372.944ms	712.103ms	710.524ms
2316.005ms	726.518ms	726.522ms
2535.289ms	733.826ms	747.427ms
2560.925ms	793.680ms	817.098ms
平均值	平均值	平均值
2414.56ms	720.15ms	755.83ms

不知道結(jié)果有沒(méi)有讓你出乎意料呢？沒(méi)想到最平常的寫(xiě)法效率最高，為什么？我也沒(méi)想明白，誰(shuí)知道就告訴我吧，但我估計(jì)寫(xiě)聲明的寫(xiě)法是沒(méi)有意義的。因?yàn)?code>len = arr.length這個(gè)arr.length可能已經(jīng)緩存起來(lái)了，所以我們?cè)诼暶鱾€(gè)len變量來(lái)存儲(chǔ)是沒(méi)有意義的。

最后附上全部測(cè)試代碼，復(fù)制到自己的電腦上直接就可以測(cè)試了，要是有不合理的地方請(qǐng)告訴我吧

var testArrs = [],
 i = 0;
while(i<40000000){
 testArrs.push(i);
 i++;
}
function testForeach(testArrs){
 console.time('foreach');
 var newArrs = [];
 testArrs.forEach(function(i){
 newArrs.push(i);
 });
 console.timeEnd('foreach');
}
function testNoDeclare(testArrs){
 console.time('no declare');
 var newArrs = [];
 for(var i = 0;i<testArrs.length;i++){
 newArrs.push(i);
 }
 console.timeEnd('no declare');
}
function testUseDeclare(testArrs){
 console.time('use declare');
 var newArrs = [];
 for(var i = 0,len = testArrs.length;i<len;i++){
 newArrs.push(i);
 }
 console.timeEnd('use declare');
}
testForeach(testArrs);
testNoDeclare(testArrs);
testUseDeclare(testArrs);

for循環(huán)的特殊寫(xiě)法

下面說(shuō)下文章剛開(kāi)始說(shuō)的那個(gè)我沒(méi)看懂的代碼，說(shuō)之前先溫習(xí)下再熟悉不過(guò)的for循環(huán)語(yǔ)法。for循環(huán)的基本語(yǔ)法是:

for (語(yǔ)句 1; 語(yǔ)句 2; 語(yǔ)句 3)
{
被執(zhí)行的代碼塊
}

1. 語(yǔ)句1：在循環(huán)（代碼塊）開(kāi)始前執(zhí)行

2. 語(yǔ)句2：定義運(yùn)行循環(huán)（代碼塊）的條件

3. 語(yǔ)句3：在循環(huán)（代碼塊）已被執(zhí)行之后執(zhí)行

如果我們用for循環(huán)要輸出1到10，我們可以這么寫(xiě):

for(var i=0;i<10;i++){
console.log(i);
}

但是！根據(jù)上面的語(yǔ)法說(shuō)明，我們也可以寫(xiě)成這樣

for(var i=10;i--;){
console.log(i);
}

剛開(kāi)始看的時(shí)候我也很疑惑，怎么能這么寫(xiě)？語(yǔ)句2放的是循環(huán)條件，i–是什么判斷條件。其實(shí)不然，在語(yǔ)句2中，如果返回true循環(huán)會(huì)繼續(xù)執(zhí)行。在js中0,null,undefined,false,'',””作為條件判斷時(shí)，其結(jié)果為false，也就說(shuō)當(dāng)i–到0的時(shí)候就是false，循環(huán)就終止了。

再回到文章開(kāi)頭的代碼

for (var i = 0, rule; rule = rules[i++];) {
 //do something
}

這個(gè)rule = rules[i++]就是判斷條件，當(dāng)成為undefined時(shí)就會(huì)終止循環(huán)啦。所以這段代碼換成普通寫(xiě)法就是這樣的：

for(var i = 0;i < rules.length;i++){
 var rule = rules[i]
}

其實(shí)就是把判斷和賦值放到一起了，一邊循環(huán)一邊賦值。是不是挺簡(jiǎn)單？

感謝各位的閱讀！關(guān)于“JavaScript中for循環(huán)怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

文章標(biāo)題：JavaScript中for循環(huán)怎么用
地址分享：http://jinyejixie.com/article36/ppissg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、App開(kāi)發(fā)、網(wǎng)站策劃、網(wǎng)站維護(hù)、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(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)