【JavaScript實用技巧(一)】迴圈遍歷與跳出迴圈遍歷

歸子莫發表於2021-10-26

【JavaScript實用技巧(一)】迴圈遍歷與跳出迴圈遍歷

部落格說明

文章所涉及的資料來自網際網路整理和個人總結,意在於個人學習和經驗彙總,如有什麼地方侵權,請聯絡本人刪除,謝謝!

說明

一想到想到迴圈,順其自然就想到了for,while就在這裡先不講(因為本身它就有迴圈退出的條件),但其實Js的迴圈不止這個for,這裡來詳細講講Js的幾種類for迴圈。

一想到想到迴圈的跳出,立馬就會想到三個關鍵:breakreturncontinue,在業務中也會需要在遍歷的時候退出迴圈。

for類迴圈遍歷陣列

1、for迴圈
const arr = [1, 2, 3, 4, 5, 6]
for (let i = 0; i < arr.length; i++) {
    console.log(i)
}

這是最簡單的一種,也是使用的頻率最高的一種,效能相對其他的要好,所以看見別人原始碼底層用這個千萬別xxx,三思而行!

不過這裡有一個細節可以優化,將長度作為臨時變數存起來,不必每次計算,在資料量大的時候提升較為明顯。

const arr = [1, 2, 3, 4, 5, 6]
for (let i = 0, len = arr.length; i < len; i++) {
    console.log(i)
}
2、for...in迴圈
const arr = [1, 2, 3, 4, 5, 6]
for (let i in arr) {
    console.log(i)
}

在陣列上應用for...in迴圈,不僅僅會包含所有數值索引,還會包含所有可列舉屬性。所以一般用於物件的遍歷上。且這個方式的迴圈遍歷的效率最低

3、forEach迴圈
const arr = [1, 2, 3, 4, 5, 6]
arr.forEach((item, index) => {
    console.log(item)
})

forEach是陣列自帶的,使用的頻率比較高,但是效能比for要低一些

由於forEach是陣列自帶的,所以在其他類似陣列型別下需要做個變化,它的效能比forEach弱一些

const arr = [1, 2, 3, 4, 5, 6]
Array.prototype.forEach.call(arr, (item) => {
    console.log(item)
})
4、map遍歷
const arr = [1, 2, 3, 4, 5, 6]
arr.map((item) => {
    console.log(item)
})

map的方式用的原來越多,使用十分方便和優雅,但是效率比較低(相對於forEach)

5、for...of遍歷
const arr = [1, 2, 3, 4, 5, 6]
for (let i of arr) {
    console.log(i)
}

for...of是es6的新語法,效能比for...in好一些,但是比不上普通for迴圈

跳出迴圈

上面提到跳出迴圈時想到的三個關鍵詞:breakreturncontinue,for和for...in能夠響應這三個關鍵詞,但是forEach不行。先講一下這個三個關鍵詞吧

for迴圈跳出迴圈
  • break:break語句會使執行的程式立刻退出包含在最內層的迴圈或者退出一個switch語句。
  • continue:continue語句和break語句相似。所不同的是,它不是退出一個迴圈,而是開始迴圈的一次新迭代。continue語句只能用在while語句、do/while語句、for語句、或者for/in語句的迴圈體內, 在其他地方使用都會引起錯誤。
  • return:return語句就是用於指定函式返回的值。return語句只能出現在函式體內,出現在程式碼中的其他任何地方造成語法錯誤。
const arr = [1, 2, 3, 4, 5, 6]
for (let i = 0; i < arr.length; i++) {
    console.log(i)
    if (i === 2) {
        return;
        // breack;
    }
}
forEach跳出迴圈

在forEach中不響應這個跳出迴圈的語句,所以它不行,但一定要讓它行,行不行?行!

有一個騷操作,直接來個拋錯,我不終止,我拋錯!

try {
  const arr = [1, 2, 3, 4, 5, 6]
  // 執行到第4次,結束迴圈
  arr.forEach(function(item,index){
    if (item === 4) {
       throw new Error("EndIterative");
    }
    console.log(item);// 1,2,3
  });
} catch(e) {
   if(e.message!="EndIterative") throw e;
};
// 下面的程式碼不影響繼續執行
console.log(10);

但是這種方式不推薦,我們沒必要,直接用for迴圈就好,速度又快

感謝

萬能的網路

以及勤勞的自己,個人部落格GitHub測試GitHub

公眾號-歸子莫,小程式-小歸部落格

相關文章