Array.prototype.foreach 是 JavaScript 中用于遍歷數組并執行副作用操作的方法，它不返回新數組且無法中斷循環。1. foreach 適用于遍歷數組并執行如打印、修改 dom 或累加等無返回值的操作；2. 它不支持異步等待，回調中的 async/await 不會阻止循環繼續執行；3. 使用時需注意不能通過 return、break 或 continue 控制流程；4. 避免在遍歷過程中修改原數組長度，可能導致跳過元素或無限循環；5. 回調中 this 的指向需通過 thisarg 指定或使用箭頭函數保持上下文。
Array.prototype.forEach 是 JavaScript 中一個非常常用的數組迭代方法，它允許你遍歷數組的每個元素，并對每個元素執行一個回調函數。它不會改變原數組，也不會返回新數組，主要用于執行副作用操作，比如打印、修改 DOM 元素等。
使用 forEach 很直接。你只需要在一個數組實例上調用它，并傳入一個回調函數作為參數。這個回調函數會在數組的每個元素上被執行一次。
const numbers = [1, 2, 3, 4, 5]; // 回調函數可以接收三個參數： // item: 當前遍歷到的元素 // index: 當前元素的索引 // array: 正在遍歷的原始數組 numbers.forEach(function(item, index, array) { console.log(`元素在索引 ${index} 處的值是: ${item}`); // 實際上，array 參數不常用，但了解它存在是有益的 }); // 實際開發中，更常見的是使用箭頭函數，它更簡潔： const fruits = ['apple', 'banana', 'cherry']; fruits.forEach((fruit, i) => { console.log(`我喜歡 ${fruit} (索引 ${i})`); }); // forEach 的常見用途： // 1. 簡單地遍歷并打印數組內容，或者進行一些不產生新數組的操作。 // 2. 對每個元素執行一些 DOM 操作，比如為所有列表項添加樣式。 const listItems = document.querySelectorAll('.my-list li'); // 假設頁面中有這樣的元素 if (listItems.Length > 0) { // 確保元素存在，避免運行時錯誤 listItems.forEach(item => { item.classList.add('highlight'); // 給每個列表項添加一個高亮類 }); } // 3. 累加或計算總和，但需要注意的是，forEach 不返回結果，所以你得在外部維護一個變量。 let sum = 0; numbers.forEach(num => { sum += num; }); console.log(`所有數字的總和是: ${sum}`); // sum 現在是 15 // 重要的是要理解：forEach 不會等待異步操作完成。 const urls = ['/api/data1', '/api/data2']; urls.forEach(async url => { // 這里的 async/await 不會暫停 forEach 循環的執行。 // forEach 會立即迭代到下一個元素，不會等待當前的 fetch 完成。 try { const response = await fetch(url); const data = await response.json(); console.log(`成功獲取 ${url} 的數據:`, data); } catch (error) { console.error(`獲取 ${url} 失敗:`, error); } }); console.log('forEach 循環已經執行完畢，但網絡請求可能還在后臺進行中。'); // 如果你需要等待所有異步操作完成，通常會考慮使用 Promise.all 配合 map，或者 for...of 循環。 ### forEach與for循環、map、Filter等其他迭代方法的區別是什么？ 這確實是 JavaScript 數組方法里一個經常讓人感到困惑的地方，畢竟它們都能遍歷數組。`forEach` 最核心的特點就是它**只管迭代，不返回任何東西**（它的返回值永遠是 `undefined`）。這意味著你不能像 `map` 或 `filter` 那樣，在 `forEach` 后面直接鏈式調用其他數組方法。它存在的意義，就是讓你能夠對數組的每個元素執行一些“副作用”操作，比如打印到控制臺，或者修改頁面上的 DOM 元素。 舉個例子，如果你想把一個數組里的所有數字都翻倍，然后得到一個新數組，那么 `map` 才是你的最佳選擇： ```javascript const originalNumbers = [1, 2, 3]; const doubledNumbers = originalNumbers.map(num => num * 2); console.log(doubledNumbers); // 輸出: [2, 4, 6] console.log(originalNumbers); // 輸出: [1, 2, 3] - 原數組保持不變，這是 map 的一個優點
而如果你用 forEach 來做這個，你就得在外部聲明一個新數組，然后在 forEach 里面手動 push：
立即學習“Java免費學習筆記（深入）”；
const originalNumbersForForEach = [1, 2, 3]; const newArrayWithForEach = []; originalNumbersForForEach.forEach(num => { newArrayWithForEach.push(num * 2); }); console.log(newArrayWithForEach); // 輸出: [2, 4, 6] // 看起來也能實現，但不如 map 聲明式和簡潔。
filter 呢，顧名思義就是“過濾”。它也返回一個新數組，但這個新數組只包含那些回調函數返回 true 的元素。它非常適合從數組中篩選出符合特定條件的子集：
const allNumbers = [1, 2, 3, 4, 5, 6]; const evenNumbers = allNumbers.filter(num => num % 2 === 0); console.log(evenNumbers); // 輸出: [2, 4, 6]
至于傳統的 for 循環（包括 for (let i = 0; i 
const items = [10, 20, 30, 40]; for (let i = 0; i < items.length; i++) { if (items[i] === 30) { console.log('找到 30 了，中斷循環！'); break; // forEach 不支持 break } console.log(items[i]); } // 輸出: 10, 20, 找到 30 了，中斷循環！ async function processDataSequentially() { const dataIds = ['id_A', 'id_B', 'id_C']; for (const id of dataIds) { console.log(`開始處理 ID: ${id}`); // 假設這里是耗時的異步操作，for...of 循環會等待它完成 await new Promise(resolve => setTimeout(resolve, 500)); console.log(`ID: ${id} 處理完畢。`); } console.log('所有數據都按順序處理完了。'); } processDataSequentially();
所以，選擇哪個方法，真的取決于你的具體需求：是想遍歷并執行操作（forEach），還是想轉換生成一個新數組（map），還是想從數組中篩選出子集（filter），或者你需要更底層的控制和異步操作的順序執行（for 循環或 for…of）。
在使用forEach時，有哪些常見的陷阱或需要注意的地方？
forEach 確實非常方便，但它也有自己的“脾氣”和一些需要留心的地方，不然可能會踩到坑。
首先，也是最重要的一點：forEach 不能中斷循環。如果你在回調函數里 return 了，或者嘗試使用 break 甚至 continue，它都不會像傳統的 for 循環那樣停止或跳過當前迭代。forEach 會堅定不移地把數組里的每個元素都走一遍。這就意味著，如果你想在找到某個特定元素后就停止遍歷，或者在滿足某個條件時提前退出，forEach 就不是合適的工具了。這時候，你可能需要回過頭用 for…of 循環，或者考慮 Array.prototype.some()（只要有一個元素滿足條件就返回 true 并停止）或 Array.prototype.every()（所有元素都滿足條件才返回 true）。
const numbersToFind = [10, 20, 30, 40]; let found = false; numbersToFind.forEach(num => { if (num === 30) { console.log('在 forEach 里找到 30 了，但循環不會停止。'); // return; // 這里 return 只是退出當前回調，不退出 forEach 循環 // break; // SyntaxError: Illegal break statement } console.log(num); }); console.log('forEach 已經遍歷完所有元素，即使找到了目標。'); // 如果想提前退出，可以這樣做： const hasThirty = numbersToFind.some(num => { if (num === 30) { console.log('some 方法找到 30 了，并停止了遍歷。'); return true; // 返回 true 會讓 some 停止并返回 true } console.log(num); return false; }); console.log(`數組中是否包含 30？ ${hasThirty}`); // 輸出： // 10 // 20 // some 方法找到 30 了，并停止了遍歷。 // 數組中是否包含 30？ true
另一個需要特別留意的點是，forEach 的回調函數是同步執行的。即使你在回調函數內部使用了 async/await，forEach 本身也不會等待這些異步操作完成。它會立即繼續處理下一個元素。這可能導致一些出乎意料的行為，尤其是在處理大量異步請求時。你可能會看到 forEach 循環“瞬間”完成，但實際的網絡請求或文件操作還在后臺默默進行。
const userIds = [101, 102, 103]; userIds.forEach(async id => { console.log(`開始為用戶 ID: ${id} 獲取數據...`); // 模擬一個異步操作，比如從服務器獲取用戶詳情 await new Promise(resolve => setTimeout(resolve, 200 * id)); // 模擬不同耗時 console.log(`用戶 ID: ${id} 的數據獲取完畢。`); }); console.log('forEach 循環本身已經執行完畢，但異步數據獲取還在進行中。'); // 你會發現控制臺先打印出所有“開始獲取”和“forEach 循環完畢”，然后才陸續打印“數據獲取完畢”。
還有，forEach 在遍歷過程中不應該修改原數組的長度。如果在 forEach 內部添加或刪除了元素，行為可能會變得非常奇怪且難以預測。例如，如果你刪除了當前正在遍歷的元素，后面的元素可能會被跳過；如果你添加了元素，新添加的元素可能不會被遍歷到，或者在某些邊緣情況下導致無限循環（雖然在 forEach 中修改長度導致無限循環的情況比較少見，但在傳統的 for 循環里更容易出現）。最佳實踐是保持原數組的穩定，如果需要修改，考慮 map 或 filter 返回新數組，或者在遍歷前就確定好所有操作。
最后，是關于 this 上下文的問題。在非箭頭函數的 forEach 回調中，this 的指向默認是 undefined（在嚴格模式下）或全局對象（非嚴格模式下），而不是你期望的調用 forEach 的那個對象。雖然 forEach 提供了第二個參數 thisArg 來綁定 this，但使用箭頭函數通常是更簡潔、更現代的解決方案，因為箭頭函數會捕獲其定義時的 this。
const userProcessor = { prefix: 'User:', users: ['Alice', 'Bob'], processUsers: function
