ECMAScript 6 nous apportera bientôt un aperçu des nouvelles compétences en matière de méthodes d'opération de tableau_javascript

Cet article présente les nouvelles méthodes de fonctionnement des tableaux qu'ECMAScript 6 nous apportera et comment appliquer ces nouvelles fonctionnalités de tableau dans les navigateurs existants.

Remarque : j'utiliserai les termes constructeur et classe de manière interchangeable.

Méthode de classe
Méthodes appartenant à Array lui-même.

Array.from(arrayLike, mapFunc?, thisArg?)

La fonction de base d'Array.from() est de convertir deux types d'objets en tableaux.

Objets de type tableau

Ce type d'objet a des propriétés de longueur et d'index. Le résultat de l'opérateur DOM appartient à cette classe, comme document.getElementsByClassName().

Objets itérables

Lorsque ce type d'objet prend une valeur, il ne peut prendre qu'un seul élément à la fois. Les tableaux sont itérables, tout comme les nouvelles structures de tableaux dans ECMAScript, Map et Set.

Le code suivant est un exemple de conversion d'un objet de type tableau en tableau :

Copier le code Le code est le suivant :

let lis = document.querySelectorAll('ul.fancy li');
Array.from(lis).forEach(function (li) {
console.log(noeud);
});

Le résultat de querySelectorAll() n'est pas un tableau et il n'y a pas de méthode forEach(). C'est pourquoi nous devons le convertir en tableau avant d'utiliser cette méthode.

Utiliser le mappage via Array.from()
Array.from() est également une alternative à l'utilisation de map() avec des génériques.

Copier le code Le code est le suivant :

let spans = document.querySelectorAll('span.name');
// map(), de manière générique :
let noms1 = Array.prototype.map.call(spans, s => s.textContent);
// Array.from() :
let noms2 = Array.from(spans, s => s.textContent);

Le deuxième paramètre dans les deux méthodes est une fonction flèche.
Dans cet exemple, le résultat de document.querySelectorAll() est un objet de type tableau, pas un tableau. C'est pourquoi nous ne pouvons pas appeler directement map(). Dans le premier exemple, afin d'utiliser forEach(), nous convertissons l'objet de type tableau en tableau. Nous utilisons ici la méthode générique et la version à deux paramètres de Array.from(), éliminant l'étape intermédiaire.

Trous
Array.from() ignore les éléments manquants - les trous - dans le tableau et les traite comme des éléments non définis.

Copier le code Le code est le suivant :

> Tableau.from([0,,2])
[ 0, non défini, 2 ]

Cela signifie que vous pouvez utiliser Array.from() pour créer ou remplir un tableau :

Copier le code Le code est le suivant :

> Array.from(new Array(5), () => 'a')
[ 'un', 'un', 'un', 'un', 'un']
> Array.from(new Array(5), (x,i) => i)
[ 0, 1, 2, 3, 4 ]

Si vous souhaitez remplir un tableau avec une valeur fixe, alors Array.prototype.fill() (voir ci-dessous) sera un meilleur choix. La première concerne les deux manières de l’exemple ci-dessus.

from()
dans la sous-classe Array Un autre cas d'utilisation d'Array.from() consiste à convertir un objet de type tableau ou un objet itérable en une instance d'une sous-classe de tableau (Array). Si vous créez une sous-classe Array MyArray et souhaitez convertir un tel objet en une instance de MyArray, vous pouvez simplement utiliser MyArray.from(). La raison pour laquelle cela peut être utilisé est que dans ECMAScript 6, les constructeurs sont hérités (le constructeur de la classe parent est le prototype de son constructeur de sous-classe).

Copier le code Le code est le suivant :

