Triez un tableau d'objets en javascript avec la méthode tri ()

Les méthodes natives JavaScript Array.sort peuvent également trier facilement les tableaux d'objets! Cet article montrera comment trier les tableaux d'objets contenant des chaînes, des nombres et des dates à l'aide de la méthode Array.sort, et fournir des conseils pratiques pour gérer la sensibilité des cas, la copie du tableau et les bibliothèques communes.

Points de base

La méthode native
• de JavaScript peut être utilisée pour trier les tableaux d'objets, en utilisant des fonctions de comparaison pour définir la logique de tri pour les chaînes, les nombres, les dates et d'autres propriétés. Array.sort
La fonction de comparaison dans JavaScript renvoie un nombre pour déterminer l'ordre de tri. Si l'entier est inférieur à 0, le premier élément apparaît avant le deuxième élément;
peut créer une fonction de tri dynamique qui peut trier un tableau d'objets à l'aide de chaînes ou de valeurs numériques. Cette fonction peut être triée ou descendant en fonction de la clé spécifiée.
• La méthode
JavaScript
• modifiera son tableau original trié. Pour éviter cela, vous pouvez utiliser la méthode Array.sort ou l'opérateur d'extension pour créer une nouvelle instance de tableau et le trier. Array.slice

Tri de base du tableau (et pourquoi cela ne fonctionne pas)

Par défaut, la méthode JavaScript

convertit chaque élément du tableau qui doit être trié en chaîne et le compare dans l'ordre du point de code Unicode. Array.sort

<code class="language-javascript">const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]</code>

Vous pouvez être curieux de savoir pourquoi 32 est avant 5? Cela semble déraisonnable, non? En fait, ce n'est pas le cas. En effet, chaque élément du tableau est d'abord converti en chaîne, et "32" est avant "5" dans l'ordre Unicode.

Utiliser

uniquement pour trier les tableaux d'objets ne peuvent pas être triés efficacement. Heureusement, la méthode Array.sort accepte un paramètre sort facultatif que nous pouvons utiliser pour trier le tableau d'objets. compareFunction

Comment trier les tableaux d'objets dans JavaScript

Pour trier un tableau d'objets, utilisez la méthode

avec une fonction de comparaison. Les fonctions de comparaison appliquent des règles et triez les tableaux en fonction de notre logique personnalisée. Ils nous permettent de trier le tableau d'objets par des chaînes, des entiers, des dates ou tout autre attribution personnalisée. Nous expliquerons comment les fonctions de comparaison fonctionnent plus tard dans cet article. sort()

Dans cette démo, nous utiliserons un tableau de chanteurs et les trierons par ordre alphabétique par le nom de leur groupe:

<code class="language-javascript">const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];</code>

La fonction de comparaison suivante compare le nom (capsulaire) de chaque bande:

<code class="language-javascript">function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小写
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* 返回 [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */</code>

Pour inverser l'ordre de tri, vous pouvez inverser la valeur de retour de la fonction de comparaison:

<code class="language-javascript">const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]</code>

Comment fonctionne la fonction de comparaison

La fonction de comparaison renvoie un nombre utilisé pour déterminer l'ordre de tri en comparant ses deux entrées (A et B). Autrement dit, si l'entier est inférieur à 0, A apparaît avant B; si elle est supérieure à 0, B apparaît avant A; Mais la façon dont vous déterminez ce nombre dépend de vous.

Regardons un simple tableau de nombres:

<code class="language-javascript">const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];</code>

Nous pouvons en faire une refactorisation, car la soustraction de B de A nous renverra également la valeur. Cette fonction de comparaison trie le tableau de nombres de petit à grand:

<code class="language-javascript">function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小写
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* 返回 [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */</code>

Il peut également être représenté comme une fonction de flèche sans définir la fonction de comparaison ailleurs:

<code class="language-javascript">function compare(a, b) {
  // ...
  // 通过乘以 -1 反转返回值
  return comparison * -1;
}</code>

Si vous n'êtes pas familier avec les fonctions Arrow, vous pouvez en savoir plus ici: Fonctions Arrow en JavaScript.

Comme vous pouvez le voir, la fonction de comparaison peut être écrite de plusieurs manières et la méthode sort() sera exécutée comme indiqué.

Créer une fonction de tri dynamique

Complétons notre exemple précédent pour le rendre plus dynamique. Créons une fonction de tri que vous pouvez utiliser pour trier un tableau d'objets dont les valeurs sont des chaînes ou des nombres. Cette fonction a deux paramètres - la clé que nous voulons trier et l'ordre des résultats (c'est-à-dire ascendant ou descendant):

<code class="language-javascript">const nums = [79, 48, 12, 4];

function compare(a, b) {
  if (a > b) return 1;
  if (b > a) return -1;

  return 0;
}

nums.sort(compare);
// => 4, 12, 48, 79</code>

Voici comment l'utiliser:

<code class="language-javascript">function compareNums(a, b) {
  return a - b;
}
nums.sort(compareNums)</code>

Dans le code ci-dessus, la méthode hasOwnProperty est utilisée pour vérifier si l'attribut spécifié est défini sur chaque objet et n'est pas hérité de la chaîne prototype. S'il n'est pas défini sur les deux objets, la fonction renvoie 0, ce qui fait que l'ordre de tri reste inchangé (c'est-à-dire que les objets restent inchangés les uns par rapport aux autres).

L'opérateur

typeof est également utilisé pour vérifier le type de valeur de propriété. Cela permet à la fonction de déterminer la bonne façon de trier le tableau. Par exemple, si la valeur de la propriété spécifiée est une chaîne, la méthode toUpperCase est utilisée pour convertir tous les caractères en majuscules, donc le cas de caractères est ignoré lors du tri.

Vous pouvez ajuster les fonctions ci-dessus en fonction d'autres types de données, ainsi que tout autre besoin dont votre script peut avoir besoin.

Bibliothèque de tri de tableau populaire

Vous n'avez peut-être pas le temps ou la patience de créer vos propres fonctions de tri dans JavaScript natif. Le temps est de l'argent et le code prend du temps. Heureusement, il existe une variété de bibliothèques qui peuvent répondre à tous vos besoins de tri de tableau. Voici une courte liste de certaines bibliothèques auxiliaires contenant des fonctions de tri ... pas d'ordre particulier;)

• Array-Sort
• souligner.js
• sucrejs
• Lodash

Conseils rapides: Trier le tableau d'objets par date

Pour trier le tableau d'objets par chaîne de date, il vous suffit de fournir une fonction de comparaison qui analyse d'abord les chaînes de date et les soustrait les unes des autres:

<code class="language-javascript">nums.sort((a, b) => a - b);</code>

Conseils rapides: tri sans modifier le tableau

Contrairement à de nombreuses autres fonctions de tableau JavaScript, Array.sort est l'une des méthodes qui modifieront (modifier) ​​le tableau en quelque sorte au lieu de renvoyer un nouveau tableau. Pour éviter cela, vous pouvez créer une nouvelle instance du tableau à tri et la modifier. Cela peut être utilisé pour créer une copie du tableau à l'aide d'une méthode de tableau ou d'une syntaxe d'extension.

<code class="language-javascript">const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]</code>

Créez une copie de tableau à l'aide de Array.slice:

<code class="language-javascript">const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];</code>

Alternativement, vous pouvez utiliser l'opérateur d'extension pour obtenir le même effet:

<code class="language-javascript">function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小写
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* 返回 [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */</code>

Dans les deux cas, la sortie est la même et peut être utilisée avant de trier n'importe quel tableau d'objets.

<code class="language-javascript">function compare(a, b) {
  // ...
  // 通过乘以 -1 反转返回值
  return comparison * -1;
}</code>

Conseils rapides: Tri des tableaux par chaînes en cas de manière insensible

Dans notre exemple précédent, nous voulions trier un tableau d'objets avec des valeurs qui sont des chaînes ou des nombres. Cependant, si vous savez que vous ne traiterez que des objets dont les valeurs sont des chaînes, vous pouvez utiliser la méthode localeCompare de JavaScript pour organiser votre code.

Cette méthode renvoie un nombre indiquant si la chaîne est avant, après ou la même que la chaîne donnée dans l'ordre de tri. Il permet un tri insensible aux tableaux:

<code class="language-javascript">const nums = [79, 48, 12, 4];

function compare(a, b) {
  if (a > b) return 1;
  if (b > a) return -1;

  return 0;
}

nums.sort(compare);
// => 4, 12, 48, 79</code>

En termes de notre fonction compareValues, cela signifie que nous pouvons écrire de cette façon:

<code class="language-javascript">function compareNums(a, b) {
  return a - b;
}
nums.sort(compareNums)</code>

Vous pouvez en savoir plus sur localeCompare sur MDN.

Conclusion

C'est tout - une courte introduction au tri des tableaux d'objets utilisant JavaScript natif. Bien que de nombreuses bibliothèques fournissent cette capacité de tri dynamique, comme il est montré, il n'est pas difficile de mettre en œuvre vous-même cette capacité. De plus, il est également utile de savoir ce qui se passe dans les coulisses.

Pour construire une compréhension plus complète des fondements de JavaScript natif, nous recommandons JavaScript: des débutants aux ninjas. Apprenez JavaScript à partir de zéro, y compris ES6, et pratiquez vos nouvelles connaissances grâce à une gamme de projets.

FAQ sur la façon de trier les tableaux d'objets dans javascript

Pouvez-vous trier les tableaux d'objets en javascript?

Oui. JavaScript fournit des méthodes intégrées pour aider à trier les éléments de tableau.

Comment trier les tableaux d'objets en javascript?

Vous pouvez utiliser la méthode Array.prototype.sort() et fournir une fonction de comparaison personnalisée pour trier le tableau d'objets en JavaScript. La fonction de comparaison doit comparer les propriétés pertinentes de chaque objet.

Comment trier un tableau d'objets dans JavaScript par clé?

Vous pouvez trier dynamiquement le tableau d'objets en fournissant des clés à la fonction de comparaison. Cela vous permet de trier par divers attributs. Pour trier le tableau d'objets par une clé spécifique (propriétés) en JavaScript, vous pouvez utiliser la méthode Array.prototype.sort() et une fonction de comparaison personnalisée qui compare les valeurs de la clé souhaitée pour chaque objet.

Comment trier dynamiquement les tableaux d'objets en javascript?

Pour trier dynamiquement les tableaux d'objets en JavaScript en fonction des touches (propriétés) déterminées à l'exécution, vous pouvez créer une fonction qui accepte les tableaux et les touches comme paramètres. Cette fonction peut ensuite utiliser la méthode Array.prototype.sort() ainsi qu'une fonction de comparaison personnalisée pour accéder aux touches fournies dynamiquement pour le tri.

Y a-t-il une bibliothèque qui simplifie le tri des tableaux d'objets? Oui, des bibliothèques comme Lodash et Sous-Sweet.js fournissent des fonctions utilitaires pour le tri des tableaux d'objets avec des fonctionnalités et une commodité supplémentaires. Cependant, les méthodes intégrées de JavaScript sort() sont généralement suffisantes pour répondre aux besoins de tri de base.

Le tri par la clé de la clé d'objet est-il sensible? Oui, par défaut, la clé de l'objet est sensible à la casse. Vous pouvez utiliser la méthode localeCompare() pour effectuer un tri insensible à la casse.

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!