Une brève discussion sur plusieurs méthodes courantes de parcours de tableaux et d'objets en JavaScript

Les tableaux et les objets jouent un rôle essentiel dans divers langages de programmation. Cet article vous présentera les méthodes de parcours de tableaux et de parcours d'objets couramment utilisées en JavaScript, les différences entre chaque méthode et les éléments à prendre en compte lors de leur utilisation. .

Parcours de tableaux

Avec le développement continu de JS, il existe plus de dix méthodes de parcours à partir de la spécification ES7. Ce qui suit est un groupe de méthodes avec des fonctions similaires pour présenter les méthodes de parcours courantes des tableaux.

pour, pourChacun, pour ...de

const list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11];

for (let i = 0, len = list.length; i < len; i++) {
  if (list[i] === 5) {
    break; // 1 2 3 4
    // continue; // 1 2 3 4 6 7 8 undefined 10 11
  }
  console.log(list[i]);
}

for (const item of list) {
  if (item === 5) {
    break; // 1 2 3 4
    // continue; // 1 2 3 4 6 7 8 undefined 10 11
  }
  console.log(item);
}

list.forEach((item, index, arr) => {
  if (item === 5) return;
  console.log(index); // 0 1 2 3 5 6 7 9 10
  console.log(item); // 1 2 3 4 6 7 8  10 11
});

Résumé

• Tous les trois sont un parcours de base du tableau de gauche à droite
• forEach ne peut pas sortir de la boucle ; for et for ..of peuvent être ignorés ou interrompus en utilisant break ou continue.
• for ...of accède directement à l'élément réel. for traverse l'index du tableau, et la fonction de rappel forEach a des paramètres plus riches, et les éléments, index et tableaux d'origine peuvent tous être obtenus.
• for ...of et for seront également exécutés s'il y a des éléments vides dans le tableau.

certains, tous

const list = [
  { name: '头部导航', backward: false },
  { name: '轮播', backward: true },
  { name: '页脚', backward: false },
];
const someBackward = list.some(item => item.backward);
// someBackward: true
const everyNewest = list.every(item => !item.backward);
// everyNewest: false

Résumé

• Les deux c'est utilisé pour le jugement des conditions du tableau, et les deux renvoient une valeur booléenne
• Les deux peuvent être interrompus
• certains Si un certain élément remplit la condition, il renvoie vrai et la boucle n'est pas interrompue ; Si la condition est remplie, renvoie false.
• Every est l'opposé de some. Si l'élément bénéfique ne remplit pas la condition, il renvoie false et la boucle est interrompue si tous les éléments remplissent la condition, il renvoie true ;

filtre, carte

const list = [
{ name: '头部导航', type: 'nav', id: 1 },,
{ name: '轮播', type: 'content', id: 2 },
{ name: '页脚', type: 'nav', id: 3 },
];
const resultList = list.filter(item => {
  console.log(item);
  return item.type === 'nav';
});
// resultList: [
//   { name: '头部导航', type: 'nav', id: 1 },
//   { name: '页脚', type: 'nav', id: 3 },
// ]

const newList = list.map(item => {
  console.log(item);
  return item.id;
});
// newList: [1, empty, 2, 3]

// list: [
//   { name: '头部导航', type: 'nav', id: 1 },
//   empty,
//   { name: '轮播', type: 'content', id: 2 },
//   { name: '页脚', type: 'nav', id: 3 },
// ]

Résumé

• Les deux générant un le nouveau tableau ne changera pas le tableau d'origine (à l'exception de la traversée du tableau d'objets et de l'utilisation de l'objet élément dans la fonction de rappel)
• Les deux ignoreront les éléments vides. Les étudiants intéressés peuvent l'imprimer eux-mêmes.
• map formera un nouveau tableau avec la valeur de retour de la fonction de rappel, et la longueur du tableau sera la même que celle du tableau d'origine.
• filter formera un nouveau tableau avec des éléments qui remplissent les conditions de la fonction de rappel. La longueur du tableau est différente de celle du tableau d'origine.
• Les nouveaux éléments du tableau générés par map sont personnalisables. Les nouveaux éléments du tableau générés par
• filtre ne peuvent pas être personnalisés et sont cohérents avec les éléments du tableau d'origine correspondants.

trouver, trouverIndex

const list = [
{ name: '头部导航', id: 1 },
{ name: '轮播', id: 2 },
{ name: '页脚', id: 3 },
];
const result = list.find((item) => item.id === 3);
// result: { name: '页脚', id: 3 }
result.name = '底部导航';
// list: [
//   { name: '头部导航', id: 1 },
//   { name: '轮播', id: 2 },
//   { name: '底部导航', id: 3 },
// ]

const index = list.findIndex((item) => item.id === 3);
// index: 2
list[index].name // '底部导航';

Résumé

• Les deux sont utilisés pour trouver des éléments de tableau.
• La méthode find renvoie la valeur du premier élément du tableau qui satisfait la fonction de rappel. Renvoie undéfini s'il n'existe pas.
• findIndex Il renvoie l'index de l'élément trouvé dans le tableau au lieu de sa valeur, renvoyant -1 s'il n'est pas présent.

reduce, réduireRight

La méthode réduire reçoit deux paramètres, le premier paramètre est la fonction de rappel (callback), le second paramètre Le premier paramètre est la valeur initiale (initialValue).

La méthode réduireRight lui est tout à fait cohérente sauf qu'elle est dans le sens opposé de l'exécution de réduction (de droite à gauche).

La fonction de rappel reçoit quatre paramètres :

• accumulateur : MDN l'explique comme un accumulateur, mais je pense que c'est inapproprié D'après ma compréhension, cela devrait être à l'heure actuelle. element, tous les éléments précédents Les éléments du tableau sont traités par la fonction de rappel pour accumuler les résultats.
• current : L'élément du tableau en cours d'exécution.
• currentIndex : L'index de l'élément du tableau en cours d'exécution.
• sourceArray : le tableau d'origine, qui est le tableau où la méthode de réduction est appelée.

Si aucune valeur initiale n'est transmise, la méthode de réduction exécutera la fonction de rappel à partir de l'index 1. Si une valeur initiale est transmise, la fonction de rappel sera exécutée cumulativement à partir de l'index 0 et basé sur la valeur initiale.

Calculer la somme d'un certain attribut du tableau d'objets

const list  = [
  { name: 'left', width: 20 },
  { name: 'center', width: 70 },
  { name: 'right', width: 10 },
];
const total = list.reduce((currentTotal, item) => {
  return currentTotal + item.width;
}, 0);
// total: 100

Dédupliquer le tableau d'objets et compter le nombre de répétitions de chaque élément

const list  = [
  { name: 'left', width: 20 },
  { name: 'right', width: 10 },
  { name: 'center', width: 70 },
  { name: 'right', width: 10 },
  { name: 'left', width: 20 },
  { name: 'right', width: 10 },
];
const repeatTime = {};
const result = list.reduce((array, item) => {
  if (repeatTime[item.name]) {
    repeatTime[item.name]++;
    return array;
  }
  repeatTime[item.name] = 1;
  return [...array, item];
}, []);
// repeatTime: { left: 2, right: 3, center: 1 }
// result: [
//   { name: 'left', width: 20 },
//   { name: 'right', width: 10 },
//   { name: 'center', width: 70 },
// ]

Obtenir la valeur maximale/minimale du tableau d'objets

const list  = [
  { name: 'left', width: 20 },
  { name: 'right', width: 30 },
  { name: 'center', width: 70 },
  { name: 'top', width: 40 },
  { name: 'bottom', width: 20 },
];
const max = list.reduce((curItem, item) => {
  return curItem.width >= item.width ? curItem : item;
});
const min = list.reduce((curItem, item) => {
  return curItem.width <= item.width ? curItem : item;
});
// max: { name: "center", width: 70 }
// min: { name: "left", width: 20 }

reduce est très puissant Pour plus d'astuces, je vous recommande de consulter cet article "25 Advanced Array Reduction Usage. Vous devez savoir"

Comparaison des performances

Cela dit, quelle est la différence de performances entre ces méthodes de traversée ? Essayons-le dans le navigateur Chrome. J'exécute chaque boucle 10 fois, supprime les valeurs maximales et minimales et prends la moyenne pour réduire l'erreur.

var list = Array(100000).fill(1)

