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:

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

Dia mencadangkan menukar kepada:

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

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:

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

Panggil:

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

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:

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

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

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

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

: Array.prototype.at()

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

Adakah lebih mudah dibaca?

Taip inferens

Dalam TypeScript, notasi kurungan segi empat sama tidak termasuk

dalam inferens jenis. undefined

Jenis

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

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.

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

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

. string

Anda mungkin terfikir untuk menggunakan penegasan jenis:

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

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()

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

Jika anda cuba memasukkan

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

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

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!