Cet article présente Ecmascript 6 nous apportera de nouvelles méthodes de fonctionnement de tableau et comment appliquer ces nouvelles fonctionnalités de tableau dans les navigateurs existants.
Remarque: J'utiliserai les termes constructeur et classe alternativement.
Méthodes de classe
La méthode que le tableau lui-même a.
Array.from (arraylike, mapfunc?, Thisarg?)
La fonction de base de l'array.from () est de convertir deux types d'objets en tableaux.
Objets de type tableau
Cette classe d'objets a des propriétés de longueur et d'index. Le résultat de l'opérateur DOM appartient à cette classe, tels que document.getElementsByClassName ().
Objets itératifs
Lors de la prise de valeurs, un seul élément peut être pris à la fois. Les tableaux sont itérables, comme la nouvelle structure de tableau, la carte (carte) et le jeu (set) dans ECMascript.
Le code suivant est un exemple de conversion d'un objet de tableau en un tableau:
La copie de code est la suivante:
Soit Lis = document.QuerySelectorall ('ul.fancy li');
Array.from (lis) .ForEach (fonction (li) {
console.log (nœud);
});
Le résultat de queySelectorall () n'est pas un tableau, et il n'y aura pas de méthode foreach (). C'est pourquoi nous devons convertir cette méthode en un tableau avant de l'utiliser.
Utilisation du mappage via array.from ()
Array.from () est également une alternative aux génériques à l'aide de map ().
La copie de code est la suivante:
Soit Spans = document.QuerySelectorAll ('span.name');
// map (), généralement:
Soit names1 = array.prototype.map.call (Spans, S => S.TextContent);
// array.from ():
Soit names2 = 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 autre objet de classe de classe, pas un tableau. C'est pourquoi nous ne pouvons pas appeler Map () directement. Dans le premier exemple, afin d'utiliser ForEach (), nous convertissons l'objet de tableau de classe en un tableau. Ici, nous omettons les étapes intermédiaires à travers des méthodes génériques et des versions à deux paramètres de Array.from ().
Trous
Array.from () ignore les éléments manquants - trous dans le tableau, qui seront traités comme des éléments non définis.
La copie de code est la suivante:
> Array.from ([0 ,, 2])
[0, indéfini, 2]
Cela signifie que vous pouvez utiliser array.from () pour créer ou remplir un tableau:
La copie de code est la suivante:
> Array.from (nouveau tableau (5), () => 'a')
['a', 'a', 'a', 'a', 'a', 'a']
> Array.from (nouveau tableau (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) serait un meilleur choix. Le premier est les deux méthodes de l'exemple ci-dessus.
de () dans une sous-classe de tableau (tableau)
Un autre scénario d'utilisation pour array.from () consiste à convertir une instance d'un objet de tableau ou d'un objet itérable à une sous-classe de tableau. Si vous créez une sous-classe de tableau MyArray et que vous souhaitez convertir ce type d'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 hériteront (le constructeur de classe parent est le prototype de son constructeur de sous-classe).
La copie de code est la suivante:
classe MyArray étend le tableau {
...
}
Laissez instanceOfMyArray = MyArray.from (aniterable);
Vous pouvez combiner cette fonction avec le mappage pour terminer le fonctionnement de la carte où vous contrôlez le constructeur de résultats:
La copie de code est la suivante:
// de () déterminer 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 tableau
Soit instanceOfArray = [1, 2, 3] .map (x => x * x);
Array.of (... items)
Si vous souhaitez convertir un ensemble de valeurs en un tableau, vous devez utiliser le texte source du tableau (plateau littéral). Surtout quand il n'y a qu'une seule valeur et que c'est un nombre, le constructeur du tableau est en grève. Pour plus d'informations, veuillez vous référer à.
La copie de code est la suivante:
> Nouveau tableau (3, 11, 8)
[3, 11, 8]
> Nouveau tableau (3)
[,,,]
> Nouveau tableau (3.1)
RangeError: longueur de tableau non valide
Donc, si nous voulons convertir un ensemble de valeurs en une instance de sous-constructeur, que devons-nous faire? Il s'agit de la valeur du tableau.of () (n'oubliez pas que le sous-constructeur de tableau héritera de toutes les méthodes de tableau, y compris de () bien sûr).
La copie de code est la suivante:
classe MyArray étend le tableau {
...
}
console.log (MyArray.of (3, 11, 8) instance de MyArray); // vrai
console.log (MyArray.of (3) .length === 1); // vrai
Array.of () sera tout à fait pratique pour envelopper les valeurs dans un tableau, sans la façon étrange de gérer le tableau (). Mais faites aussi attention à array.prototype.map (), il y a une fosse ici:
La copie de code est la suivante:
> ['a', 'b']. Carte (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 dans son rappel. Les deux derniers sont souvent négligés (détails).
Méthodes prototypes
Il existe de nombreuses nouvelles méthodes disponibles pour les cas de tableaux.
Itération sur les tableaux
La méthode suivante aidera à terminer l'itération dans le tableau:
La copie de code est la suivante:
Array.prototype.entries ()
Array.prototype.keys ()
Array.prototype.values ()
Chacune des méthodes ci-dessus renvoie une chaîne de valeurs, mais ne sera pas retournée en tant que tableau. Ils seront affichés un par un via les itérateurs. Regardons un exemple (je mettrai le contenu de l'itérateur dans un tableau à l'aide de Array.From ()):
La copie de code est la suivante:
> 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 les entrées () et pour les boucles dans ECMascript 6 pour démonter facilement l'objet itératif en une paire de valeurs clés:
La copie de code est la suivante:
pour (let [index, elem] de ['a', 'b']. Entrées ()) {
console.log (index, elem);
}
Remarque: Ce code peut déjà être exécuté dans le dernier navigateur Firefox. T Firefox.
Trouver des éléments de tableau
Array.prototype.find (prédicat, thisarg?) Renvoie le premier élément qui satisfait la fonction de rappel. Si aucun élément ne satisfait la condition, il renvoie non défini. Par exemple:
La copie de code est la suivante:
> [6, -5, 8] .find (x => x <0)
-5
> [6, 5, 8] .fin (x => x <0)
indéfini
Array.prototype.findindex (prédicat, thisarg?)
Renvoie l'index du premier élément qui satisfait la fonction de rappel. Si aucun éléments satisfaisants n'est trouvé, -1 est retourné. Par exemple:
La copie de code est la suivante:
> [6, -5, 8] .findindex (x => x <0)
1
> [6, 5, 8] .findindex (x => x <0)
-1
Les deux méthodes de recherchent * ignorent les trous, c'est-à-dire qu'ils ne font 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)
Find nan via findindex ()
Array.prototype.Indexof () a une limitation bien connue, c'est-à-dire qu'elle ne peut pas trouver NANS. Parce qu'il utilise l'identité (===) pour trouver des éléments correspondants:
La copie de code est la suivante:
> [Nan] .Indexof (nan)
-1
En utilisant FindIndex (), vous pouvez utiliser object.is (), qui ne causera pas un tel problème:
La copie de code est la suivante:
> [Nan] .findindex (y => object.is (nan, y))
0
Vous pouvez également utiliser une manière plus générale pour créer une fonction d'assistance Elemis ():
La copie de code est la suivante:
> fonction elemis (x) {return object.is.bind (objet, x)}
> [Nan] .findindex (Elemis (nan))
0
Array.prototype.fill (valeur, start ?, end?)
Utilisez la valeur donnée pour remplir un tableau:
La copie de code est la suivante:
> ['A', 'B', 'C']. FILL (7)
[7, 7, 7]
Les trous ne seront pas traités avec un traitement spécial:
La copie de code est la suivante:
> Nouveau tableau (3). Fill (7)
[7, 7, 7]
Vous pouvez également limiter le début et la fin de votre remplissage:
La copie de code est la suivante:
> ['A', 'B', 'C']. Fill (7, 1, 2)
['A', 7, 'C']
Quand puis-je utiliser la nouvelle méthode de tableau?
Il existe certaines méthodes qui peuvent être utilisées dans le navigateur.