Explication détaillée des étapes pour convertir des objets non-tableaux en tableaux (avec code)

Cette fois, je vais vous apporter une explication détaillée des étapes pour convertir des objets non-tableaux en tableaux (avec du code). Quelles sont les précautions lors de la conversion d'objets non-tableaux en tableaux ? cas, jetons un coup d'oeil.

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.<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") renvoie 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 en faire un objet itérable

Par défaut Dans ce cas, les objets définis par le développeur sont tous des objets non itérables, mais si vous ajoutez un générateur à l'attribut Symbol.iterator, vous pouvez le transformer en un 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]

pour déterminer si l'objet est itérable. Méthodes d'objet

.

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

sont un peu étendus, for of et forEach et for in

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

And Array, Set et 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, utilisez for of Lorsque vous bouclez un objet, vous pouvez le terminer plus tôt via break, mais forEach ne peut pas sortir de la boucle à l'avance

for in Parcourir les propriétés énumérables de l'objet , y compris les propriétés de son chaîne de prototypes, et l'ordre n'est pas garanti

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 renvoie la propriété énumérable ou non énumérable de l'objet lui-même

Quoi qu'il en soit, nous sommes allés trop loin, alors allons un peu plus loin. La méthode Object.assign() copie les valeurs de toutes les propriétés énumérables de. un ou plusieurs objets source vers l'objet cible

[…obj]

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

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

Déduplication de chaîne

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

Objet .values(obj)

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

• entrées()

• values()

• keys()

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

与类数组对象需要对象有 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实现输入文字超过规定行数时自动添加省略号

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!