Zeigt die ursprüngliche Reihenfolge der Objekteigenschaften in console.log an

Lesezeit: 4 Minuten

Zeigt die ursprungliche Reihenfolge der Objekteigenschaften in consolelog an
MTK

Ich brauche etwas Debugging, um die ursprüngliche Reihenfolge der Eigenschaften eines JavaScript-Objekts zu sehen, aber (zumindest in Chrome devtools) console.log() zeigt mir ein alphabetisch geordnetes Objekt.

Ex:

var obj = {
    z: 1,
    t: 2,
    y: 3,
    a: 4,
    n: 5,
    k: 6
}

console.log(obj) zeigt das:

Object {z: 1, t: 2, y: 3, a: 4, n: 5…}
a:4
k:6
n:5
t:2
y:3
z:1

//expected (needed ) original order
z: 1
t: 2
y: 3
a: 4
n: 5
k: 6

  • Glauben Sie wirklich, dass Javascript-Objekteigenschaften eine Reihenfolge haben?

    – Gerardo Furtado

    20. August 2016 um 13:39 Uhr

  • Objekte sind ungeordnete Sammlungen. Es gibt nie ein Garantie dass Sie eine bestimmte Bestellung erhalten. Klingt so, als müsste Ihr Ansatz zum Debuggen möglicherweise optimiert werden.

    Benutzer1106925

    20. August 2016 um 13:39 Uhr


  • Sie müssen ein Array verwenden, da das Objekt nicht garantiert, dass die Eigenschaften bei jeder Iteration dieselbe Reihenfolge haben. Arrays garantieren diese Reihenfolge.

    – Schwimmburger

    20. August 2016 um 13:41 Uhr

  • Diese Kommentare sind so veraltet…

    – Klesun

    15. Dezember 2020 um 14:09 Uhr

  • Ja, diese Kommentare sind veraltet – aber es ist hilfreich zu sagen, warum! Hier ist eine gute Antwort, um zu bestätigen, dass sie tatsächlich eine Bestellung haben: stackoverflow.com/a/31102605/16940. Achten Sie jedoch darauf, dass die Chrome-Entwicklungstools Eigenschaften im Inspektor sortieren, die möglicherweise nicht in der Reihenfolge sind, in der sie hinzugefügt wurden / in der iteriert wird. Dies kann die Verwirrung erheblich steigern, bis Sie erkennen, was los ist! (oder wenn du es vergisst)

    – Simon_Weaver

    14. Juli 2021 um 8:05 Uhr


1647149707 533 Zeigt die ursprungliche Reihenfolge der Objekteigenschaften in consolelog an
georg

console.log sortiert tatsächlich die Eigenschaften, in einigen Fällen können Sie verwenden JSON.stringify der die Ordnung bewahrt, z

console.log(JSON.stringify(obj, null /*replacer function */, 4 /* space */))

NB: Entgegen der landläufigen Meinung behalten js-Objekte die Aufzählungsreihenfolge gemäß der OwnPropertyKeys-Spezifikation (zuerst ganze Zahlen, dann andere Eigenschaften in der Reihenfolge der Einfügungen)

  • Leider können Sie mit diesem Ansatz keine Schlüssel zusammenklappen.

    – Klesun

    20. April 2018 um 16:35 Uhr

Objekte behalten die Reihenfolge bei, in der ihre (nicht numerischen) Schlüssel eingefügt wurden, aber sie sind es nur garantiert in dieser Reihenfolge mit bestimmten Methoden zu iterieren. Gemäß der Spezifikation, Object.keys und seine Varianten, JSON.stringifyund for..in Schleifen durchlaufen alle in einer unbestimmten Reihenfolge. Diese Methoden rufen alle auf EnumerateObjectPropertiesin der es ausdrücklich heißt:

Die Mechanik und Reihenfolge der Aufzählung der Eigenschaften ist nicht festgelegt

Während Umgebungen für diese Methoden im Allgemeinen sowieso in der vorhersehbaren Reihenfolge iterieren, wird dieses Verhalten in keiner Weise durch die Spezifikation garantiert.

