Safari 在每次渲染时以不同的顺序渲染数组元素

Question

我有以下代码：

Object.values(data).map((user) => {
  <div>
    <User key={user.id} user={user} />
  <div>
})

并且用户可以通过 UI 添加新用户，这些新用户会添加到 data 对象并因此触发渲染。

它在除 Safari 之外的所有浏览器（Chrome、Edge、IE）上都运行良好。 （版本 13.1.2） 在 Safari 上，几乎每次重新呈现该用户列表都会更改这些用户在 UI 中的显示顺序。

为什么会这样？

Answer 1

没有 JavaScript 标准规定从对象获取键或值应按特定顺序进行：

根据mdnObject.values

Object.values() 方法返回给定对象自己的可枚举属性值的数组，其顺序与 for...in 循环提供的顺序相同

在for...in link 后面写着：

for...in 循环以任意顺序迭代对象的属性（请参阅 delete 运算符以了解更多关于为什么不能依赖迭代的看似有序性，至少在跨浏览器设置中）。

之所以不能保证按特定顺序是因为 IE，但由于 Safari 是新的 IE，它已经接管了不可预测的火炬。

如果项目顺序很重要，您应该将它们存储在数组、Set 或 Map 中。