console.time('for');
for (let index = 0, len = list.length; index < len; index++) {
}
console.timeEnd(&#39;for&#39;);
// for: 2.427642822265625 ms

console.time(&#39;every&#39;);
list.every(() => { return true })
console.timeEnd(&#39;every&#39;)
// some: 2.751708984375 ms

console.time(&#39;some&#39;);
list.some(() => { return false })
console.timeEnd(&#39;some&#39;)
// some: 2.786590576171875 ms

console.time(&#39;foreach&#39;);
list.forEach(() => {})
console.timeEnd(&#39;foreach&#39;);
// foreach: 3.126708984375 ms

console.time(&#39;map&#39;);
list.map(() => {})
console.timeEnd(&#39;map&#39;);
// map: 3.743743896484375 ms

console.time(&#39;forof&#39;);
for (let index of list) {
}
console.timeEnd(&#39;forof&#39;)
// forof: 6.33380126953125 ms

Comme le montrent les résultats d'impression, la boucle for est la plus rapide et la boucle for of est la plus lente

Terminaison de traversée commune et comparaison du tableau des performances

	是否可终止
**	break	continue	return	性能（ms）
for	终止 ✅	跳出本次循环 ✅	❌	2.42
forEach	❌	❌	❌	3.12
map	❌	❌	❌	3.74
for of	终止 ✅	跳出本次循环 ✅	❌	6.33
some	❌	❌	return true  ✅	2.78
every	❌	❌	return false ✅	2.75

最后，不同浏览器内核 也会有些差异,有兴趣的同学也可以尝试一下。

对象遍历

在对象遍历中，经常需要遍历对象的键、值，ES5 提供了 for...in 用来遍历对象，然而其涉及对象属性的“可枚举属性”、原型链属性等，下面将从 Object 对象本质探寻各种遍历对象的方法，并区分常用方法的一些特点。

for in

Object.prototype.fun = () => {};const obj = { 2: 'a', 1: 'b' };for (const i in obj) {  console.log(i, ':', obj[i]);}// 1: b// 2: a// fun : () => {} Object 原型链上扩展的方法也被遍历出来for (const i in obj) {  if (Object.prototype.hasOwnProperty.call(obj, i)) {      console.log(i, ':', obj[i]);    }}// name : a 不属于自身的属性将被 hasOwnProperty 过滤

小结

使用 for in 循环时，返回的是所有能够通过对象访问的、可枚举的属性，既包括存在于实例中的属性，也包括存在于原型中的实例。如果只需要获取对象的实例属性，可以使用 hasOwnProperty 进行过滤。

使用时，要使用(const x in a)而不是(x in a)后者将会创建一个全局变量。

for in 的循环顺序，参考【JavaScript 权威指南】（第七版）6.6.1。

• 先列出名字为非负整数的字符串属性，按照数值顺序从最小到最大。这条规则意味着数组和类数组对象的属性会按照顺序被枚举。
• 在列出类数组索引的所有属性之后，在列出所有剩下的字符串名字（包括看起来像整负数或浮点数的名字）的属性。这些属性按照它们添加到对象的先后顺序列出。对于在对象字面量中定义的属性，按照他们在字面量中出现的顺序列出。
• 最后，名字为符号对象的属性按照它们添加到对象的先后顺序列出。

Object.keys

Object.prototype.fun = () => {};const str = 'ab';console.log(Object.keys(str));// ['0', '1']const arr = ['a', 'b'];console.log(Object.keys(arr));// ['0', '1']const obj = { 1: 'b', 0: 'a' };console.log(Object.keys(obj));// ['0', '1']

小结

用于获取对象自身所有的可枚举的属性值，但不包括原型中的属性，然后返回一个由属性名组成的数组。

Object.values

Object.prototype.fun = () => {};const str = 'ab';console.log(Object.values(str));// ['a', 'b']const arr = ['a', 'b'];console.log(Object.values(arr));// ['a', 'b']const obj = { 1: 'b', 0: 'a' };console.log(Object.values(obj));// ['a', 'b']

小结

用于获取对象自身所有的可枚举的属性值，但不包括原型中的属性，然后返回一个由属性值组成的数组。

Object.entries

const str = 'ab';for (const [key, value] of Object.entries(str)) {    console.log(`${key}: ${value}`);}// 0: a// 1: bconst arr = ['a', 'b'];for (const [key, value] of Object.entries(arr)) {    console.log(`${key}: ${value}`);}// 0: a// 1: bconst obj = { 1: 'b', 0: 'a' };for (const [key, value] of Object.entries(obj)) {    console.log(`${key}: ${value}`);}// 0: a// 1: b

小结

用于获取对象自身所有的可枚举的属性值，但不包括原型中的属性，然后返回二维数组。每一个子数组由对象的属性名、属性值组成。可以同时拿到属性名与属性值的方法。

Object.getOwnPropertyNames

Object.prototype.fun = () => {};Array.prototype.fun = () => {};const str = 'ab';console.log(Object.getOwnPropertyNames(str));// ['0', '1', 'length']const arr = ['a', 'b'];console.log(Object.getOwnPropertyNames(arr));// ['0', '1', 'length']const obj = { 1: 'b', 0: 'a' };console.log(Object.getOwnPropertyNames(obj));// ['0', '1']

小结

用于获取对象自身所有的可枚举的属性值，但不包括原型中的属性，然后返回一个由属性名组成的数组。

总结

我们对比了多种常用遍历的方法的差异，在了解了这些之后，我们在使用的时候需要好好思考一下，就能知道那个方法是最合适的。欢迎大家纠正补充。

更多编程相关知识，请访问：编程视频！！

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!