Array.prototype.includes et Array.prototype.indexOf

Au-delà de la lisibilité améliorée, y a-t-il un avantage à includessur indexOf? Ils me semblent identiques.

Quelle est la différence entre ceci

var x = [1,2,3].indexOf(1) > -1; //true

Et ça?

var y = [1,2,3].includes(1); //true

tl; dr: NaN est traité différemment:

• [NaN].indexOf(NaN) > -1 est false
• [NaN].includes(NaN) est true

De la proposition :

Motivation

Lors de l'utilisation de tableaux ECMAScript, il est généralement souhaitable de déterminer si le tableau comprend un élément. Le schéma dominant pour cela est

if (arr.indexOf(el) !== -1) {
    ...
}

avec diverses autres possibilités, par exemple arr.indexOf(el) >= 0, ou même ~arr.indexOf(el).

Ces modèles présentent deux problèmes:

• Ils ne parviennent pas à "dire ce que vous voulez dire": au lieu de demander si le tableau comprend un élément, vous demandez quel est l'indice de la première occurrence de cet élément dans le tableau, puis comparez-le ou tournez-le, pour déterminer la réponse à votre question réelle.
• Ils échouent NaN, comme indexOfutilise la comparaison stricte d'égalité et donc [NaN].indexOf(NaN) === -1.

Solution proposée

Nous proposons l'ajout d'une Array.prototype.includesméthode, de sorte que les motifs ci-dessus puissent être réécrits comme

if (arr.includes(el)) {
    ...
}

Cela a presque la même sémantique que ci-dessus, sauf qu'il utilise l'algorithme de comparaison SameValueZero au lieu de Strict Equality Comparison, ce qui rend [NaN].includes(NaN)vrai.

Ainsi, cette proposition résout les deux problèmes rencontrés dans le code existant.

Nous ajoutons en outre un fromIndexparamètre, similaire à Array.prototype.indexOfet String.prototype.includes, par souci de cohérence.

Informations complémentaires:

• SameValueZero algorithme
• Strict Equality Comparison algorithme

Si vous vous interrogez sur les performances, pour le moment, indexOf est plus rapide, mais ce test JSperf a tendance à montrer que plus le temps passe, plus includes()sera plus rapide queindexOf (je suppose que ce sera encore optimisé).

IMHO, je préfère aussi écrire if (arr.includes(el)) {}car il est plus clair et plus maintenable queif (arr.indexOf(el) !== -1) {}

.indexOf() et .includes() méthodes peuvent être utilisées pour rechercher un élément dans un tableau ou pour rechercher un caractère / sous-chaîne dans une chaîne donnée.

Utilisation dans la baie

( Lien vers la spécification ECMAScript)

1. indexOfutilise la comparaison d'égalité stricte alors que includesl' algorithme SameValueZero est utilisé . Pour cette raison, les deux points de divergence suivants se posent.

2. Comme l'a souligné Felix Kling , le comportement est différent en cas de NaN.

let arr = [NaN];

arr.indexOf(NaN); // returns -1; meaning NaN is not present
arr.includes(NaN); // returns true

3. Le comportement est également différent en cas de undefined.

let arr = [ , , ];

arr.indexOf(undefined); // returns -1; meaning undefined is not present
arr.includes(undefined); // returns true

Utilisation en chaîne

( Lien vers la spécification ECMAScript)

1. Si vous passez un RegExp à indexOf, il traitera le RegExp comme une chaîne et renverra l'index de la chaîne, s'il est trouvé. Cependant, si vous passez un RegExp à includes, il lèvera une exception.

let str = "javascript";

str.indexOf(/\w/); // returns -1 even though the elements match the regex because /\w/ is treated as string
str.includes(/\w/); // throws TypeError: First argument to String.prototype.includes must not be a regular expression

Performance

Comme l'a souligné 538ROMEO , includespeut être un peu (très petit) peu plus lent (car il doit rechercher une expression régulière comme premier argument) queindexOf mais en réalité, cela ne fait pas beaucoup de différence et est négligeable.

L'histoire

String.prototype.includes()a été introduit dans ECMAScript 2015 alors qu'il a Array.prototype.includes()été introduit dans ECMAScript 2016. En ce qui concerne la prise en charge du navigateur, utilisez-les à bon escient.

String.prototype.indexOf()et Array.prototype.indexOf()sont présents dans l'édition ES5 d'ECMAScript et donc pris en charge par tous les navigateurs.

Conceptuellement, vous devriez utiliser indexOf lorsque vous voulez utiliser la position indexOf qui vous donne simplement pour extraire la valeur ou opérer sur le tableau, c'est-à-dire en utilisant slice, shift ou split après avoir obtenu la position de l'élément. D'autre part, Use Array.includes uniquement pour savoir si la valeur est à l'intérieur du tableau et non la position car vous ne vous en souciez pas.

indexOf() et includes() peuvent tous deux être utilisés pour rechercher des éléments dans un tableau, cependant chaque fonction produit des valeurs de retour différentes.

indexOf renvoie un nombre (-1 si l'élément n'est pas présent dans le tableau, ou la position du tableau si l'élément est présent).

includes()renvoie une valeur booléenne ( trueou false).