Die Sortiermethode in JavaScript, die Sie nicht kennen

In der täglichen Geschäftsentwicklung ist Array (Array) ein Datentyp, den wir häufig verwenden, daher ist das Sortieren von Arrays neben der Methode des Durchlaufens des Arrays zum Anordnen auch sehr verbreitet Daten werden mit der nativen Methode sort in JS-Arrays angeordnet (ja, ich bevorzuge die Leistung von nativem JS).

[Verwandte Kursempfehlungen: JavaScript-Video-Tutorial]

1. Beispielsweise kann

direkt in einem verwendet werden array Die Sortiermethoden sind: reverse() und sort() Da die Methode reverse() nicht flexibel genug ist, wird die Methode sort() eingeführt. Standardmäßig sortiert die Methode sort() das Array in aufsteigender Reihenfolge.

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

Zu diesem Zeitpunkt stellte ich fest, dass die Daten von klein nach groß angeordnet waren, kein Problem, also änderte ich das Array in: var arr=[101,1,3,5,9,4,11 ];, und dann wird die Methode sort() aufgerufen, um die Sortierergebnisse auszugeben.

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

Zu diesem Zeitpunkt wurde festgestellt, dass die Arrays 101 und 11 vor Platz 3 rangierten. Dies liegt daran, dass die Methode sort() die Transformationsmethode toString() des aufruft Array und vergleichen Sie dann die erhaltenen Zeichenfolgen, um zu bestimmen, wie sortiert werden soll. Auch wenn jedes Element im Array ein numerischer Wert ist, vergleicht die Methode sort() Zeichenfolgen.

Wie werden die Zeichenfolgen sortiert? Sie werden entsprechend der Unicode-Kodierung der Zeichenfolgen von klein nach groß sortiert. Als nächstes versuchen wir, die Unicode-Kodierung jedes Elements im Array auszudrucken, um einen Blick darauf zu werfen.

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

war überrascht, dass die Unicode-Kodierung der Zeichenfolgen 1.101,11 alle 31 ist

2. Übergeben Sie die Vergleichsfunktion in der angegebenen Reihenfolge

oder höher Es wurde festgestellt, dass die Methode sort() nicht in der von uns gewünschten Reihenfolge sortiert ist. Wie kann das Problem also gelöst werden? Die Methode sort() kann eine Vergleichsfunktion als Parameter empfangen, um anzugeben, welcher Wert davor steht welcher Wert.

Die Vergleichsfunktion (compare) empfängt zwei Parameter, wenn der erste Parameter vor dem zweiten liegt, gibt sie eine negative Zahl zurück. Wenn die beiden Parameter gleich sind, gibt sie 0 zurück Beim zweiten wird 0 zurückgegeben. Anschließend wird eine Ganzzahl zurückgegeben.

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

Wir übergeben die Vergleichsfunktion an die Methode sort() und ordnen dann das arr-Array an. Das gedruckte Ergebnis ist wie folgt:

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

Sie können feststellen, dass es beim Sortieren kein Problem gibt von klein bis groß.

3. Sortieren von Objektarrays

Die Methode sort() sortiert das numerische Array durch Übergabe einer Vergleichsfunktion, aber in der Entwicklung werden wir ein Objektarray sortieren Sortieren Sie nach einem bestimmten Attribut wie ID, Alter usw.. Wie kann das Problem gelöst werden?

Um dieses Problem zu lösen: Wir können eine Funktion definieren, sie einen Attributnamen empfangen lassen und dann eine Vergleichsfunktion basierend auf diesem Attributnamen erstellen und sie als Rückgabewert zurückgeben (Funktionen in JS können als verwendet werden). Werte. Sie können eine Funktion nicht nur wie einen Parameter an eine andere Funktion übergeben, sondern auch eine Funktion als Ergebnis einer anderen Funktion zurückgeben. Es gibt einen Grund, warum Funktionen in JS in der Tat sehr flexibel sind. . Der Code lautet wie folgt.

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;
    }
  }
}

Definieren Sie einen Array-Benutzer, rufen Sie die Methode sort() auf und übergeben Sie CompareFunc(prop), um das Ausgabeergebnis zu drucken:

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}]

Standardmäßig, wenn die Methode sort() ohne Übergabe aufgerufen wird In der Vergleichsfunktion ruft die Methode sort() die Methode toString() jedes Objekts auf, um deren Reihenfolge zu bestimmen. Wenn wir die Methode CompareFunc('age') aufrufen, um eine Vergleichsfunktion zu erstellen, wird die Sortierung nach dem Alter sortiert Attribut des Objekts.

4. Sortieren von XML-Knoten

Obwohl viele Hintergrundrückgabedaten jetzt im JSON-Format vorliegen, sind sie sehr leichtgewichtig und einfach zu analysieren. Aber es gab vorher ein Projekt, da alle vom Backend zurückgegebenen Daten XML-Strings waren. Nachdem das Front-End die Daten erhalten hatte, mussten einige davon sortiert werden, um XML in ein Array zu konvertieren Das ist kein Problem, aber ich finde, dass der Code sehr überflüssig und mühsam ist. Später dachte ich plötzlich, dass die erhaltene XML auch ein Array-ähnliches Objekt sei. Wenn das Array-ähnliche Objekt in ein Array umgewandelt würde, wäre es dann nicht möglich, direkt zu sortieren?

// 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);
});

Sortierte Ergebnisse drucken

Sie können feststellen, dass die XML-Knoten nach Alter von klein nach groß sortiert wurden.

5. Zusammenfassung

Die Sortiermethode des JS-Arrays macht die Sortierung aufgrund der eingehenden Vergleichsfunktion wesentlich flexibler Buchstabe des chinesischen Pinyin usw. usw. Wir müssen nur daran denken, die Attributwerte der beiden Objekte explizit zu vergleichen, indem wir die Vergleichsfunktion übergeben, und die Sortierreihenfolge der Objekte durch Vergleich der Attributwerte bestimmen. Ich bin auch bei der Arbeit auf Probleme gestoßen und habe neue Ideen gefunden, um sie zu lösen. Wenn es Mängel gibt, korrigieren Sie mich bitte.

Referenzmaterialien:

"JavaScript Advanced Tutorial"

Dieser Artikel stammt aus der Spalte JS-Tutorial, willkommen zum Lernen!

Das obige ist der detaillierte Inhalt vonDie Sortiermethode in JavaScript, die Sie nicht kennen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!