Aber, Object.getOwnPropertyNames (und Reflect.ownKeysund Object.getOwnPropertySymbols) sind garantiert in einer bestimmten Reihenfolge iterieren: aufsteigende numerische Tasten, gefolgt von anderen Tasten in der Reihenfolge der Einfügung, per [[OwnPropertyKeys]].

Eine spezifikationsgarantierte Methode zum Protokollieren (nicht numerischer) Eigenschaften in der Reihenfolge der Einfügungen beinhaltet also die Verwendung einer der oben genannten Methoden, anstatt Object.keys oder seine Varianten:

var obj = {
  z: 1,
  t: 2,
  y: 3,
  a: 4,
  n: 5,
  k: 6
};

const str="{\n" +
  Object.getOwnPropertyNames(obj).map(key => `  ${key}: ${obj[key]}`).join('\n')
  + '\n}';
console.log(str);

Für verschachtelte Objekte benötigen Sie stattdessen eine rekursive Funktion:

var obj = {
  z: 1,
  t: 2,
  y: 3,
  a: 4,
  nested: {
    foo: 9,
    bar: 99,
    baz: 35
  },
  n: 5,
  k: 6
};

const objToArrOfLines = (obj, lines=[], leftPadding=0, keyForThisObj) => {
  lines.push(`${' '.repeat(leftPadding)}${keyForThisObj ? keyForThisObj + ': ' : ''}{`);
  Object.getOwnPropertyNames(obj).forEach((key) => {
    const val = obj[key];
    if (typeof val === 'object') {
      objToArrOfLines(val, lines, leftPadding + 2, key);
    } else {
      lines.push(`${' '.repeat(leftPadding + 2)}${key}: ${val}`);
    }
  });
  lines.push(`${' '.repeat(leftPadding)}}`);
  return lines;
};
const objToStr = (obj) => {
  console.log(objToArrOfLines(obj).join('\n'));
};

objToStr(obj);

1647149707 511 Zeigt die ursprungliche Reihenfolge der Objekteigenschaften in consolelog an
Klesun

Wenn Sie ein sehr großes Objekt protokollieren müssen, um Schlüssel zu reduzieren, besteht eine andere Möglichkeit darin, es in Schlüssel-Wert-Paar-Arrays umzuwandeln.

let keepKeyOrder = function(obj) {
    if (typeof obj === 'object' && !Array.isArray(obj)) {
        let transformKey = (k) => [k, keepKeyOrder(obj[k])];
        return Object.keys(obj).map(transformKey);
    } else {
        return obj;
    }
};

console.log(keepKeyOrder({a:3,c:4,b:{b3:123,b2:234,b1:345}}));

Ausgänge:

Geben Sie hier die Bildbeschreibung ein

1647149708 119 Zeigt die ursprungliche Reihenfolge der Objekteigenschaften in consolelog an
Observablerxjs

Eine andere einfache Lösung wäre:

console.log(Object.entries(obj).map(k=>({[k[0]]:k[1]})))

1647149708 199 Zeigt die ursprungliche Reihenfolge der Objekteigenschaften in consolelog an
Simon_Weaver

Nur um klarzustellen Console.log sortiert aber auch nicht….

Dies ist eine Liste von Haltepunkten, die die richtige Reihenfolge (wie sie erstellt wurde) ist default, mobileM, mobileL, tablet, desktopM und das steht in der ersten Zeile.

Geben Sie hier die Bildbeschreibung ein

Aber wenn Sie es erweitern, sind sie in alphabetischer Reihenfolge. Das Gleiche gilt, wenn Sie den Mauszeiger über etwas bewegen und das Popup anzeigen.

Der Punkt ist, dass es sie in einer Minute sortiert und in der nächsten nicht. Sollte wirklich eine Option sein, scheint es aber nicht zu sein – und dieses gemischte Verhalten kann Sie wirklich stolpern lassen, wenn Sie sich normalerweise nicht um die Eigentumsordnung kümmern.

996140cookie-checkZeigt die ursprüngliche Reihenfolge der Objekteigenschaften in console.log an

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy