Résumé des méthodes de parcours d'objets (5 types) et de parcours de tableaux (6 types) en js

Cet article vous présente un résumé des méthodes de parcours d'objets (5 types) et de parcours de tableaux (6 types) en js. Il a une certaine valeur de référence. Les amis dans le besoin pourront s'y référer. vous aide.

1. Traversée des méthodes d'objet

1.for...in
Sortie de traversée sont les propriétés de l'objet lui-même et les propriétés énumérables sur la chaîne prototype (à l'exclusion des propriétés de symbole). La sortie finale des propriétés sur la chaîne prototype montre que les propriétés énumérables de l'objet lui-même sont parcourues en premier, puis les

. sur la chaîne prototype sont parcourus

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {};//在原型链上添加属性
Object.defineProperty(obj, 'country', {
  Enumerable: true //可枚举
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚举
})
obj.contry = 'china';
for (var index in obj) {
  console.log('key=', index, 'value=', obj[index])
}

Résultat de sortie :

2.Object.keys()
Le parcours de l'objet renvoie un tableau contenant les propriétés énumérables de l'objet lui-même (à l'exclusion de la propriété Symbol

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
  Enumerable: true,
  value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚举
})
obj.contry = 'china';
Object.keys(obj).forEach(function(index) {
  console.log(index, obj[index])
});

Résultat de sortie :

3.Objcet.getOwnPropertyNames() Génère un tableau de propriétés énumérables et non énumérables de l'objet lui-même, ne pas afficher ceux sur la chaîne de prototypes Attribut

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
  Enumerable: true,
  value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚举
})
obj.contry = 'china';
Object.getOwnPropertyNames(obj).forEach(function(index) {
  console.log(index, obj[index])
});

Résultat de sortie :

4.Reflect .ownKeys() Renvoie tous les attributs de l'objet lui-même, que le nom de l'attribut soit un symbole ou une chaîne, ou qu'il soit énumérable

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
  Enumerable: true,
  value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚举
})
obj.contry = 'china';
Reflect.ownKeys(obj).forEach(function(index) {
  console.log(index, obj[index])
});

. résultat :

5 _.keys Utilisation de la méthode de traversée du trait de soulignement. Le plug-in ne peut parcourir que les attributs énumérables de l'objet lui-même

eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
  Enumerable: true,
  value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
  Enumerable: false //不可枚举
})
obj.contry = 'china';
console.log(_.keys(obj));

Résultat de sortie :

2. méthode

1 .forEach

eg:
var arr = ['a', 'b', 'c', 'd'];
arr.forEach(function(value, index) {
  console.log('value=', value, 'index=', index);
})

Résultat de sortie :

2.map peut gérer chaque élément parcouru en conséquence et renvoyer un tableau composé des résultats de chaque appel de fonction

eg:
var arr = ['a', 'b', 'c', 'd'];
arr.map(function(item, index, array) {
  console.log(item, index);
})

Résultat de sortie :

3 pour les parcours en boucle

eg:
var arr = ['a', 'b', 'c', 'd'];
for (var i = 0; i  Résultat de sortie : <p></p><p><img src="https://img.php.cn//upload/image/127/903/153/1534304544202661.png" title="1534304544202661.png" alt="Résumé des méthodes de parcours dobjets (5 types) et de parcours de tableaux (6 types) en js"><span class="img-wrap"></span></p><p><strong>4.for...in<em></em></strong></p><pre class="brush:php;toolbar:false">eg:
var arr = ['a', 'b', 'c', 'd'];
for (var i in arr) {
  console.log('index:', i, 'value:', arr[i])
}

Résultat de sortie :

5.pour...de(es6)Ne traverse que la valeur, pas la marque suivante, les attributs du type de données Symbole peuvent être parcourus. Cette méthode est utilisée comme méthode unifiée pour parcourir toutes les structures de données

eg:
var arr = ['a', 'b', 'c', 'd'];
for (var value of arr) {
  console.log('value', value)
}

Résultats de sortie :

6. Utiliser le plug-in de soulignement

Résultats de sortie :

eg:
var arr = ['a', 'b', 'c', 'd'];
var _ = require('underscore');
_.each(arr, function(value, index, arr) {
  console.log(value, index, arr)

})

Recommandations associées :

Explication détaillée de la différence entre le parcours JS de tableaux et d'objets et les méthodes de parcours récursif objets, tableaux et propriétés

Code js pour parcourir les propriétés d'un objet

Deux méthodes pour que js parcourir un tableau

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!