【JavaScript實用技巧（一）】循環遍歷與跳出循環遍歷

【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

公衆號-歸子莫，小程序-小歸博客