Menggunakan Array.at() atas Array[index]

Artikel ini akan meneroka sebab Array.prototype.at() lebih ideal daripada Array[index] apabila mengakses elemen tatasusunan.

Motivasi

Pada masa lalu, apabila mengakses elemen tatasusunan, saya pernah menggunakan Array[index], seperti Array[1]. Inilah yang saya biasa dan bagaimana saya belajar untuk mendapatkan elemen tatasusunan.

Bagaimanapun, baru-baru ini seorang rakan sekerja bertanya dalam semakan kod: "Mengapa tidak menggunakan Array.prototype.at() dan bukannya menggunakan indeks secara langsung?"

Kod saya ialah:

const element = arr[1];

Dia mencadangkan menukar kepada:

const element = arr.at(1);

Pendekatan ini menonjol kepada saya kerana ia kelihatan sangat mudah dan intuitif.

Cara menggunakan Array.prototype.at()

menerima integer sebagai hujah dan mengembalikan elemen yang sepadan dalam tatasusunan. Array.prototype.at()

Contohnya, untuk tatasusunan:

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

Panggil:

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

Ini bersamaan dengan tatatanda kurungan segi empat sama

. Anda mungkin tertanya-tanya, apa bezanya? Seterusnya kita akan menyelami kelebihan menggunakan pendekatan ini. array[0]

Mengapa Array[index] tidak sesuai?

Mari kita lihat beberapa senario di mana

harus digunakan dan bukannya Array.prototype.at(). Array[index]

Dapatkan elemen terakhir tatasusunan

Andaikan terdapat tatasusunan rentetan:

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

Untuk mendapatkan elemen terakhir "bola sepak" tatasusunan, anda boleh menulis:

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

Ini adalah pendekatan yang betul; namun, ia boleh ditulis dengan lebih ringkas menggunakan kaedah

: Array.prototype.at()

const lastElement = sports.at(-1);

Adakah lebih mudah dibaca?

Taip inferens

Dalam TypeScript, notasi kurungan segi empat sama tidak termasuk

dalam inferens jenis. undefined

Jenis

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

disimpulkan sebagai element, bukan string. string | undefined

Kami menjangkakan TypeScript akan memberikan ralat kompilasi semasa menulis kod ini.

Lazimnya, kami ingin memastikan elemen tatasusunan yang diakses wujud.

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

Perkara yang pelik ialah kami menyemak jenis elemen yang TypeScript simpulkan sebagai

. string

Anda mungkin terfikir untuk menggunakan penegasan jenis:

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

Walau bagaimanapun, ini tidak sesuai kerana kita tidak sepatutnya mengambil tanggungjawab untuk menulis kod yang sempurna.

Untuk menyelesaikan masalah ini, kita boleh mengambil dua pendekatan:

Tulis fungsi perlindungan jenis
Gunakan
2. pilihan pengkompilnoUncheckedIndexedAccess

Kedua-dua kaedah berfungsi dengan baik, tetapi jika anda menggunakan

anda tidak perlu melakukan kedua-duanya. Array.prototype.at()

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

Jika anda cuba memasukkan

ke dalam nilai jenis lain element anda akan mendapat ralat kompilasi: string

const element = arr[1];

Kesimpulan

Gunakan Array.prototype.at() untuk menulis kod yang lebih bersih dan elakkan daripada menambah fungsi dan konfigurasi tambahan.

Array.prototype.at() Penjelasan pada Rangkaian Pembangun Mozilla: Pautan (sila ganti dengan pautan sebenar)

Atas ialah kandungan terperinci Menggunakan Array.at() atas Array[index]. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!