全文共1979字，預計學習時長
6分鐘
圖源：Unsplash
For循環語句是把雙刃劍。
它在我心中佔有特殊的位置。
長期以來，我一直依賴它來擺脫while循環。
然而不可避免地，這會導致我忘記增加計數器變量。使用for循環來迭代數組的標準語法已經深深印入腦海：For i = 0，i < length，i++…
在教授編程時，我總是用已知迭代次數時使用for循環來區分while和for循環。其原因在於所有的循環語法都是預置好的——這樣可以減少錯誤（尤其是對初學者而言），並使得在六個月後重新查看代碼時可以更輕鬆地瀏覽。
在編寫JavaScript代碼時，我已開始遠離了鍾愛的迭代結構，轉而使用.forEach（）方法，你也應該這樣做。與公式化的for循環相比，.forEach（）方法進一步減少了開銷，甚至能更清晰地傳遞代碼的意圖。這是因為方法的名稱總是出現在描述塊（block）的口述句中：對於數組中的每個元素，執行某些操作。
圖源：Unsplash
什麼是.forEach()方法？
.forEach()作為數組類的內置方法被引入ECMAScript 2015（也稱作ES6）。
根據Mozilla文檔，該方法將回調作為參數。簡單地說，回調是會對數組中的每個元素執行的函數。當需要對每個元素執行相同操作（該操作適合用函數實現）時，使用.forEach（）是最適合的。該函數有一個必需的參數，即當前值，以及分別用於索引，基本數組和已分配的this值的三個可選參數。
一個基本示例
為了演示.forEach（）方法的基本用法，定義一個整數數組並將每個值的平方打印到控制檯。
let nums= [1,2,3,4,5];nums.forEach(function(n) {
console.log(n ** 2); // 1, 4, 9, 16,25
});
包含索引
如果還想輸出索引值該怎麼辦呢？可以在函數定義中包含第二個可選參數。
let nums= [1,2,3,4,5];nums.forEach(function(n,i) {
console.log("i: " + n ** 2);
});
/*
0: 1
1: 4
2: 9
3: 16
4: 25
*/
用.forEach()存儲值
如果不想輸出所有內容，而是將結果存儲在新變量中該怎麼辦呢？
let nums= [1,2,3,4,5];
let result = nums.forEach(function(n) {
return(n ** 2);
});
console.log(result); // undefined
正如上面的代碼段所示，.forEach()方法沒有返回值。事實上，使用.map()方法才是正確答案。不過，如果一定要通過.forEach()方法實現，可以手動為新數組賦值。
let nums= [1,2,3,4,5];
let result = [];
nums.forEach(function(n) {
result.push(n**2);
});
console.log(result); // [1,4,9,16,25];
壓縮回調函數
如果想進一步壓縮代碼，可以考慮將回調函數替換為箭頭函數。
let nums= [1,2,3,4,5];
nums.forEach((n) => {
console.log(n**2);
});
事實上，如果只使用值（沒有可選參數），可以不要n兩邊的括號；如果循環只是單個語句，完全可以不要大括號{}。
let nums= [1,2,3,4,5];nums.forEach(n => console.log(n**2));
圖源：Unsplash
.forEach()有什麼缺陷嗎？
答案是肯定的，在選擇編寫代碼方式時總需要進行一些權衡。一個潛在的缺點（實際上並不是缺點，只是為了鼓勵更好的實踐）是，無法像for循環一樣修改每個索引中的原始值：
let nums= [1,2,3,4,5];for(let i=0; i<nums.length>
nums[i] = nums[i] ** 2;
}console.log(nums); // [1,4,9,16,25]
更新：ES6中引入的for ... of循環旨在將.forEach（）替換為更簡單且具有更高性能的標準。多謝分享此信息的讀者，不勝感激！
我們一起分享AI學習與發展的乾貨
"/<nums.length>閱讀更多 讀芯術 的文章
關鍵字: 循環 ECMAScript JavaScript
