est-il possible de faire en sorte que la carte de jQuery ne soit pas triée ?

Question

Je ne m'attendais pas à ce que la carte de jQuery permette de trier les résultats. Est-il possible de l'utiliser, ou quelque chose de similaire, et de conserver les résultats dans le même ordre que la source ?

var items = {
  "7": "AAA",
  "6": "BBB",
  "2": "CCC",
  "4": "DDD",
  "3": "EEE",
  "1": "FFF",
  "5": "GGG"
};

function ShowList(list, target) {
  $(target).append($.map(list, function (val, key) {
    return '<li>' + key + ':' + val + '</li>';
  }).join("\r\n"));
}

ShowList(items, '#list');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list"></ul>

Answer 1

Ce n'est pas jQuery, c'est votre moteur JavaScript. Alors que les objets JavaScript n'avaient pas d'ordre avant ES2015, presque tous les moteurs JavaScript leur ajoutent une certaine forme d'ordre, et l'une des choses les plus courantes est de regrouper toutes les propriétés dont les noms correspondent à la définition d'un index de tableau (même si cet objet n'est pas un tableau), et de les garder dans l'ordre numérique.

À partir de ES2015, les propriétés des objets faire ont un ordre et certaines opérations de la spécification doivent les itérer/les lister dans cet ordre (mais pas Object.keys ou for-in pour permettre un comportement différent de l'héritage). L'ordre spécifié regroupe également les propriétés dont les noms ressemblent à des index de tableau, et les conserve dans l'ordre numérique.

Qu'il s'agisse de ES5 ou d'une version antérieure ou de ES2015 ou d'une version ultérieure, si vous voulez que ces entrées soient dans l'ordre indiqué dans la source, le mieux est d'utiliser un tableau :

var items = [
  {key: "7", val: "AAA"},
  {key: "6", val: "BBB"},
  {key: "2", val: "CCC"},
  {key: "4", val: "DDD"},
  {key: "3", val: "EEE"},
  {key: "1", val: "FFF"},
  {key: "5", val: "GGG"}
];

function ShowList(list, target) {
  $(target).append($.map(list, function (entry) {
    return '<li>' + entry.key + ':' + entry.val + '</li>';
  }).join("\r\n"));
}

ShowList(items, '#list');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list"></ul>

Cependant, le comportement spécifié dans l'ES2015 vous permet d'utiliser un objet si vous utilisez des noms de propriétés qui ne ressemblent pas à des index de tableaux et si l'élément Object.getOwnPropertyNames fonction :

// ONLY RELIABLE ON A COMPLIANT ES2015+ ENGINE.
// Not recommending doing this, just noting it.
var items = {
  "p7": "AAA",
  "p6": "BBB",
  "p2": "CCC",
  "p4": "DDD",
  "p3": "EEE",
  "p1": "FFF",
  "p5": "GGG"
};

function ShowList(list, target) {
  $(target).append(Object.getOwnPropertyNames(list).map(function (key) {
    return '<li>' + key + ':' + list[key] + '</li>';
  }).join("\r\n"));
}

ShowList(items, '#list');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list"></ul>

---

¹ Plus précisément, l'ordre des propriétés est donné ici pour les propriétés "propres", et ici pour toutes les propriétés (y compris les propriétés héritées) :

• Les propriétés qui ressemblent à des indices de tableau sont les premières, dans l'ordre numérique.
• Propriétés propres dont les noms sont des chaînes qui n'étaient pas listées auparavant, dans l'ordre de création des propriétés (les propriétés sont créées dans l'ordre listé dans l'initialisateur d'un objet, ou bien sûr plus tard lorsque vous ajoutez des propriétés à l'objet)
• Propriétés propres dont les noms sont des symboles, dans l'ordre de création

Si l'on itère/liste les propriétés autres que les propriétés "propres", les règles ci-dessus sont suivies en premier, puis répétées pour le prototype (en sautant les propriétés qui ont déjà été visitées), puis répétées pour son prototype, et ainsi de suite. Ainsi, les propriétés d'un objet viennent en premier dans l'ordre ci-dessus, puis toutes celles que son prototype possède et qu'il ne possède pas (dans l'ordre ci-dessus), et ainsi de suite.