Maison > interface Web > Questions et réponses frontales > Comment convertir un pseudo-tableau en tableau dans ES6

Comment convertir un pseudo-tableau en tableau dans ES6

青灯夜游
Libérer: 2022-05-05 14:04:20
original
1996 Les gens l'ont consulté

Dans ES6, vous pouvez utiliser la méthode from() du type tableau pour convertir un pseudo-tableau en tableau. Cette méthode peut convertir un objet de type tableau ou un objet traversable en un véritable tableau. (objet pseudo-tableau).forEache(item=>console.log(item))".

Comment convertir un pseudo-tableau en tableau dans ES6

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Nouvelle fonctionnalité ECMAScript6 - pseudo-tableau

Qu'est-ce qu'un pseudo-tableau : Si toutes les clés d'un objet sont des entiers positifs ou zéro et ont un attribut de longueur, alors l'objet est comme un tableau et est appelé pseudo-tableau.

Pseudo-tableaux typiques : objets d'arguments, la plupart des ensembles d'éléments DOM et des chaînes.

Exemple

let arrayLike = {
 "0": "a",
 "1": "b",
 "2": "c",
 "length": 3
}
Copier après la connexion

Comme l'objet arrayLike ci-dessus, il a une propriété de longueur et la clé est également une séquence ordonnée.

Vous pouvez donc parcourir et interroger la longueur. Mais vous ne pouvez pas appeler de méthodes tableau. Tels que push, pop et autres méthodes.

Avant ES6, il existait un autre pseudo-tableau courant : les arguments.

arguments ressemble également à un tableau, mais il n'a pas de méthodes de tableau.

Par exemple, arguments.push(1), cela signalera certainement une erreur.

Comment convertir un pseudo-tableau en tableau dans ES6

Dans ES6, vous pouvez utiliser la méthode from de type Array pour convertir un pseudo-tableau en tableau.

La méthode Array.from() est utilisée pour convertir deux types d'objets en tableaux réels :

1 Les objets de type tableau peuvent être compris comme des "pseudo-tableaux"

2. Objets traversables (tels que des chaînes)

  <button name="button">测试1</button>
    <br/>
    <button name="button">测试2</button>
    <br/>
    <button name="button">测试3</button>
    <br/>
<script>
//声明变量let变量,const常量
let btns=document.getElementsByName("button");
console.log("btns",btns);//得到一个伪数组
//此处出现异常:Uncaught TypeError:btns.forEach is not a function 
btns.forEach(item=>console.log(item))
</script>
<script>
Array.from(btns).forEache(item=>console.log(item))//将伪数组转换为数组
</script>
Copier après la connexion

. La fonction principale d'Array.from est de convertir des pseudo-tableaux et des objets traversables en tableaux.

La raison pour laquelle nous disons « fonction principale » est parce que Array.from fournit également 2 paramètres à transmettre. Cela peut étendre de nombreux types de petits gameplay. Le deuxième paramètre de

  • Array.from est une fonction similaire à la méthode de parcours de carte. Utilisé pour traverser. Le troisième paramètre de

  • Array.from accepte un objet this, qui est utilisé pour modifier le pointeur this.

Utilisation du troisième paramètre (pas couramment utilisé)

let helper = {
 diff: 1,
 add (value) {
  return value + this.diff; // 注意这里有个 this
 }
};

function translate () {
 return Array.from(arguments, helper.add, helper);
}

let numbers = translate(1, 2, 3);

console.log(numbers); // 2, 3, 4
Copier après la connexion

Connaissances approfondies : convertir des chaînes en tableaux

let msg = &#39;hello&#39;;
let msgArr = Array.from(msg);
console.log(msgArr);
// 输出: ["h", "e", "l", "l", "o"]
Copier après la connexion

[Recommandations associées : tutoriel vidéo javascript, front-end web]

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!

Étiquettes associées:
es6
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal