Abstract

我是阿傑，既然昨天已經介紹了 findLast()，那今天當然就是它的西柏林啦，我相信...

如果想知道為什麼 ECAMScript 為什麼要做語義這麼接近的咩色，可以參考 Day 21 的介紹，或者直接看看 TC39 對提案的解釋 proposal-array-find-from-last 。

簡而言之，創造這個咩色的目的看起來不外乎就是 語義化 及 性能！

整篇會分成以下幾個部分：

• 使用時機
• 語法
• 說明
• 範例
• 注意事項
• ECMAScript
• 結論

findLastIndex() 這個 method 的全寫應該是 Array.prototype.findLastIndex，有興趣可以看 Day 2 的介紹，這邊會直接使用 findLastIndex() 作為替代。

範例的 callback 都會使用箭頭函式做介紹，如果尚不熟悉的話可以參考 MDN 的介紹。

最後會透過分析 ECMAScript 來驗證是否有吻合，如果覺得 ECMAScript 有點艱澀難懂，我們在 Day 4 、Day 5 有介紹其相關術語可以幫助閱讀。

語法

Arrow function (直接定義箭頭函式)

findLastIndex((element, index, array) => {
	/* 測試條件 */
* })

callback (直接傳入回呼函式)

findLastIndex(callbackFn, thisArg)

Inline Callback (直接定義匿名函式)

findLastIndex(function(element, index, array){
	/* 測試條件 */ 
}, thisArg)

參數

findLastIndex() 的第 1 個參數為 callback, 第 2 個參數為可選的 (optional) thisArg。

callback

這個 callback 又稱為 testing function 或 predicate (規範用語)，顧名思義它會被拿來測試某些條件，再準確一點應該稱作斷言 (assert) ，因為它最後回傳的值會被強制轉換成布林值 (true 或 false)！

當這個 callback 被呼叫時會帶入 element、index、array 三個參數。

findLastIndex() 會按照陣列元素的順序依次 (升冪) 呼叫這個 callback，直到這個 callback 回傳 true 或當陣列元素已被遍歷完畢即停止，換句話說，如果這個陣列有 5 個元素，那這個 callback 最多會被呼叫 5 次。

• element
  陣列當前的元素 (element)，callback 的第 1 個參數，為 findLastIndex() 當前遍歷到的元素，也就表示 element 會依陣列的順序動態變化。

• index
  陣列當前元素的索引值 (index)，callback 的第 2 個參數，為 findLastIndex() 當前遍歷到的元素其索引值，也就表示 index 會依陣列的順序動態變化。

• array
  呼叫 findLastIndex() 的陣列本身 (被遍歷的陣列本身)， callback 的第 3 個參數，不論 findLastIndex() 當下遍歷到哪個元素上， array 都會指向被遍歷的陣列本身，也就是呼叫 findLastIndex() 的陣列本身。

thisArg

為 findLastIndex() 的第 2 個選擇性參數，它會被傳入 callback 並作為其 this 的值，否則就會是 undefined。

請注意，如果 callback 使用箭頭函式的話則沒有作用！可以參考範例的 Example - 4。

Return Value

回傳第 1 個從陣列結尾找到的元素之索引， 如果沒有找到則回傳 -1。

Mutability

不會變動到原陣列。

說明

findLastIndex() 會從陣列結尾開始尋找，當找到第 1 個符合條件 (callbalck) 的元素，則回傳該元素的索引，如果遍歷完整個陣列都沒找到則回傳 -1。

findLastIndex 會跟據陣列長度決定 callback 的最大呼叫次數，也就是說當 callback 只要一回傳 true 便會中止 findLastIndex() 的執行，因此之後的 callback 便不會再被呼叫，如果都是回傳 false 便等於遍歷完整個陣列。

findLastIndex() 可以處理稀疏陣列 (sparse array) 的 empty slot，其值會是 undefined，可以利用 callback 來對其進行判斷。

範例

Example 1 - 基礎用法

const names = ['Emma', 'Alejo', 'Pedro', 'Cate', 'Arpad']

const pickedIndex = names.findLastIndex(name => name === 'Pedro')

console.log(pickedIndex)
// 2

從陣列結尾開始尋找，回傳第 1 個為 'Pedro' 的元素索引。

Example 2 - 使用 index 參數

const names = ['Tyler', 'Coby', 'Kingsley', 'Amber', 'Emma', 'Pedro']

const pickedIndex = names.findLastIndex((name, index) => name.length > 4 && index > 1)

console.log(pickedIndex)
// 5

從陣列結尾開始尋找，回傳第 1 個長度大於 4 且 索引大於 1 的元素索引。

Example 3 - 陣列包含多個物件時

const actors = [
	{ name: "Denzel Washington", age: 67 },
	{ name: "Tom Hardy", age: 45 },
	{ name: "Brad pitt", age: 58 },
	{ name: "Michael Fassbender", age: 45 },
	{ name: "Jake Gyllenhaal", age: 41 },
	{ name: "Collin Farrel", age: 46 }
]

const pickedActor = actors.findLastIndex((actor, index) => actor.age >= 45 && index < 4)

console.log(pickedActor)
// 3

從陣列結尾開始尋找，回傳第 1 個屬性 age 大於等於 45 且 索引小於 4 的物件元素索引。

Example 4 - 使用 thisArg 參數

const stars = ["Charlize", "Emma", "Jake", "Collin"]

const ages = [35, 16, 12, 41]

const childStar = stars.findLastIndex(function(_star, index) {
	return this[index] < 18;
}, ages)

