Maison  >  Article  >  interface Web  >  Résumé des méthodes JS pour convertir des objets non-tableaux en tableaux

Résumé des méthodes JS pour convertir des objets non-tableaux en tableaux

亚连
亚连original
2018-05-28 17:42:481648parcourir

Cet article vous présente principalement certaines méthodes de conversion JS d'objets non-tableaux en tableaux, à savoir Array.prototype.slice.call(obj), Array.from(obj), [...obj] et Object. Les amis dans le besoin peuvent se référer aux méthodes détaillées de mise en œuvre des valeurs (obj) et à d'autres méthodes.

Avant-propos

Cet article résume principalement certaines méthodes de conversion de JS d'objets non-tableaux en tableaux, et les partage pour votre référence et votre étude . Je ne dirai rien ci-dessous. Assez dit, jetons un œil à l’introduction détaillée.

Array.prototype.slice.call(obj)

Cette méthode peut convertir un objet de type tableau en tableau, le ainsi- appelé objet de type tableau, c'est un objet contenant des attributs de longueur et d'index

La longueur du tableau renvoyé dépend de la valeur de l'attribut de longueur de l'objet et de la valeur de l'attribut non-index, ou la valeur avec un index supérieur à la longueur ne sera pas renvoyée au tableau

Le marteau réel est le suivant

let obj = {
 '0': 3,
 '1': 13,
 '2': 23,
 '3': 33,
 'length': 3,
 'name': 330
}
let arr = Array.prototype.slice.call(obj)
// [3, 13, 23]

Écriture concise [].slice.call(obj)

Array.from(obj)

Cette méthode peut convertir des objets de type tableau et des objets itérables en tableaux

Objets de type tableau Comme mentionné ci-dessus, qu'est-ce que un objet itérable ?

  • Array, Set, Map et String sont tous des objets itérables (WeakMap/WeakSet ne sont pas des objets itérables)

  • Variable chaîne Devenue un objet itérable , résolvant le problème de codage

  • Ces objets ont des itérateurs par défaut, c'est-à-dire qu'ils ont l'attribut Symbol.iterator

  • Vous pouvez utiliser le for de boucle

  • Tous les itérateurs créés via des générateurs sont des objets itérables

  • document.getElementsByTagName("p") Le retour est un objet itérable mais pas un tableau
    Array.isArray(document.getElementsByTagName('p')) Return false

Créer un objet itérable via un générateur

let obj = {
 '0': 3,
 '1': 13,
 '2': 23,
 '3': 33
}

function *createIterator(obj){
 for(let value in obj){
  yield obj[value]
 }
}

let iterator = createIterator(obj)
let arr = Array.from(iterator)
// [3, 13, 23, 33]

Transformer l'objet lui-même pour le rendre itérable Objet

Par défaut, les objets définis par les développeurs sont des objets non itérables, mais si vous ajoutez un générateur à l'attribut Symbol.iterator, vous pouvez le transformer en objet itérable

let obj = {
 '0': 3,
 '1': 13,
 '2': 23,
 '3': 33
}

obj[Symbol.iterator] = function* () {
 for(let value in this){
  yield this[value]
 }
}

let arr = Array.from(obj)
// [3, 13, 23, 33]

Méthodes pour juger si un objet est itérable object

typeof obj[Symbol.iterator] === 'function'

Une petite extension de for of et forEach et for in

for of est utilisée pour boucler des objets itérables, notamment Array, Set, Map, string

Et Array, Set, Map ont tous la méthode forEach

De plus, NodeList n'est pas un Array, Set, Map, mais un objet itérable, qui peut être parcouru avec for of

De plus, quand en utilisant for of pour boucler un objet, vous pouvez le terminer plus tôt via break, mais forEach ne peut pas sortir de la boucle plus tôt

for in traverse les propriétés énumérables de l'objet, y compris les propriétés de sa chaîne de prototypes, et là n'est pas une garantie Ordre

Pour parcourir les propriétés énumérables de l'objet lui-même, utilisez la méthode hasOwnProperty() pour déterminer si la propriété est la propre propriété de l'objet

Object.getOwnPropertyNames(obj) , et retournez si l'objet lui-même est énumérable ou non énumérable. Énumérer les attributs

est déjà trop loin, allons donc un peu plus loin. La méthode Object.assign() copie les valeurs de tous les attributs énumérables d'un ou plusieurs objets source vers. l'objet cible

[…obj]

L'opérateur spread peut convertir un objet itérable en tableau

Par exemple , [...'obj'] renvoie ["o", "b", "j"]

Déduplication de chaîne

[...new Set('objobj')]

Object.values(obj)

Par défaut, les objets définis par les développeurs sont tous des objets non itérables, mais fournissent des méthodes pour renvoyer les itérateurs

  • entries()

  • values()

  • keys()

En utilisant ces méthodes, vous pouvez renvoyer le tableau associé

avec l'objet de type tableau exigeant que l'objet ait une valeur de longueur est différent, Object.values(obj) renvoie une collection de valeurs de propriétés énumérables​​de l'objet lui-même

let obj = {
 '0': 3,
 '1': 13,
 '2': 23,
 '3': 33
}
let arr = Object.values(obj) // [3, 13, 23, 33]

La relation entre les chaînes et les tableaux

Dans une large mesure, vous pouvez considérer les chaînes comme des tableaux de chaînes

ont toutes des attributs de longueur

ont toutes concat() / / indexOf()/ includes() méthodes slice()

Cependant, il convient de noter qu'il n'existe aucune méthode sur chaîne qui puisse modifier son propre contenu en place. Elles renvoient toutes une nouvelle chaîne

. string. Il existe également une méthode

qui crée un nombre spécifié de copies de chaînerepeat()

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Compréhension préliminaire de JavaScript, Ajax, jQuery, et comparaison de la relation entre les trois

Jquery et PHP combinés pour réaliser une interrogation à long terme AJAX

Des exemples spécifiques à Jquery présentent quand utiliser AJAX et où AJAX doit être utilisé

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!

Déclaration:
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