【问题标题】：axios: stop automatic sorting of objects based on keysaxios：停止根据键对对象进行自动排序
【发布时间】：2018-05-23 11:18:11
【问题描述】：

我正在使用 axios 获取 api 响应。

我正在发送按名称 http://localhost:8000/api/ingredients/ordering=name 排序的 api 响应

从我的服务器发送的实际对象如下。

{
    2:{"id":2,"name":"anil"},
    1:{"id":1,"name":"sant"},
    3:{"id":3,"name":"vino"}
}

或将密钥作为字符串而不是整数传递

{
    "2":{"id":2,"name":"anil"},
    "1":{"id":1,"name":"sant"},
    "3":{"id":3,"name":"vino"}
}

或键为字母数字

{
    "a2":{"id":2,"name":"anil"},
    "a1":{"id":1,"name":"sant"},
    "a3":{"id":3,"name":"vino"}
}

axios 正在做的是对对象 w.r.t 键进行排序，并且名称未按排序顺序

{
    1:{"id":1,"name":"sant"},
    2:{"id":2,"name":"anil"},
    3:{"id":3,"name":"vino"}
}

或者如果键是字母数字

{
    a1:{"id":1,"name":"sant"},
    a2:{"id":2,"name":"anil"},
    a3:{"id":3,"name":"vino"}
}

如何阻止

我不想要数组格式的列表，因为我必须稍后根据 id 更新各个对象。这种表示很容易。我正在使用 reactjs 状态。

【问题讨论】：

JavaScript 对象没有排序。如果你想要对象按一定的顺序，使用数组。

标签： javascript ajax reactjs axios

【解决方案1】：

这里有Does JavaScript Guarantee Object Property Order? 的答案，其中包括：

大多数浏览器返回属性的顺序与插入时的顺序相同，但这不是明确保证的行为，因此不应依赖。

ECMAScript specification曾经说过：

枚举属性的机制和顺序......不是指定。

但是在 ES2015 及更高版本中，非整数键将按插入顺序返回。

所以不要依赖对象键的顺序。如果您不担心 ES5，您可以尝试使用非整数键 - 例如字符串，但请注意像 '1' 这样的字符串不适合 http://code.google.com/p/v8/issues/detail?id=164。

您也可以在答案页面上找到：

如果您依赖插入顺序，则您不在 ECMAScript 规范范围内，但在常见浏览器行为的事实标准之内，只要您的键不解析为整数。

更新

简短的回答是 axios 不会对对象的键进行排序

https://jsfiddle.net/zabq841t/

axios.get('/echo/js/?js={a2: 1, a1: 0}')
    .then((res) => {
        //res.data is {a2: 1, a1: 0}
    })

由于旧的浏览器或您的服务器，您可以获得排序版本。看看小提琴，如果它适合你，那么你可能在服务器端有“问题”。您需要提供有关您的服务器应用程序的更多详细信息。

【讨论】：

【解决方案2】：

这是 JavaScript 中对象的预期行为。

如果你想保持订单不变，使用Arrays，所以你的例子会变成这样，

const obj = [{name:"two"},{name:"three"},{name:"one"}];

如果你需要传递密钥，那么用这种方式重新排序，

已编辑

回到你编辑的版本，假设你想根据 ID 更新你的对象，这是你提供的 json，

{
    a1:{"id":1,"name":"sant"},
    a2:{"id":2,"name":"anil"},
    a3:{"id":3,"name":"vino"}
}

没有什么能阻止你这样做，如果你想用id:2更改对象的详细信息，你可以执行以下操作来获取密钥a2，

const key = Object.entries(obj).find(entry => entry[1].key === 2)[0];
const desiredElement = obj(key);

代码分解，

Object.entries(obj) // get entries from object
.find(entry) //where entry[0] is key, entry[1] is value/object
entry[1].id=== 2 // return the element that has id === 2
[0] // since entry[0] is key, then it would hold a2 here

现在我们可以随意使用密钥Obj[key]，并对其进行更新。

【讨论】：