Méthode d'extension du tableau dans ES6

la forme est convertie en un vrai tableau

Parlons d'abord du scénario d'utilisation. Dans JS, nous devons utiliser fréquemment le DOM, comme l'obtention des balises d'entrée de toutes les pages, et la recherche d'un élément de type, puis d'enregistrer un événement de clic pour ce bouton. Nous pouvons le faire;

 var inputoBjs = document.getElementsByTagName ('input'); for (var i = 0; i <inputoBjs.Length; i ++) {if (inputoBjs [i] .type === 'Button') {inputoBjs [i] .onclick = function () {return;}}}}

Il n'y a certainement pas de problème à l'écriture de cette façon, mais nous savons que de nombreuses méthodes d'exploitation des tableaux sont bien meilleures que pour les boucles, comme la méthode FOREAK de l'ES5, est très utile; Mais peut-il être utilisé directement? ne peut pas! Étant donné que la collection d'objets DOM n'est pas un type de tableau véritablement du tableau, il provoquera une erreur si vous l'utilisez directement;

 var inputoBjs = document.getElementsByTagName ('input'); inputoBjs.ForEach (); //inputobjs.Forach n'est pas une fonction

Malgré cela, nous pouvons toujours l'utiliser. Nous ne pouvons pas l'utiliser directement ou indirectement. Utilisez simplement la puissante fonction d'identification de l'objet JS;

 var inputoBjs = document.getElementsByTagName ('input'); console.info (inputoBjs); // [] longueur: 0__proto__: htmlCollectionConsole.info ([]. Slice.Call (inputoBjs)); // [] Longueur: 0__proto__: Array [0]

De cette façon, après l'avoir converti en un vrai tableau, vous pouvez appeler la méthode du tableau à volonté; Cette méthode est certainement possible, mais elle n'est pas facile à comprendre et est trop "tourbillonnant". ES6 nous fournit une méthode plus simple et plus directe, Form, qui est très simple à utiliser:

 var inputoBjs = document.getElementsByTagName ('input'); console.info (inputoBjs); // [] longueur: 0__proto__: htmlCollectionConsole.info (array.from (inputoBjs)); // [] Longueur: 0__proto__: Array [0]

Le résultat est le même, mais il est plus sémantiquement approprié et plus facile à comprendre. N'est-ce pas facile à utiliser? Bien sûr, ce n'est pas suffisant. Non seulement tout type de données de classe de classe peut être converti en un tableau à l'aide de cette méthode, mais les effets de différents types sont différents. Le test est le suivant:

 Soit str = 'google'; console.log (array.from (str)); // ["g", "o", "o", "o", "g", "l", "e"] let num = 234; console.log (array.from (num)); // [] let bol = false; console.log (array.from (bol)); Soit obj = {foo: 'foo', bar: 'bar'}; console.log (array.from (obj)); // [] Laissez superoBj = {0: 'foo', 1: 'bar', longueur: 2}; console.log (array.from (superoBj)); // ["foo", "bar"]

Voici les résultats de l'appel de cette méthode par différents types de données. Il convient de noter que les chaînes et certains objets spéciaux peuvent être convertis en tableaux avec du contenu. Les objets spéciaux se réfèrent aux objets dont le contenu est organisé en fonction des paires de valeurs de clé numérique et a des attributs de longueur. Ce type d'objet peut être utilisé pour les boucles, et les chaînes peuvent également utiliser pour les boucles pour obtenir chaque caractère, donc cela se résume à une phrase. L'utilisation de la méthode à partir qui peut utiliser la boucle pour la sortie du contenu n'est pas un tableau vide; Ici, je voudrais vous rappeler que les amis qui ont utilisé JQuery peuvent faire attention à quelle structure l'objet jQuery est-il renvoyé lorsque vous utilisez le sélecteur pour sélectionner des éléments? En fait, c'est la dernière structure de notre exemple. Pour plus de détails, veuillez vous référer à mes articles de la série JQuery Source Code Analysis.

de convertir les valeurs en tableaux

Il existe deux façons de créer un tableau, un est constructeur:

 Soit Arr = Array (1,2,3);

Un autre est la création littérale la plus couramment utilisée:

 Soit arr = [1,2,3];

La méthode du tableau est en fait un complément à la première méthode, et l'utilisation est la suivante:

 console.log (array.of (1,2,3)); // [1,2,3]

Il semble avoir le même effet que la méthode de construction, alors pourquoi cette méthode est-elle toujours nécessaire? Regardez les exemples suivants pour comprendre:

 console.log (array ()); //-- de laConsole.log(Array(1)); //* inhabituel de la Console.log(Array(1,2)); // [1,2]

Dans cet exemple, le nombre de paramètres diffère dans leur signification. Lorsqu'il n'y a qu'un seul paramètre, le paramètre représente l'élément représenté par la longueur. S'il est supérieur à 1 paramètre, il entraînera une confusion. Cependant, il n'a pas ce problème avec la méthode du tableau, car les éléments représentés par ses paramètres sont toujours représentés:

 console.log (array.of ()); //-- de laconsole.log(Array.of(1)); // |1 // [1,2]

Copiewithin tableau des données internes Remplacement de la copie

La fonction principale de la méthode Copywithin est de remplacer les valeurs internes du tableau. Cette méthode accepte trois paramètres, indiquant la position de copie de démarrage, la position de copie finale et la position d'insertion. L'exemple est le suivant:

 [1, 2, 3, 4, 5]. 5] .CopyWithin (0, -2, -1) // [4, 2, 3, 4, 5] // Copier le bit 3 au bit 0 []. CopyWithin.Call ({longueur: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, longueur: 5} // Copy Bit 2 à la fin de l'arrière et de la copie du 0 Bit var i32a = neuf. 3, 4, 5]); i32a.copyWithin (0, 2); // int32Array [3, 4, 5, 4, 5] // pour les plates-formes sans la méthode CopyWithin de TypedArray // La méthode d'écriture suivante est requise []. CopyWithin.Call (new int32array ([1, 2, 4, 5]), 0, 3, 4); 3, 4, 5]

Ce qui précède est la méthode d'extension du tableau dans ES6 introduit par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!