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

動機

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

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

我的程式碼是：

const element = arr[1];

他建議改為：

const element = arr.at(1);

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

如何使用 Array.prototype.at()

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

例如，對於陣列：

const arr = ["One", "Two", "Three"];

呼叫：

arr.at(0); // 返回 "One"

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

為什麼 Array[index] 不理想？

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

取得陣列的最後一個元素

假設(shè)有一個字串陣列：

const sports = ["basketball", "baseball", "football"];

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

const lastElement = sports[sports.length - 1];

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

const lastElement = sports.at(-1);

是不是比較易讀？

型態(tài)推論

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

const arr: string[] = [];
const element = arr[0];
console.log(element); // undefined

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

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

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

const arr: string[] = [];
const element = arr[0];
if (typeof element === 'string') console.log(element);

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

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

const element: string | undefined = arr[0];

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

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

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

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

const arr: string[] = [];
const element = arr.at(0); // string | undefined
console.log(element);

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

const element = arr[1];

結(jié)論

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

Array.prototype.at() 在 Mozilla 開發(fā)者網(wǎng)路上的解釋：連結(jié) (請?zhí)鎿Q為實際連結(jié))

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