JavaScript - Wie erstelle ich ein assoziatives Array, das Ordnung garantiert?

Question

Wie kann ich ein assoziatives Array erstellen, garantiert Bestellung?

Object (not guarantee order):

var obj = { 
    "first":"first", 
    "2":"2", 
    "34":"34", 
    "1":"1", 
    "second":"second" 
}; 
for (var i in obj) { 
    console.log(i); 
}; 

Ergebnis:

1 
2 
34 
first 
second 

Array:

var a = new Array(); 
a['first'] = "first"; 
a['2'] = "2"; 
a['34'] = "34"; 
a['1'] = "1"; 
a['second'] = "second"; 
console.log(a); // [1: "1", 2: "2", 34: "34", first: "first", second: "second"] 

for (var i in a) { 
    console.log(i); 
}; 

Ergebnis:

1 
2 
34 
first 
second 

Das Array garantiert keine Reihenfolge.

Wie kann ich ein korrektes Array erstellen, das die Reihenfolge dann garantiert?

Answer 1

In ECMAScript 6 Kartentyp ist eine geordnete Liste von Schlüssel-Wert-Paaren, wobei sowohl der Schlüssel und der Wert jeder Art haben kann. Ein Kartenobjekt iteriert seine Elemente in Einfügereihenfolge.

Die forEach-Methode führt eine angegebene Funktion einmal pro Schlüssel/Wert-Paar im Map-Objekt in der Reihenfolge der Anzeigen aus.

var a = new Map; 
 
a.set("first", "first"); 
 
a.set("2", "2"); 
 
a.set("34", "34"); 
 
a.set("1", "1"); 
 
a.set("second", "second"); 
 

 
a.forEach(function(value, key) { 
 
    console.log(key + ' => ' + value) 
 
})

können Sie auch for...of Schleife verwenden, und es gibt einen Array von [key, value] für jede Iteration.

var a = new Map; 
 
a.set("first", "first"); 
 
a.set("2", "2"); 
 
a.set("34", "34"); 
 
a.set("1", "1"); 
 
a.set("second", "second"); 
 

 
for (var p of a) console.log(p)

Answer 2

Sie können keine Eigenschaften in einer bestimmten Reihenfolge im Objekt speichern, aber Sie können sie beim Drucken in einer beliebigen benutzerdefinierten Reihenfolge analysieren. Sie müssen ein anderes Array von Werten erstellen oder auf ein Dokument und anschließend eine HTML-Zeichenfolge drucken.

Sie können so etwas wie dies versuchen:

Hinweis: Sie können überprüfen, Vergleichsoperator > oder < verwenden. Sie können numerische Werte syntaktisch analysieren und nicht-numerische Werte vergleichen oder mit einem String vergleichen. Bei Problemen wie eleven treten jedoch Probleme auf.

var obj = { 
 
    "first":"first", 
 
    "2":"2", 
 
    "34":"34", 
 
    "1":"1", 
 
    "second":"second" 
 
}; 
 

 
var sortOrder = ["1", "2", "34", "first", "second"]; 
 

 
var html = Object.keys(obj).sort(function(a,b){ 
 
    var _a = getSortPosition(a); 
 
    var _b = getSortPosition(b); 
 
    return _a> _b ? 1: _a<_b ? -1 : 0; 
 
}).map(function(item){ 
 
    return "<span>" +item+ "</span>"; 
 
}).join("<br/>"); 
 

 
document.getElementById("content").innerHTML = html; 
 

 
function getSortPosition(key){ 
 
    var _index = sortOrder.indexOf(key); 
 
    return _index >-1 ? _index : 999; 
 
}

<div id="content"></div>