Heim > Web-Frontend > js-Tutorial > JS-Methode zum Konvertieren von Nicht-Array-Objekten in Arrays

JS-Methode zum Konvertieren von Nicht-Array-Objekten in Arrays

小云云
Freigeben: 2018-03-28 09:39:11
Original
1759 Leute haben es durchsucht

Dieser Artikel stellt Ihnen hauptsächlich einige Methoden zum Konvertieren von JS von Nicht-Array-Objekten in Arrays vor, nämlich Array.prototype.slice.call(obj), Array.from(obj), […obj] und Object.values( obj) und andere Methoden, Freunde in Not können sich darauf beziehen, ich hoffe, es kann jedem helfen.

Array.prototype.slice.call(obj)

Diese Methode kann ein Array-ähnliches Objekt in ein Array konvertieren, die sogenannte Klasse Ein Array-Objekt ist ein Objekt, das Längen- und Indexattribute enthält

Die Länge des zurückgegebenen Arrays hängt vom Wert des Längenattributs des Objekts und vom Wert des Nicht-Indexattributs ab. oder der Wert mit einem Index, der größer als die Länge ist, wird nicht an das Array zurückgegeben

Der eigentliche Hammer lautet wie folgt

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

Kurze Schreibweise [].slice.call(obj)

Array.from(obj)

Diese Methode kann Array-ähnliche Objekte und iterierbare Objekte in Arrays konvertieren

Array-ähnliche Objekte haben wurde oben erwähnt. Was sind iterierbare Objekte?

  • Array, Set, Map und String sind alle iterierbare Objekte (WeakMap/WeakSet sind keine iterierbaren Objekte)

  • String-Variable Wurde zu einem iterierbaren Objekt , Lösung des Codierungsproblems

  • Diese Objekte haben Standarditeratoren, das heißt, sie haben das Symbol.iterator-Attribut

  • Sie können das for verwenden der Schleife

  • Alle durch Generatoren erstellten Iteratoren sind iterierbare Objekte

  • document.getElementsByTagName("p") Das zurückgegebene ist ein iterierbares Objekt, aber kein Array
    Array.isArray(document.getElementsByTagName('p')) gibt false zurück

Iterierbares Objekt über Generator erstellen


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]
Nach dem Login kopieren

Transformieren Sie das Objekt selbst, um es zu einem iterierbaren Objekt zu machen

Standardmäßig sind die vom Entwickler definierten Objekte nicht iterierbare Objekte, aber wenn Sie dem Attribut Symbol.iterator einen Generator hinzufügen, können Sie es iterierbar machen


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]
Nach dem Login kopieren

Methode zur Bestimmung, ob ein Objekt ein iterierbares Objekt ist


typeof obj[Symbol.iterator] === 'function'
Nach dem Login kopieren

Eine kleine Erweiterung von for of und forEach und for in

for of wird zum Schleifen iterierbarer Objekte verwendet, einschließlich Array, Set, Map, String

und Array, Set und Map verfügen alle über die forEach-Methode

Darüber hinaus ist NodeList kein Array, Set oder Map, sondern ein iterierbares Objekt, das mit for of durchlaufen werden kann

Außerdem kann es bei Verwendung von for of zum Schleifen von Objekten vorzeitig durch break beendet werden, aber forEach kann nicht herausspringen der Schleife im Voraus.

for in durchläuft die aufzählbaren Eigenschaften des Objekts, einschließlich der Eigenschaften in seiner Prototypenkette, und die Reihenfolge ist nicht garantiert

Um die aufzählbaren Eigenschaften des Objekts selbst zu durchlaufen , verwenden Sie die hasOwnProperty() -Methode. Um zu bestimmen, ob das Attribut das eigene Attribut des Objekts ist

Object.getOwnPropertyNames(obj) , geben Sie das aufzählbare oder nicht aufzählbare Attribut des Objekts selbst zurück

Wie auch immer, wir haben es geschafft zu weit, also gehen wir noch etwas weiter: Object.assign() Methode kopiert die Werte aller aufzählbaren Eigenschaften von einem oder mehreren Quellobjekten zum Zielobjekt

[…obj]

Der Spread-Operator kann ein iterierbares Objekt in ein Array konvertieren

Beispielsweise gibt [...'obj'] ["o", "b", "j"]

String-Deduplizierung < zurück 🎜>

[...new Set(&#39;objobj&#39;)]

Object.values(obj)

Standardmäßig die vom Entwickler definierten Objekte sind nicht iterierbare Objekte, es wird jedoch eine Rückgabeiteration bereitgestellt. Containermethoden

  • entries()

  • values()

  • keys()

Mit diesen Methoden können Sie verwandte Arrays zurückgeben

Im Gegensatz zu arrayähnlichen Objekten, bei denen das Objekt einen Längenwert haben muss ,

gibt eine Sammlung aufzählbarer Eigenschaftswerte des Objekts selbst zurück Object.values(obj)


let obj = {
 &#39;0&#39;: 3,
 &#39;1&#39;: 13,
 &#39;2&#39;: 23,
 &#39;3&#39;: 33
}
let arr = Object.values(obj) // [3, 13, 23, 33]
Nach dem Login kopieren

Die Beziehung zwischen Zeichenfolgen und Arrays

Zu einem großen Teil kann man sich Strings wie ein String-Array vorstellen,

alle haben Längenattribute,

alle haben

/ concat() / indexOf()/ includes() Methoden slice()

, aber es ist erwähnenswert, dass es keine Methode für die Zeichenfolge gibt, die ihren eigenen Inhalt an Ort und Stelle ändern kann. Sie alle geben eine neue Zeichenfolge zurück

Zeichenfolge . Es gibt auch eine

-Methode, die eine bestimmte Anzahl von String-Kopien erstellt. repeat()

Das obige ist der detaillierte Inhalt vonJS-Methode zum Konvertieren von Nicht-Array-Objekten in Arrays. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage