La méthode de tri en JavaScript que vous ne connaissez pas

Dans le développement commercial quotidien, le tableau (Array) est un type de données que nous utilisons souvent, donc le tri des tableaux est également très courant en plus d'utiliser la méthode de boucle à travers les tableaux pour organiser les données. est organisé à l'aide de la méthode native de tri dans les tableaux JS (oui, je préfère la puissance du JS natif).

[Cours recommandés : Tutoriel vidéo JavaScript]

1 Par exemple,

peut être utilisé directement dans un tableau. Les méthodes de tri sont : reverse() et sort() Parce que la méthode reverse() n'est pas assez flexible, la méthode sort() est introduite. Par défaut, la méthode sort() trie le tableau par ordre croissant.

var arr=[1,3,5,9,4];
console.log(arr.sort());
// 输出: [1, 3, 4, 5, 9]

À ce moment-là, j'ai trouvé que les données étaient disposées de petite à grande, pas de problème, j'ai donc changé le tableau en : var arr=[101,1,3,5,9,4,11 ; ];, puis la méthode appelée sort () imprime les résultats du tri.

var arr=[101,1,3,5,9,4,11];
console.log(arr.sort());
// 输出: [1, 101, 11, 3, 4, 5, 9]

A ce moment, il a été constaté que les tableaux 101 et 11 étaient classés devant 3. En effet, la méthode sort() appellera la méthode de transformation toString() du tableau, puis comparez les chaînes obtenues pour déterminer Comment trier ? Même si chaque élément du tableau est une valeur numérique, la méthode sort() compare les chaînes.

Alors, comment les chaînes sont-elles triées ? Elles sont triées du plus petit au plus grand en fonction de l'encodage Unicode des chaînes. Ensuite, nous essayons d'imprimer le codage Unicode de chaque élément du tableau pour y jeter un œil.

...
// 转码方法
function getUnicode (charCode) {
    return charCode.charCodeAt(0).toString(16);
}
// 打印转码
arr.forEach((n)=>{
  console.log(getUnicode(String(n)))
});
// 输出: 31 31 31 33 34 35 39

a été surpris de constater que les codages Unicode des chaînes 1,101,11 sont tous 31

2 Passez la fonction de comparaison dans l'ordre spécifié

.

ou supérieur Il s'avère que la méthode sort() n'est pas triée dans l'ordre souhaité, alors comment le résoudre ? La méthode sort() peut recevoir une fonction de comparaison en paramètre pour spécifier quelle valeur se trouve devant quelle valeur.

La fonction de comparaison (compare) reçoit deux paramètres. Si le premier paramètre est avant le deuxième paramètre, elle renvoie un nombre négatif, si les deux paramètres sont égaux, elle renvoie 0. Si le premier paramètre est après le. deuxième paramètre, il renvoie puis renvoie un entier.

function compare(value1,value2){
  if (value1 < value2){
    return -1;
  } else if (value1 > value2){
    return 1;
  } else{
    return 0;
  }
}

Nous passons la fonction de comparaison à la méthode sort(), puis organisons le tableau arr. Le résultat imprimé est le suivant :

var arr=[101,1,3,5,9,4,11];
console.log(arr.sort(compare));
// 输出: [1, 3, 4, 5, 9, 11, 101];

Vous pouvez constater qu'il n'y a aucun problème de tri. du petit au grand.

3. Tri des tableaux d'objets

La méthode sort() trie le tableau numérique en passant une fonction de comparaison, mais en développement, nous trierons un tableau d'objets Trier selon un certain attribut, tel que l'identifiant, l'âge, etc., alors comment le résoudre ?

Pour résoudre ce problème : nous pouvons définir une fonction, la laisser recevoir un nom d'attribut, puis créer une fonction de comparaison basée sur ce nom d'attribut et la renvoyer comme valeur de retour (les fonctions en JS peuvent être utilisées comme valeurs, Non seulement vous pouvez transmettre une fonction à une autre fonction comme un paramètre, mais vous pouvez également renvoyer une fonction comme résultat d'une autre fonction. Il y a une raison pour laquelle les fonctions sont des citoyens de première classe dans JS. C'est en effet très flexible. ) Le code est le suivant.

function compareFunc(prop){
  return function (obj1,obj2){
    var value1=obj1[prop];
    var value2=obj2[prop];
    if (value1 < value2){
        return -1;
    } else if (value1 > value2){
        return 1;
    } else{
        return 0;
    }
  }
}

Définissez un tableau d'utilisateurs, appelez la méthode sort() et transmettez compareFunc(prop) pour imprimer le résultat de sortie :

var users=[
    {name:'tom',age:18},
    {name:'lucy',age:24},
    {name:'jhon',age:17},
];
console.log(users.sort(compareFunc('age')));
// 输出结果
[{name: "jhon", age: 17},
{name: "tom", age: 18},
{name: "lucy", age: 24}]

Par défaut, lors de l'appel de la méthode sort() sans passer dans la fonction de comparaison, la méthode sort() appellera la méthode toString() de chaque objet pour déterminer leur ordre. Lorsque nous appelons la méthode compareFunc('age') pour créer une fonction de comparaison, le tri est trié en fonction de l'âge. attribut de l'objet.

4. Tri des nœuds XML

Bien que de nombreuses données de retour en arrière-plan soient désormais au format JSON, elles sont très légères et faciles à analyser. Mais il y avait un projet auparavant car toutes les données renvoyées par le backend étaient des chaînes XML. Une fois que le front-end avait obtenu les données, elles devaient être sérialisées. Certaines d'entre elles devaient être triées. Le tri précédent consistait à convertir le XML en tableau. objets à trier. Cela ne pose aucun problème, mais je pense que le code est très redondant et gênant. Plus tard, j'ai soudainement pensé que le XML obtenu était également un objet de type tableau. Si l'objet de type tableau était converti en tableau, ne serait-il pas possible de trier directement ?

// 1.模拟后端返回的XML字符串
var str=`
<root>
  <user>
    <name>tom</name>
    <age>18</age>
  </user>
  <user>
    <name>lucy</name>
    <age>24</age>
  </user>
  <user>
    <name>jhon</name>
    <age>17</age>
  </user>
<root>
`   
// 2.定义比较函数
function compareFunction(prop){
  return function (a, b) {
      var value1= a.getElementsByTagName(prop)[0].textContent;
      var value2= b.getElementsByTagName(prop)[0].textContent;
      if (value1 < value2){
        return -1;
      } else if (value1 > value2){
        return 1;
      } else{
        return 0;
    }
  }
}
// 3.xml字符串转换成xml对象
var domParser = new DOMParser();
var xmlDoc = domParser.parseFromString(str, &#39;text/xml&#39;);
var userElements=xmlDoc.getElementsByTagName(&#39;user&#39;));
// 4.userElements类数组对象转换成数组再排序
var userElements=Array.prototype.slice.call(xmlDoc.getElementsByTagName(&#39;user&#39;));
var _userElements=userElements.sort(compareFunction(&#39;age&#39;));
// 5.打印排序后的结果
_userElements.forEach((user)=>{
  console.log(user.innerHTML);
});

Imprimez les résultats triés

Vous pouvez constater que les nœuds XML ont été triés du plus petit au plus grand en fonction de leur âge.

5. Résumé

La méthode de tri du tableau JS rend le tri beaucoup plus flexible grâce à la fonction de comparaison entrante. Elle peut également trier en fonction du temps, le premier. lettre du pinyin chinois, etc. Etc., il suffit de penser à comparer explicitement les valeurs d'attribut des deux objets en passant la fonction de comparaison, et de déterminer l'ordre de tri des objets en comparant les valeurs d'attribut. J'ai également rencontré des problèmes au travail et j'ai trouvé de nouvelles idées pour les résoudre. Ceci est un bref résumé. S'il y a des lacunes, veuillez me corriger.

Matériel de référence :

"Tutoriel avancé JavaScript"

Cet article provient de la colonne Tutoriel js, bienvenue pour apprendre !

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!