停止使用 .forEach：使用 for...of 循環改造你的代碼
作者：dev
從.forEach?切換到for...of?可以為JavaScript/TypeScript項目帶來諸多好處，包括更好的異步代碼處理、更靈活的循環控制和增強的可讀性。在下次需要迭代數組時，不妨嘗試使用for...of循環。它可能會成為你處理數組迭代的新寵。
在JavaScript和TypeScript開發中，數組迭代是一項常見任務。許多開發者習慣性地使用.forEach方法，因為它簡單直觀。然而，ES6引入的for...of循環提供了更強大、更靈活的迭代方式。本文將探討為什么應該考慮使用for...of循環，以及它如何提高代碼效率和表達能力。
基礎對比：.forEach vs for...of
.forEach方法：
const colors = ['紅', '藍', '綠'];
colors.forEach(shade => console.log(shade));for...of循環：
const seasons = ['春', '夏', '秋', '冬'];
for (const time of seasons) {
console.log(time);
}為什么選擇for...of？
1. 更好的異步處理
在處理異步操作時，for...of循環表現出色。.forEach方法不能很好地與async/await配合使用，因為它不能原生處理Promise。例如：
使用.forEach的異步代碼（存在問題）：
const urls = ['url1', 'url2', 'url3'];
urls.forEach(async (url) => {
const data = await fetch(url);
console.log(data);
});這段代碼不會等待每個fetch操作完成就開始下一個，可能導致競態條件和意外結果。
使用for...of的異步代碼（正確處理）：
const urls = ['url1', 'url2', 'url3'];
for (const url of urls) {
const data = await fetch(url);
console.log(data);
}這個例子中，每個fetch操作會等待前一個完成，確保順序執行和可預測的行為。
2.支持break和continue語句
.forEach方法不支持break和continue語句，這限制了它在某些場景下的靈活性。
使用for...of中斷循環：
const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
if (num === 3) break;
console.log(num);
}使用for...of繼續循環：
const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
if (num === 3) continue;
console.log(num);
}3.提高可讀性和可維護性
for...of循環可以提高代碼可讀性，特別是在處理嵌套結構或復雜操作時。例如，遍歷多維數組：
使用for...of進行嵌套迭代：
const matrix = [[1, 2], [3, 4], [5, 6]];
for (const row of matrix) {
for (const item of row) {
console.log(item);
}
}高級使用技巧
1.遍歷對象
使用Object.entries()可以讓for...of遍歷對象：
const person = { name: 'Alice', age: 30 };
for (const [key, value] of Object.entries(person)) {
console.log(`${key}: ${value}`);
}2.與生成器函數配合使用
function* fibonacci() {
let [prev, curr] = [0, 1];
while (true) {
yield curr;
[prev, curr] = [curr, prev + curr];
}
}
for (const num of fibonacci()) {
if (num > 100) break;
console.log(num);
}3.結合解構使用
const people = [['Alice', 30], ['Bob', 25], ['Charlie', 35]];
for (const [name, age] of people) {
console.log(`${name} is ${age} years old.`);
}結論
從.forEach切換到for...of可以為JavaScript/TypeScript項目帶來諸多好處，包括更好的異步代碼處理、更靈活的循環控制和增強的可讀性。在下次需要迭代數組時，不妨嘗試使用for...of循環。它可能會成為你處理數組迭代的新寵。
通過采用for...of循環，開發者可以編寫出更加高效、靈活和易于維護的代碼。這不僅提高了開發效率，還能在處理復雜數據結構和異步操作時提供更大的便利性。在現代JavaScript開發中，掌握并合理使用for...of循環將成為提升代碼質量的重要技能之一。
責任編輯：武曉燕
來源：
大遷世界
