JavaScript-Objekt nach Schlüssel sortieren

Question

Ich muss JavaScript-Objekte nach Schlüssel sortieren.

Daher das Folgende:

{ 'b' : 'asdsad', 'c' : 'masdas', 'a' : 'dsfdsfsdf' }

werden würde:

{ 'a' : 'dsfdsfsdf', 'b' : 'asdsad', 'c' : 'masdas' }

Answer 1

Die anderen Antworten auf diese Frage sind veraltet, entsprechen nicht der Realität der Umsetzung und haben offiziell nach der Veröffentlichung der ES6 / ES2015-Spezifikation nicht mehr korrekt sind.

---

Siehe der Abschnitt über Eigenschaft Iterationsreihenfolge en ES6 erforschen von Axel Rauschmayer :

Alle Methoden, die über Eigenschaftsschlüssel iterieren, tun dies in der gleichen Reihenfolge:

1. Zunächst alle Array-Indizes, numerisch sortiert.
2. Dann alle String-Schlüssel (die keine Indizes sind), in der Reihenfolge, in der sie erstellt wurden.
3. Dann alle Symbole, in der Reihenfolge, in der sie erstellt wurden.

Also ja, JavaScript-Objekte sind geordnet, und die Reihenfolge ihrer Schlüssel/Eigenschaften kann geändert werden.

So können Sie ein Objekt nach seinen Schlüsseln/Eigenschaften sortieren, und zwar in alphabetischer Reihenfolge:

const unordered = {
  'b': 'foo',
  'c': 'bar',
  'a': 'baz'
};

console.log(JSON.stringify(unordered));
//  '{"b":"foo","c":"bar","a":"baz"}'

const ordered = Object.keys(unordered).sort().reduce(
  (obj, key) => { 
    obj[key] = unordered[key]; 
    return obj;
  }, 
  {}
);

console.log(JSON.stringify(ordered));
//  '{"a":"baz","b":"foo","c":"bar"}'

Verwenden Sie var anstelle von const für die Kompatibilität mit ES5-Engines.

Answer 2

JavaScript-Objekte 1 sind nicht bestellt. Es ist sinnlos, zu versuchen, sie zu "sortieren". Wenn Sie über die Eigenschaften eines Objekts iterieren wollen, können Sie die Schlüssel sortieren und dann die zugehörigen Werte abrufen:

var myObj = {
    'b': 'asdsadfd',
    'c': 'masdasaf',
    'a': 'dsfdsfsdf'
  },
  keys = [],
  k, i, len;

for (k in myObj) {
  if (myObj.hasOwnProperty(k)) {
    keys.push(k);
  }
}

keys.sort();

len = keys.length;

for (i = 0; i < len; i++) {
  k = keys[i];
  console.log(k + ':' + myObj[k]);
}

---

Alternative Implementierung mit Object.keys Einfallsreichtum:

var myObj = {
    'b': 'asdsadfd',
    'c': 'masdasaf',
    'a': 'dsfdsfsdf'
  },
  keys = Object.keys(myObj),
  i, len = keys.length;

keys.sort();

for (i = 0; i < len; i++) {
  k = keys[i];
  console.log(k + ':' + myObj[k]);
}

---

1 Ich will nicht pedantisch sein, aber ein JSON-Objekt gibt es nicht .

Answer 3

Viele Leute haben erwähnt, dass "Objekte können nicht sortiert werden" aber danach geben sie Ihnen eine Lösung, die funktioniert. Paradox, nicht wahr?

Keiner erwähnt, warum diese Lösungen funktionieren. Sie funktionieren, weil in den meisten Implementierungen des Browsers die Werte in den Objekten in der Reihenfolge gespeichert werden, in der sie hinzugefügt wurden. Wenn Sie also ein neues Objekt aus einer sortierten Liste von Schlüsseln erstellen, wird ein erwartetes Ergebnis zurückgegeben.

Und ich denke, dass wir noch eine weitere Lösung hinzufügen könnten - ES5 functional way:

function sortObject(obj) {
    return Object.keys(obj).sort().reduce(function (result, key) {
        result[key] = obj[key];
        return result;
    }, {});
}

ES2015-Version von oben (formatiert zu "Einzeiler"):

const sortObject = o => Object.keys(o).sort().reduce((r, k) => (r[k] = o[k], r), {})

Kurze Erläuterung der obigen Beispiele (wie in den Kommentaren gefordert):

Object.keys gibt uns eine Liste von Schlüsseln im bereitgestellten Objekt ( obj o o ), dann sortieren wir diese mit dem Standard-Sortieralgorithmus, dann .reduce wird verwendet, um das Array wieder in ein Objekt zu konvertieren, diesmal jedoch mit allen sortierten Schlüsseln.

