Verwenden von Array.at() über Array[index]

In diesem Artikel wird untersucht, warum Array.prototype.at() beim Zugriff auf Array-Elemente idealer ist als Array[index].

Motivation

Früher habe ich beim Zugriff auf Array-Elemente Array[index] verwendet, beispielsweise Array[1]. Das ist es, womit ich vertraut bin und wie ich gelernt habe, Array-Elemente zu erhalten.

Ein Kollege fragte jedoch kürzlich in einer Codeüberprüfung: „Warum nicht Array.prototype.at() verwenden, anstatt den Index direkt zu verwenden?“

Mein Code ist:

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

Er schlug den Wechsel zu:

vor

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

Dieser Ansatz fällt mir auf, weil er sehr einfach und intuitiv aussieht.

So verwenden Sie Array.prototype.at()

akzeptiert eine Ganzzahl als Argument und gibt das entsprechende Element im Array zurück. Array.prototype.at()

Zum Beispiel für ein Array:

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

Anruf:

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

Dies entspricht der Schreibweise in eckigen Klammern

. Sie fragen sich vielleicht: Was ist der Unterschied? Als Nächstes werden wir uns mit den Vorteilen dieses Ansatzes befassen. array[0]

Warum ist Array[index] nicht ideal?

Sehen wir uns einige Szenarien an, in denen

anstelle von Array.prototype.at() verwendet werden sollte. Array[index]

Letztes Element des Arrays abrufen

Angenommen, es gibt ein Array von Zeichenfolgen:

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

Um das letzte Element „Fußball“ des Arrays zu erhalten, können Sie Folgendes schreiben:

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

Dies ist der richtige Ansatz; er kann jedoch mit der

-Methode prägnanter geschrieben werden: Array.prototype.at()

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

Ist es einfacher zu lesen?

Typinferenz

In TypeScript schließt die Notation mit eckigen Klammern

nicht in die Typinferenz ein. undefined

Der Typ von

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

wird als element und nicht als string abgeleitet. string | undefined

Wir gehen davon aus, dass TypeScript beim Schreiben dieses Codes Kompilierungsfehler verursacht.

Normalerweise möchten wir sicherstellen, dass das Array-Element, auf das zugegriffen wird, existiert.

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

Das Seltsame ist, dass wir den Elementtyp überprüfen, den TypeScript als

ableitet. string

Sie könnten über die Verwendung von Typzusicherungen nachdenken:

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

Das ist jedoch nicht ideal, da wir es uns nicht zur Aufgabe machen sollten, perfekten Code zu schreiben.

Um dieses Problem zu lösen, können wir zwei Ansätze verfolgen:

Schreibtypschutzfunktionen
Verwenden Sie die
2. Compiler-OptionnoUncheckedIndexedAccess

Beide Methoden funktionieren gut, aber wenn Sie

verwenden, müssen Sie nicht beides tun. Array.prototype.at()

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

Wenn Sie versuchen,

in einen anderen Wert vom Typ element einzufügen, erhalten Sie einen Kompilierungsfehler: string

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

Fazit

Verwenden Sie Array.prototype.at(), um saubereren Code zu schreiben und das Hinzufügen zusätzlicher Funktionen und Konfigurationen zu vermeiden.

Array.prototype.at()Erklärung zum Mozilla Developer Network: Link (bitte durch tatsächlichen Link ersetzen)

Das obige ist der detaillierte Inhalt vonVerwenden von Array.at() über Array[index]. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!