想知道嗎:JS forEach()的 index 位置

W.S.Wade
Aug 26, 2020

--

我其實不太懂為什麼這篇會有這麼多人觀看,也有注意到一些尖銳用字的留言,如果浪費了你的時間我很抱歉,但每個人都有新手的時候,這篇文章是我還是超級新手時寫下的,更多的是留給自己做個提醒,自己也犯過一些很蠢很基本的錯誤,在面多更深更廣的學習領域時依然不畏前行。

基本上我已經不會再在這個平台產出更多文章了,有的話都會在我自己的部落格,也幾乎不會是技術性質的文章,都是跟我自身生活比較有關,如果你到此一遊我依然很開心多年前我的我能夠遇到現在的你,我不知道什麼契機讓你估狗到相關關鍵字找到這篇文章,但如果你也跟當年的我一樣是個超級新手正在試探這個領域的話,那我真心歡迎你也祝福你順利!!

前一陣子在應用 JS 的 Array.prototype.forEach() 時,因為有需求要調用 index 這個隱含參數,然而在 coding 的過程中稍不留意,在不同的地方寫出了類似以下兩種將 eindex 位置互換的寫法

var array = [1,2,3]array.forEach((e,index) => console.log((e + 1),index))array.forEach((index,e) => console.log((e + 1),index))

一時之間還沒注意到有什麼不同,然而到我自己在 code review 檢查時,除了發現自己怎麼有兩種寫法外,還發現了這樣會使 console.log print 出來的東西略有不同

我以為的 e 應該就是 陣列目前正在 forEach 處理的單項元素,而 index 就是 陣列目前正在 forEach 處理的元素索引 ,其實這樣的理解也沒有錯,但我以為的是,第二種寫法:

array.forEach((index,e) => console.log((e + 1),index))

也會 print 出這樣的結果:

然而結果居然與我想的不一樣!各位讀者知道為什麼嗎?
以下要來公布解答囉!

百思不得其解的情況下,求助了當初在 好想工作室 同期的學員,我們的班長 Yachen大人,而她一語道破我的盲點...

Yachen:foreach(item, index) 是 js 的隱含參數,第一個參數就是遍歷的元素,第二個參數是 index,即使改參數名字,第一個也一定是遍歷的元素,第二個一定是 index,名字只是障眼法哈哈

完全點破啊!看完立刻了解,我只是將 陣列目前正在 forEach 處理的單項元素 命名從 e 改成 index ,而將 陣列目前正在 forEach 處理的元素索引 命名從 index 改成 e ,他的本質意義並沒有改變,畢竟 callback 函數中所帶的參數,並不是用名字來區分,而是依次向callback函數傳入三個參數啊!

--

--

W.S.Wade

爬山、羽球、PC Game、咖啡、貓奴、動漫、內在探索、哲學思辨,用活動板手溝通的前端工程師