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