Utilisation de Array.at() sur Array[index]

Cet article explorera pourquoi Array.prototype.at() est plus idéal que Array[index] lors de l'accès aux éléments du tableau.

Motivation

Dans le passé, lors de l'accès aux éléments du tableau, j'utilisais Array[index], tel que Array[1]. C'est ce que je connais et comment j'ai appris à obtenir des éléments de tableau.

Cependant, un collègue a récemment demandé lors d'une revue de code : « Pourquoi ne pas utiliser Array.prototype.at() au lieu d'utiliser l'index directement

?

Mon code est :

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

Il a suggéré de remplacer par :

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

Cette approche me démarque car elle semble très simple et intuitive.

Comment utiliser Array.prototype.at()

Array.prototype.at() accepte un entier comme argument et renvoie l'élément correspondant dans le tableau.

Par exemple, pour un tableau :

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

Appel :

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

C'est équivalent à la notation entre crochets array[0]. Vous vous demandez peut-être quelle est la différence ? Nous aborderons ensuite les avantages de l’utilisation de cette approche.

Pourquoi Array[index] n'est-il pas idéal ?

Examinons quelques scénarios dans lesquels Array.prototype.at() devrait être utilisé à la place de Array[index].

Récupérer le dernier élément du tableau

Supposons qu'il existe un tableau de chaînes :

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

Pour récupérer le dernier élément "football" du tableau, vous pouvez écrire :

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

C'est la bonne approche ; cependant, elle peut être écrite de manière plus concise en utilisant la méthode Array.prototype.at() :

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

Est-ce plus facile à lire ?

Inférence de type

Dans TypeScript, la notation entre crochets n'inclut pas undefined dans l'inférence de type.

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

Le type de

element est déduit comme string, et non comme string | undefined.

Nous nous attendons à ce que TypeScript génère des erreurs de compilation lors de l'écriture de ce code.

En général, nous voulons nous assurer que l'élément du tableau auquel on accède existe.

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

Ce qui est étrange, c'est que nous vérifions le type d'élément que TypeScript déduit comme string.

Vous pourriez penser à utiliser des assertions de type :

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

Cependant, ce n’est pas idéal car nous ne devrions pas prendre sur nous d’écrire un code parfait.

Pour résoudre ce problème, nous pouvons adopter deux approches :

1. Fonctions de protection de type écriture
2. Utilisez l'option noUncheckedIndexedAccess du compilateur

Les deux méthodes fonctionnent bien, mais si vous utilisez Array.prototype.at() vous n'avez pas besoin de faire les deux.

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

Si vous essayez d'insérer element dans une autre valeur de type string vous obtiendrez une erreur de compilation :

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

Conclusion

Utilisez Array.prototype.at() pour écrire un code plus propre et éviter d'ajouter des fonctions et une configuration supplémentaires.

Array.prototype.at() Explication sur le réseau de développeurs Mozilla : Lien (veuillez remplacer par le lien réel)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!