本文將探討為何在訪問數(shù)組元素時(shí)，Array.prototype.at() 比 Array[index] 更為理想。

動(dòng)機(jī)

以往訪問數(shù)組元素時(shí)，我習(xí)慣使用 Array[index]，例如 Array[1]。這是我所熟悉的，也是我學(xué)習(xí)獲取數(shù)組元素的方式。

然而，最近一位同事在代碼審查中提出：“為什么不使用 Array.prototype.at() 而不是直接使用索引？”

我的代碼是：

const element = arr[1];

他建議改為：

const element = arr.at(1);

這種方法讓我眼前一亮，因?yàn)樗雌饋矸浅：啙嵵庇^。

如何使用 Array.prototype.at()

Array.prototype.at() 接受一個(gè)整數(shù)作為參數(shù)，并返回?cái)?shù)組中的相應(yīng)元素。

例如，對(duì)于數(shù)組：

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

調(diào)用：

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

這與方括號(hào)表示法 array[0] 等效。你可能會(huì)好奇，這有什么區(qū)別呢？接下來我們將深入探討使用此方法的優(yōu)勢(shì)。

為什么 Array[index] 不理想？

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

獲取數(shù)組的最后一個(gè)元素

假設(shè)有一個(gè)字符串?dāng)?shù)組：

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

要獲取數(shù)組的最后一個(gè)元素 "football"，你可以這樣寫：

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

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

const lastElement = sports.at(-1);

是不是更易讀？

類型推斷

在 TypeScript 中，方括號(hào)表示法不會(huì)將 undefined 包含在類型推斷中。

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

element 的類型被推斷為 string，而不是 string | undefined。

我們期望 TypeScript 在編寫此代碼時(shí)給出編譯錯(cuò)誤。

通常，我們希望確保訪問的數(shù)組元素存在。

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

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

你可能會(huì)想到使用類型斷言：

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

然而，這并非理想的做法，因?yàn)槲覀儾粦?yīng)自己承擔(dān)編寫完美代碼的責(zé)任。

為了解決這個(gè)問題，我們可以采取兩種方法：

1. 編寫類型保護(hù)函數(shù)
2. 使用 noUncheckedIndexedAccess 編譯器選項(xiàng)

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

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

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

const element = arr[1];

結(jié)論

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

Array.prototype.at() 在 Mozilla 開發(fā)者網(wǎng)絡(luò)上的解釋：鏈接 (請(qǐng)?zhí)鎿Q為實(shí)際鏈接)

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