Answer 4

Leute, ich bin im übertragenen Sinne schockiert! Sicherlich sind alle Antworten schon etwas älter, aber niemand hat die Stabilität beim Sortieren auch nur erwähnt! Also habt Geduld mit mir, ich werde mein Bestes tun, um die Frage selbst zu beantworten und hier ins Detail zu gehen. Ich entschuldige mich jetzt schon mal dafür, dass es viel zu lesen sein wird.

Da es 2018 ist, werde ich nur ES6 verwenden, die Polyfills sind alle in den MDN-Dokumenten verfügbar, die ich an der angegebenen Stelle verlinken werde.

---

Antwort auf die Frage:

Wenn Ihre Schlüssel nur aus Zahlen bestehen, können Sie sicher Object.keys() zusammen mit Array.prototype.reduce() um das sortierte Objekt zurückzugeben:

// Only numbers to show it will be sorted.
const testObj = {
  '2000': 'Articel1',
  '4000': 'Articel2',
  '1000': 'Articel3',
  '3000': 'Articel4',
};

// I'll explain what reduces does after the answer.
console.log(Object.keys(testObj).reduce((accumulator, currentValue) => {
  accumulator[currentValue] = testObj[currentValue];
  return accumulator;
}, {}));

/**
 * expected output:
 * {
 * '1000': 'Articel3',
 * '2000': 'Articel1',
 * '3000': 'Articel4',
 * '4000': 'Articel2' 
 *  } 
 */

// if needed here is the one liner:
console.log(Object.keys(testObj).reduce((a, c) => (a[c] = testObj[c], a), {}));

Wenn Sie jedoch mit Zeichenketten arbeiten, empfehle ich dringend die Verkettung von Array.prototype.sort() in all dem:

// String example
const testObj = {
  'a1d78eg8fdg387fg38': 'Articel1',
  'z12989dh89h31d9h39': 'Articel2',
  'f1203391dhj32189h2': 'Articel3',
  'b10939hd83f9032003': 'Articel4',
};
// Chained sort into all of this.
console.log(Object.keys(testObj).sort().reduce((accumulator, currentValue) => {
  accumulator[currentValue] = testObj[currentValue];
  return accumulator;
}, {}));

/**
 * expected output:   
 * { 
 * a1d78eg8fdg387fg38: 'Articel1',
 * b10939hd83f9032003: 'Articel4',
 * f1203391dhj32189h2: 'Articel3',
 * z12989dh89h31d9h39: 'Articel2' 
 * }
 */

// again the one liner:
console.log(Object.keys(testObj).sort().reduce((a, c) => (a[c] = testObj[c], a), {}));

Falls sich jemand fragt, was reduzieren bedeutet:

// Will return Keys of object as an array (sorted if only numbers or single strings like a,b,c).
Object.keys(testObj)

// Chaining reduce to the returned array from Object.keys().
// Array.prototype.reduce() takes one callback 
// (and another param look at the last line) and passes 4 arguments to it: 
// accumulator, currentValue, currentIndex and array
.reduce((accumulator, currentValue) => {

  // setting the accumulator (sorted new object) with the actual property from old (unsorted) object.
  accumulator[currentValue] = testObj[currentValue];

  // returning the newly sorted object for the next element in array.
  return accumulator;

  // the empty object {} ist the initial value for  Array.prototype.reduce().
}, {});

Bei Bedarf finden Sie hier die Erklärung für den Einzeiler:

Object.keys(testObj).reduce(

  // Arrow function as callback parameter.
  (a, c) => 

  // parenthesis return! so we can safe the return and write only (..., a);
  (a[c] = testObj[c], a)

  // initial value for reduce.
  ,{}
);

• Docs zum Reduzieren: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
• Warum Klammern bei JavaScript-Return-Anweisungen verwenden? http://jamesknelson.com/javascript-return-parenthesis/

---

Warum das Sortieren ein bisschen kompliziert ist:

Kurz gesagt Object.keys() gibt ein Array mit der gleichen Reihenfolge zurück wie bei einer normalen Schleife:

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

Object.keys() gibt ein Array zurück, dessen Elemente Zeichenketten sind sind, die den aufzählbaren Eigenschaften entsprechen, die direkt auf dem Objekt gefunden wurden. Die Reihenfolge der Eigenschaften ist die gleiche wie bei der Schleifenbildung über die Eigenschaften des Objekts ergibt.

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Nebenbei bemerkt: Sie können Object.keys() auch auf Arrays, beachten Sie, dass der Index zurückgegeben wird:

