遍历对象属性_js 中的对象属性有顺序么？

最近在修一个 bug 的时候发现，一个 js 对象数组经过Lodash的 groupBy 方法后，输出的对象属性顺序发生了变化。

虽然Lodash的官方文档是这么写的：

The order of grouped values is determined by the order they occur in collection

但实际情况是：

const rawData = [
  {
    value: 1,
    group: "分组一",
  },
  {
    value: 2,
    group: "0",
  },
  {
    value: 3,
    group: "分组二",
  },
];
const groupedData = _.groupBy(rawData, "group");

我期望按照顺序输出，是这样的：

const groupedData = {
  分组一: {
    value: 1,
    group: "分组一",
  },
  0: {
    value: 2,
    group: "0",
  },
  分组二: {
    value: 3,
    group: "分组二",
  },
};

但实际的输出结果是：

const groupedData = {
  0: {
    value: 2,
    group: "0",
  },
  分组一: {
    value: 1,
    group: "分组一",
  },
  分组二: {
    value: 3,
    group: "分组二",
  },
};

groupBy 之后的对象属性排序了。但实际情况是就算不用 lodash 的 groupBy 方法，js 的对象属性也会出现这样的情况。

那 js 的对象属性可能是按照某种顺序排序的？

我们可以在控制台里试一下：

let a = { b: "1", 1: "nn", 测试: "test" };
// 输出 {1: "nn", b: "1", 测试: "test"}

let b = { 测试: "test", 1: "nn", b: "1" };
// 输出 {1: "nn", 测试: "test", b: "1"}

果然看起来是有顺序的。那这样的话，是按照什么顺序排的呢？

按照例子中的结果，对象属性先按数字型的排序，再是非数字型的属性。

如果属性中既存在数字型的属性，又存在对应字符型的属性，那么后出现的会覆盖之前出现的。

let a = { b: "1", 1: "nn", 测试: "test", 1: "mm" };
// 输出 {1: "mm", b: "1", 测试: "test"}

结合网上网友得出以下结论：

Chrome 等新版浏览器 JS 引擎遵循新版 ECMA-262 5th,使用 for-in 语句遍历对象属性时遍历书序并非属性构建顺序。而 IE6、7、8 等旧版本浏览器的 JS 解析引擎遵循的是较老的 ECMA-262 3rd，属性遍历顺序由属性构建的顺序决定。Chrome 的 JS 引擎遍历对象属性时会遵循一个规律： 它们会先提取所有 key 的 parseFloat 值为非负整数的属性，然后根据数字顺序对属性排序首先遍历出来，然后按照对象定义的顺序遍历余下的所有属性。