【JavaScript實用技巧（一）】迴圈遍歷與跳出迴圈遍歷

部落格說明

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

說明

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

一想到想到迴圈的跳出，立馬就會想到三個關鍵：break、return、continue，在業務中也會需要在遍歷的時候退出迴圈。

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迴圈

跳出迴圈

上面提到跳出迴圈時想到的三個關鍵詞：break、return、continue，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
公眾號-歸子莫，小程式-小歸部落格

【JavaScript實用技巧（一）】迴圈遍歷與跳出迴圈遍歷