Sortieren eines Arrays von Objekten nach Eigenschaftswerten

Question

Ich habe die folgenden Objekte über AJAX erhalten und in einem Array gespeichert:

var homes = [
    {
        "h_id": "3",
        "city": "Dallas",
        "state": "TX",
        "zip": "75201",
        "price": "162500"
    }, {
        "h_id": "4",
        "city": "Bevery Hills",
        "state": "CA",
        "zip": "90210",
        "price": "319250"
    }, {
        "h_id": "5",
        "city": "New York",
        "state": "NY",
        "zip": "00010",
        "price": "962500"
    }
];

Wie erstelle ich eine Funktion zum Sortieren der Objekte nach dem price Eigentum in aufsteigend o absteigend nur mit JavaScript bestellen?

Answer 1

Absteigende Reihenfolge der Preise:

homes.sort((x,y) => {return y.price - x.price})

Aufsteigende Reihenfolge der Preise:

homes.sort((x,y) => {return x.price - y.price})

Answer 2

Ich bin mir zwar bewusst, dass der OP ein Array von Zahlen sortieren wollte, aber diese Frage wurde als Antwort auf ähnliche Fragen zu Zeichenketten markiert. Die obigen Antworten berücksichtigen daher nicht die Sortierung eines Arrays von Text, bei dem die Groß-/Kleinschreibung wichtig ist. Die meisten Antworten nehmen die Zeichenkettenwerte und konvertieren sie in Groß-/Kleinschreibung und sortieren dann auf die eine oder andere Weise. Die Anforderungen, an die ich mich halte, sind einfach:

• Alphabetisch sortieren A-Z
• Großbuchstaben desselben Wortes sollten vor Kleinbuchstaben stehen
• Werte mit demselben Buchstaben (A/a, B/b) sollten in Gruppen zusammengefasst werden.

Was ich erwarte, ist [ A, a, B, b, C, c ] aber die obigen Antworten ergeben A, B, C, a, b, c . Ich habe mir tatsächlich länger den Kopf darüber zerbrochen, als ich wollte (deshalb poste ich dies in der Hoffnung, dass es wenigstens einer anderen Person helfen wird). Während zwei Benutzer erwähnen die localeCompare Funktion in den Kommentaren für die markierte Antwort, das habe ich erst gesehen, nachdem ich beim Suchen auf die Funktion gestoßen bin. Nach dem Lesen die Dokumentation String.prototype.localeCompare() Ich konnte mir dies ausdenken:

var values = [ "Delta", "charlie", "delta", "Charlie", "Bravo", "alpha", "Alpha", "bravo" ];
var sorted = values.sort((a, b) => a.localeCompare(b, undefined, { caseFirst: "upper" }));
// Result: [ "Alpha", "alpha", "Bravo", "bravo", "Charlie", "charlie", "Delta", "delta" ]

Damit wird die Funktion angewiesen, Großbuchstaben vor Kleinbuchstaben zu sortieren. Der zweite Parameter in der localeCompare Funktion ist es, das Gebietsschema zu definieren, aber wenn Sie es so lassen undefined wird das Gebietsschema automatisch für Sie ermittelt.

Dies gilt auch für das Sortieren eines Arrays von Objekten:

var values = [
    { id: 6, title: "Delta" },
    { id: 2, title: "charlie" },
    { id: 3, title: "delta" },
    { id: 1, title: "Charlie" },
    { id: 8, title: "Bravo" },
    { id: 5, title: "alpha" },
    { id: 4, title: "Alpha" },
    { id: 7, title: "bravo" }
];
var sorted = values
    .sort((a, b) => a.title.localeCompare(b.title, undefined, { caseFirst: "upper" }));

Answer 3

Dies hätte durch eine einfache Zeile erreicht werden können valueof() Sortierfunktion. Führen Sie das untenstehende Codeschnipsel aus, um eine Demo zu sehen.

var homes = [
    {
        "h_id": "3",
        "city": "Dallas",
        "state": "TX",
        "zip": "75201",
        "price": "162500"
    }, {
        "h_id": "4",
        "city": "Bevery Hills",
        "state": "CA",
        "zip": "90210",
        "price": "319250"
    }, {
        "h_id": "5",
        "city": "New York",
        "state": "NY",
        "zip": "00010",
        "price": "962500"
    }
];

console.log("To sort descending/highest first, use operator '<'");

homes.sort(function(a,b) { return a.price.valueOf() < b.price.valueOf();});

console.log(homes);

console.log("To sort ascending/lowest first, use operator '>'");

homes.sort(function(a,b) { return a.price.valueOf() > b.price.valueOf();});

console.log(homes);

Answer 4

Hier ist eine Zusammenfassung aller oben genannten Antworten.

Fiddle-Validierung: http://jsfiddle.net/bobberino/4qqk3/

var sortOn = function (arr, prop, reverse, numeric) {

    // Ensure there's a property
    if (!prop || !arr) {
        return arr
    }

    // Set up sort function
    var sort_by = function (field, rev, primer) {

        // Return the required a,b function
        return function (a, b) {

            // Reset a, b to the field
            a = primer(a[field]), b = primer(b[field]);

            // Do actual sorting, reverse as needed
            return ((a < b) ? -1 : ((a > b) ? 1 : 0)) * (rev ? -1 : 1);
        }

    }

    // Distinguish between numeric and string to prevent 100's from coming before smaller
    // e.g.
    // 1
    // 20
    // 3
    // 4000
    // 50

    if (numeric) {

        // Do sort "in place" with sort_by function
        arr.sort(sort_by(prop, reverse, function (a) {

            // - Force value to a string.
            // - Replace any non numeric characters.
            // - Parse as float to allow 0.02 values.
            return parseFloat(String(a).replace(/[^0-9.-]+/g, ''));

        }));
    } else {

        // Do sort "in place" with sort_by function
        arr.sort(sort_by(prop, reverse, function (a) {

            // - Force value to string.
            return String(a).toUpperCase();

        }));
    }

}

Answer 5

Eine eher LINQ-ähnliche Lösung:

Array.prototype.orderBy = function (selector, desc = false) {
    return [...this].sort((a, b) => {
        a = selector(a);
        b = selector(b);

        if (a == b) return 0;
        return (desc ? a > b : a < b) ? -1 : 1;
    });
}

Vorteile:

• Autovervollständigung für Eigenschaften
• erweitert Array-Prototyp
• ändert das Array nicht
• einfach in der Methodenverkettung zu verwenden

Verwendung:

Array.prototype.orderBy = function(selector, desc = false) {
  return [...this].sort((a, b) => {
    a = selector(a);
    b = selector(b);

    if (a == b) return 0;
    return (desc ? a > b : a < b) ? -1 : 1;
  });
};

var homes = [{
  "h_id": "3",
  "city": "Dallas",
  "state": "TX",
  "zip": "75201",
  "price": "162500"
}, {
  "h_id": "4",
  "city": "Bevery Hills",
  "state": "CA",
  "zip": "90210",
  "price": "319250"
}, {
  "h_id": "5",
  "city": "New York",
  "state": "NY",
  "zip": "00010",
  "price": "962500"
}];

let sorted_homes = homes.orderBy(h => parseFloat(h.price));
console.log("sorted by price", sorted_homes);

let sorted_homes_desc = homes.orderBy(h => h.city, true);
console.log("sorted by City descending", sorted_homes_desc);