console.log(childStar)
// 2

這邊將 ages 作為 findLastIndex() 的第 2 個參數傳入，因此裡面的 callback 之 this 會指向 ages 這個陣列。

我們利用 index 來取用 ages 相對應索引的元素，並判斷其值是否小於 18。

注意事項

雖然 findLastIndex() 會自動對回傳的值做布林轉換，但可以考慮讓 callback 直接回傳布林值，這樣比較不會有轉型上的失誤，閱讀起來也較直覺。

請注意 callback 定義時的參數順序，依序應為 element、index、array，假設你只想使用 index 而不使用 element，你仍需定義 element，可以增加底線以利閱讀，例如這樣：

array.findLastIndex((_element, index) => { /* ... */ })

有一點值得注意的是，雖然 findLastIndex() 不會變動到原陣列，但我們傳進去的 callback 卻有可能 ，而陣列元素被遍歷的範圍在第一次呼叫 callback 前就已經確立好了 (也就是 findLastIndex() 被呼叫後但 callback 尚未被呼叫)，因此有可能會發生以下的狀況：

• 在這之後才被添加 (appended) 進去的元素不會被 callback 遍歷到
• 如果原先存在的元素被變動到了， 那當 callback 遍歷到此元素時會使用它最新的值，而非原先的值
• 如果尚未被遍歷到的元素被刪除了，那它還是會被遍歷到，如果還是找不到便會往 prototype 尋找

上述這種高併發 (concurrent) 的更動會導致程式碼非常難以閱讀，非常不建議使用 (除非有特殊的情境)。

ECMAScript

• ECMA 連結 - Array.prototype.findLastIndex
• 語法 - Array.prototype.findLastIndex(predicate[,thisArg])

findLastIndex() 的演算法並沒有要求呼叫它的物件必須是一個陣列，可以從步驟 1 跟 Note 2 得知，為了方便解釋，這邊一律使用陣列來說明；我們先來驗證一下它是否被做成了通用的咩色：

演算法的前 3 個步驟都是用來做一些前置處理，包括轉型、確認長度、確認參數是否為一個 function 等...。

步驟 4 為最關鍵的一步 - 它將初始的計數 k 設為 len -1，也就是陣列中的長度 - 1 (陣列的最後一個索引)，這表示它將從陣列的結尾開始遍歷整個陣列的元素。

步驟 5 會看到遍歷的次數在 callback 第 1 次呼叫前就已經決定好了，驗證了上面注意事項所說。

遍歷的期間，每次都會將原物件相對應屬性的值取出， 這個值會在 callback 呼叫時當作第 1 個參數帶入；而遍歷當前的計數會被當作第 2 個參數帶入；這驗證了上面所說的 callback 之 element、及 index 會在遍歷的途中動態變化。

步驟 5-c 會對 callback 回傳的結果進行布林轉換，只要為 true 便會立即中止 findLastIndex()，並回傳當前的元素之索引，如果所有的結果都是 flase，則回傳 -1。

有一個地方很值得注意，就是為什麼 findLastIndex() 可以判斷稀疏陣列的 empty slot，這是因為其演算法並沒有使用 HasProperty() 這個抽象操作，因此 findLastIndex 在呼叫 callback 之前並不會檢查陣列是否有這個屬性，所以 callback 的 element 參數會拿到一個 undefined， 而不少 method 都有使用 HasProperty()，因此它們不會遍歷到 empty slot (例如 some())，我們來驗證一下：

而出現 ? 的地方代表有可能會丟出錯誤，所以整個演算法有 4 處有機會丟出錯誤。

我們來看看步驟 5-c 裡面的 Call() ，點進去可以看到當傳入的物件不是一個可呼叫 (callable) 的物件，例如 function，便會丟出一個 TypeError ，但這個可能已在 findLastIndex 的步驟 3 給過濾掉，因此這裡的 Call 有機會丟出錯誤的地方便落在了其步驟 3 - 呼叫 [[Call]] 這個 internal method 的時候！

當呼叫 [[Call]] 的這個物件，其 internal slot - [[IsClassConstructor]] 為 true 時，即表示這個物件是一個 class constructor，所以 [[Call]] 便丟出一個 TypeError，這也表示 class cunstructor 無法單純使用 [[Call]] 這個 internal method 來呼叫，這可能也是為什麼有人認為 class 不僅僅是語法糖，因爲它跟 function 之間存在一些本質上的差異。

如果出現 ! 則代表這個 abstract operation 絕對不會丟出錯誤，例如步驟 5 - a 的 ToString() 它會在參數是一個 Symbol 時丟出一個 TypeError，但我們確定丟進去的是一個 Number (F(k))，因此不會有丟出錯誤的可能。

從 ECMAScript 的演算法來看，尚未找到與 JavaScript 實作的不同之處。

結論

另外要注意的是 findLastIndex() 目前還處在提案的 stage 4，也就是說它雖然尚未出現在正式的 ECMAScript 2022 裡，但已經被納入 TC39 的 ECMAScript 2023 草案裡！這意味著它應該已經有被瀏覽器實作出來，我們可以點進這張 相容性表格 來看看，會發現 4 大瀏覽器的較新版本皆已支援 (IE 一如既往的沒有呢 XD)，我們來確認一下吧：

最後，希望大家可以開心地使用各種咩色，體驗它帶給你的便利，祝大家歸剛沒煩惱。

參考資源

• Array.prototype.findLastIndex - MDN
• Draft ECMA 262 - TC39
• Proposal-Array-Find-From-Last - TC39