JavaScript中for循環(huán)怎么用

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

前言

對(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)賣(mài)個(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é)果

不知道結(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ò)，可以把它分享出去讓更多的人看到吧！