在 Array[index] 上使用 Array.at()

本文將探討為何在存取陣列元素時，Array.prototype.at() 比 Array[index] 更為理想。

動機

以往存取陣列元素時，我習慣使用 Array[index]，例如 Array[1]。這是我所熟悉的，也是我學習取得陣列元素的方式。

然而，最近一位同事在程式碼審查中提出：「為什麼不使用 Array.prototype.at() 而不是直接使用索引？」

我的程式碼是：

<code class="language-javascript">const element = arr[1];</code>

他建議改為：

<code class="language-javascript">const element = arr.at(1);</code>

這種方法讓我眼前一亮，因為它看起來非常簡潔直覺。

如何使用 Array.prototype.at()

Array.prototype.at() 接受一個整數作為參數，並傳回數組中的對應元素。

例如，對於陣列：

<code class="language-javascript">const arr = ["One", "Two", "Three"];</code>

呼叫：

<code class="language-javascript">arr.at(0); // 返回 "One"</code>

這與方括號表示法 array[0] 等效。你可能會好奇，這有什麼差別呢？接下來我們將深入探討使用此方法的優點。

為什麼 Array[index] 不理想？

讓我們來看看一些應該使用 Array.prototype.at() 而不是 Array[index] 的場景。

取得陣列的最後一個元素

假設有一個字串陣列：

<code class="language-javascript">const sports = ["basketball", "baseball", "football"];</code>

要取得陣列的最後一個元素 "football"，你可以這樣寫：

<code class="language-javascript">const lastElement = sports[sports.length - 1];</code>

這是正確的方法；但是，使用 Array.prototype.at() 方法可以寫得更簡潔：

<code class="language-javascript">const lastElement = sports.at(-1);</code>

是不是比較易讀？

型態推論

在 TypeScript 中，方括號表示法不會將 undefined 包含在型別推論中。

<code class="language-typescript">const arr: string[] = [];
const element = arr[0];
console.log(element); // undefined</code>

element 的型別推論為 string，而不是 string | undefined。

我們期望 TypeScript 在編寫此程式碼時給出編譯錯誤。

通常，我們希望確保存取的陣列元素存在。

<code class="language-typescript">const arr: string[] = [];
const element = arr[0];
if (typeof element === 'string') console.log(element);</code>

奇怪的是，我們正在檢查 TypeScript 推斷為 string 的元素類型。

你可能會想到使用型別斷言：

<code class="language-typescript">const element: string | undefined = arr[0];</code>

然而，這並非理想的做法，因為我們不應該自己承擔編寫完美程式碼的責任。

為了解決這個問題，我們可以採取兩種方法：

1. 編寫型別保護函數
2. 使用 noUncheckedIndexedAccess 編譯器選項

兩種方法都能很好地工作，但如果使用 Array.prototype.at()，則無需兩者兼顧。

<code class="language-typescript">const arr: string[] = [];
const element = arr.at(0); // string | undefined
console.log(element);</code>

如果嘗試將 element 插入到類型為 string 的其他值中，則會得到編譯錯誤：

<code class="language-javascript">const element = arr[1];</code>

結論

使用 Array.prototype.at() 可以編寫更簡潔的程式碼，並避免添加額外的函數和配置。

Array.prototype.at() 在 Mozilla 開發者網路上的解釋：連結 (請替換為實際連結)

以上是在 Array[index] 上使用 Array.at()的詳細內容。更多資訊請關注PHP中文網其他相關文章！