Detaillierte Erläuterung der Schritte zum Konvertieren von Nicht-Array-Objekten in Arrays (mit Code)

Dieses Mal werde ich Ihnen die Schritte zum Konvertieren von Nicht-Array-Objekten in Arrays (mit Code) ausführlich erläutern. Welche Vorsichtsmaßnahmen sind beim Konvertieren von Nicht-Array-Objekten in Arrays zu beachten? Fälle, werfen wir einen Blick darauf.

Vorwort

Dieser Artikel fasst hauptsächlich einige Methoden zum Konvertieren von JS von Nicht-Array-Objekten in Arrays zusammen und stellt sie als Referenz und zum Studium zur Verfügung . Ich werde im Folgenden nichts sagen, werfen wir einen Blick auf die detaillierte Einführung.

Array.prototype.slice.call(obj)

Diese Methode kann ein Array-ähnliches Objekt in ein Array konvertieren, das so- namens Array-ähnliches Objekt. Es handelt sich um 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 dem Wert des Nicht-Indexattributs ab Der Wert mit einem Index, der größer als die Länge ist, wird nicht an das Array zurückgegeben

Der eigentliche Hammer ist 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]

Kurze Schreibmethode[].slice.call(obj)

Array.from(obj)

Diese Methode Array-ähnliche Objekte und iterierbare Objekte können in Arrays umgewandelt werden

Array-ähnliche Objekte wurden oben erwähnt 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 of loop

• Alle durch Generatoren erstellten Iteratoren sind iterierbare Objekte

• document.<a href="http://www.%20php.cn/code/8145.html" target="_blank">getElementsByTagName<code>document.<a href="http://www.php.cn/code/8145.html" target="_blank">getElementsByTagName</a>("p") ("p") gibt ein iterierbares Objekt zurück, 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]

Transformieren Sie das Objekt selbst, um es in ein iterierbares Objekt zu verwandeln

Standardmäßig sind die von Entwicklern definierten Objekte alle nicht iterierbare Objekte. aber wenn Sie dem Symbol.iterator-Attribut einen Generator hinzufügen, können Sie es in ein iterierbares Objekt umwandeln

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]

Methode, um zu bestimmen, ob ein Objekt ein iterierbares Objekt ist

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

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 , Map hat die Methode forEach

Darüber hinaus ist NodeList kein Array, Set, Map, sondern ein iterierbares Objekt, das mit for of durchlaufen werden kann forEach kann die Schleife nicht vorzeitig verlassen

for in

durchläuft die aufzählbaren Eigenschaften des Objekts

, einschließlich der Eigenschaften seiner Prototypenkette, und garantiert nicht die Reihenfolge wenn Um die eigenen aufzählbaren Eigenschaften des Objekts zu durchlaufen, verwenden Sie die Methode

, um zu bestimmen, ob die Eigenschaft die eigene Eigenschaft des Objekts ist

hasOwnProperty()

, und geben Sie die eigenen aufzählbaren oder nicht aufzählbaren Eigenschaften des Objekts zurück

Object.getOwnPropertyNames(obj) Wie auch immer, wir sind zu weit gegangen, also gehen wir noch etwas weiter. Die Methode

kopiert die Werte aller aufzählbaren Attribute von einem oder mehreren Quellobjekten

in das Zielobjekt Object.assign()

[…obj]

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

Zum Beispiel gibt

String-Deduplizierung [...'obj'] ["o", "b", "j"]

[...new Set('objobj')]Object.values(obj)

By Standard, dev Die vom Autor definierten Objekte sind alle nicht iterierbare Objekte, bieten jedoch Methoden zum Zurückgeben von Iteratoren

entries()

• Werte ()

• keys()

• Mit diesen Methoden können Sie das relevante Array zurückgeben

  与类数组对象需要对象有 length 值不同，Object.values(obj) 返回对象自身可枚举属性值的集合

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

  字符串与数组的关系

  在很大程度上，可以将字符串看成字符串数组，

  都有 length 属性

  都有 concat() / indexOf() / includes() / slice() 方法

  不过值得注意的是， string 上没有方法可以原地修改它自身的内容，都是返回新的 string

  string 还有个 repeat() 方法，创建指定数量的字符串副本

  相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

  推荐阅读：

  vue中v-if与v-show使用和区别
  

  通过jQuery编码转换、事件响应、页面跳转实现浏览器跳转并传递参数
  

  jQuery实现输入文字超过规定行数时自动添加省略号
  

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Konvertieren von Nicht-Array-Objekten in Arrays (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!