la classe MyArray étend Array {
...
>
laissez instanceOfMyArray = MyArray.from(anIterable);

Vous pouvez combiner cette fonctionnalité avec le mappage, en complétant l'opération de carte à un endroit où vous contrôlez le constructeur de résultat :

Copier le code Le code est le suivant :

// from() – détermine le constructeur du résultat via le récepteur
// (dans ce cas, MyArray)
laissez instanceOfMyArray = MyArray.from([1, 2, 3], x => x * x);
// map() : le résultat est toujours une instance de Array
laissez instanceOfArray = [1, 2, 3].map(x => x * x);
Tableau.de(...éléments)

Si vous souhaitez convertir un ensemble de valeurs en tableau, vous devez utiliser un tableau littéral. Surtout lorsqu'il n'y a qu'une seule valeur et qu'il s'agit d'un nombre, le constructeur de tableau échouera. Veuillez vous référer à cette page pour plus d'informations.

Copier le code Le code est le suivant :

> nouveau tableau (3, 11, 8)
[ 3, 11, 8 ]
> nouveau tableau(3)
[ , , ,]
> nouveau tableau (3.1)
RangeError : longueur de tableau non valide

Que devons-nous faire si nous voulons convertir un ensemble de valeurs en une instance d'un sous-constructeur numérique ? C'est la valeur de Array.of() (rappelez-vous, le sous-constructeur de tableau hérite de toutes les méthodes de tableau, y compris of() bien sûr).

Copier le code Le code est le suivant :

la classe MyArray étend Array {
...
>
console.log(MyArray.of(3, 11, 8) instanceof MyArray); // true
console.log(MyArray.of(3).length === 1); // true

Array.of() sera très pratique pour envelopper et imbriquer la valeur dans un tableau, sans la méthode de traitement étrange comme Array(). Mais faites également attention à Array.prototype.map(), il y a des pièges ici :

Copier le code Le code est le suivant :

> ['a', 'b'].map(Array.of)
[ [ 'a', 0, [ 'a', 'b' ] ],
[ 'b', 1, [ 'a', 'b' ] ] ]
> ['a', 'b'].map(x => Array.of(x)) // mieux
[ [ 'a' ], [ 'b' ] ]
> ['a', 'b'].map(x => [x]) // meilleur (dans ce cas)
[ [ 'a' ], [ 'b' ] ]

Comme vous pouvez le voir, map() transmettra trois paramètres à son rappel. Les deux derniers sont souvent négligés (détails).

Méthodes prototypes
De nombreuses nouvelles méthodes seront disponibles pour les instances de tableau.

Itérer sur des tableaux

Les méthodes suivantes aideront à terminer l'itération dans le tableau :

Copier le code Le code est le suivant :

Array.prototype.entries()
Array.prototype.keys()
Array.prototype.values()

Chacune des méthodes ci-dessus renverra une chaîne de valeurs, mais pas sous forme de tableau. Ils seront affichés les uns après les autres via l'itérateur. Regardons un exemple (j'utiliserai Array.from() pour mettre le contenu de l'itérateur dans un tableau) :

Copier le code Le code est le suivant :

>Array.from([ 'a', 'b' ].keys())
[ 0, 1 ]
> Array.from([ 'a', 'b' ].values())
[ 'a', 'b' ]
>Array.from([ 'a', 'b' ].entries())
[ [ 0, 'a' ],
[ 1, 'b' ] ]

Vous pouvez combiner inputs() avec la boucle for-of dans ECMAScript 6 pour décomposer facilement l'objet itéré en paires clé-valeur :

Copier le code Le code est le suivant :

for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
>

Remarque : ce code peut déjà s'exécuter dans le dernier navigateur Firefox. t Firefox.

Trouver des éléments du tableau

Array.prototype.find(predicate, thisArg?) renverra le premier élément qui satisfait la fonction de rappel. Si aucun élément ne satisfait à la condition, il renvoie undéfini. Par exemple :

Copier le code Le code est le suivant :

> [6, -5, 8].find(x => x < 0)
-5
> [6, 5, 8].find(x => x < 0)
indéfini
Array.prototype.findIndex(predicat, thisArg?)

renverra l'index du premier élément qui satisfait la fonction de rappel. Si aucun élément satisfaisant n’est trouvé, -1 est renvoyé. Par exemple :

Copier le code Le code est le suivant :

> [6, -5, 8].findIndex(x => x < 0)
1
> [6, 5, 8].findIndex(x => x < 0)
-1

Les deux méthodes find* ignoreront les trous, c'est-à-dire qu'elles ne prêteront pas attention aux éléments non définis. La signature de la fonction d'achèvement du rappel est :

prédicat(élément, index, tableau)
Trouvez NaN

via findIndex()

Array.prototype.indexOf() a une limitation bien connue, c'est-à-dire qu'il ne peut pas trouver NaN. Parce qu'il utilise l'identité (===) pour trouver les éléments correspondants :

Copier le code Le code est le suivant :

>[NaN].indexOf(NaN)
-1

En utilisant findIndex(), vous pouvez utiliser Object.is(), ce qui ne posera pas de tels problèmes :

Copier le code Le code est le suivant :

> [NaN].findIndex(y => Object.is(NaN, y))
0

Vous pouvez également adopter une approche plus générale et créer une fonction d'assistance elemIs() :

Copier le code Le code est le suivant :

> function elemIs(x) { return Object.is.bind(Object, x) }
> [NaN].findIndex(elemIs(NaN))
0
Array.prototype.fill(valeur, début ?, fin ?)

Remplissez un tableau avec la valeur donnée :

Copier le code Le code est le suivant :

> ['a', 'b', 'c'].fill(7)
[ 7, 7, 7 ]

Les trous ne recevront aucun traitement particulier :

Copier le code Le code est le suivant :

> nouveau Tableau(3).fill(7)
[ 7, 7, 7 ]

Vous pouvez également limiter le début et la fin de votre remplissage :

Copier le code Le code est le suivant :

> ['a', 'b', 'c'].fill(7, 1, 2)
[ 'a', 7, 'c' ]

Quand puis-je utiliser les nouvelles méthodes de tableau ?
Certaines méthodes sont déjà disponibles dans le navigateur.