// simple array
const arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

Aber es ist nicht so einfach, wie diese Beispiele zeigen, denn Objekte in der realen Welt können auch Zahlen und Buchstaben oder sogar Symbole enthalten (bitte tun Sie das nicht).

Hier ist ein Beispiel mit allen in einem Objekt:

// This is just to show what happens, please don't use symbols in keys.
const testObj = {
  '1asc': '4444',
  1000: 'a',
  b: '1231',
  '#01010101010': 'asd',
  2: 'c'
};

console.log(Object.keys(testObj));
// output: [ '2', '1000', '1asc', 'b', '#01010101010' ]

Wenn wir nun Array.prototype.sort() auf dem Feld oberhalb der Ausgabe ändert:

console.log(Object.keys(testObj).sort());
// output: [ '#01010101010', '1000', '1asc', '2', 'b' ]

Hier ist ein Zitat aus den Unterlagen:

Die Methode sort() sortiert die Elemente eines Arrays an Ort und Stelle und gibt das Array zurück. Die Sortierung ist nicht unbedingt stabil. Die Standardsortierreihenfolge ist nach den Unicode-Codepunkten der Zeichenketten.

Die zeitliche und räumliche Komplexität der Sorte kann nicht garantiert werden, da sie abhängig von der Implementierung ist.

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Sie müssen sicherstellen, dass eine von ihnen das gewünschte Ergebnis für Sie liefert. In realen Beispielen neigen Menschen dazu, Dinge zu verwechseln, vor allem, wenn Sie verschiedene Informationsinputs wie APIs und Datenbanken zusammen verwenden.

---

Was ist also so schlimm daran?

Nun, es gibt zwei Artikel, die jeder Programmierer verstehen sollte:

In-Place-Algorithmus :

In der Informatik ist ein In-Place-Algorithmus ein Algorithmus, der Eingaben ohne zusätzliche Datenstruktur umwandelt. Allerdings wird ein geringer zusätzlicher Speicherplatz für Hilfsvariablen zugelassen. Die Eingabe wird in der Regel bei der Ausführung des Algorithmus durch die Ausgabe überschrieben. Ein In-Place-Algorithmus aktualisiert die Eingabesequenz nur durch Ersetzen oder Vertauschen von Elementen. Ein Algorithmus, der nicht "in-place" ist, wird manchmal auch als "not-in-place" oder "out-of-place" bezeichnet.

Im Grunde wird also unser altes Array überschrieben! Dies ist wichtig, wenn Sie das alte Array aus anderen Gründen behalten wollen. Behalten Sie dies also im Hinterkopf.

Sortieralgorithmus

Stabile Sortieralgorithmen sortieren identische Elemente in der gleichen Reihenfolge, die sie in der Eingabe erscheinen. Beim Sortieren einiger Datenarten wird nur ein Teil der Daten untersucht, um die Sortierreihenfolge zu bestimmen. Ein Beispiel, Im Beispiel der Kartensortierung auf der rechten Seite werden die Karten sortiert nach ihrem Rang sortiert, und die Farbe wird ignoriert. Dies erlaubt die Möglichkeit, mehrere verschiedene korrekt sortierte Versionen des ursprünglichen Liste. Stabile Sortieralgorithmen wählen eine davon aus, nach der folgenden Regel: Wenn zwei Elemente als gleichwertig verglichen werden, wie die beiden 5er-Karten, dann wird ihre relative Reihenfolge beibehalten, so dass wenn das eine vor dem anderen in der Eingabe kommt, kommt es auch vor der anderen in der Ausgabe.

Ein Beispiel für eine stabile Sorte auf Spielkarten. Wenn die Karten nach Rang sortiert werden nach Rang sortiert werden, müssen die beiden 5er in der gleichen Reihenfolge in der sortierten Ausgabe bleiben, in der sie ursprünglich waren. Wenn sie einer nicht stabilen Sortierung können die 5er in der sortierten Ausgabe in der umgekehrten Reihenfolge in der sortierten Ausgabe.

Das zeigt, dass die Sortierung richtig ist, aber sie hat sich geändert. In der realen Welt müssen wir also sicherstellen, dass wir das bekommen, was wir erwarten, auch wenn die Sortierung richtig ist! Das ist sehr wichtig und sollte auch beachtet werden. Für weitere JavaScript-Beispiele schauen Sie in die Array.prototype.sort() - Doku: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer 5

Es ist 2019 und wir haben eine 2019er Lösung für dieses Problem :)

Object.fromEntries(Object.entries({b: 3, a:8, c:1}).sort())