JavaScript对象使用扩展运算符时，属性顺序的判定规则是什么？

在使用JavaScript扩展运算符时，以下代码的结果对象属性顺序符合预期：

const morning = {
    breakfast: "oatmeal",
    lunch: "Peanut butter and jelly"
}

const dinner = "mac and cheese";

const backPackingMeals = {
    ...morning, 
    dinner
};

console.log(backPackingMeals);

// 输出：
/*{
    breakfast: 'oatmeal',
    lunch: 'Peanut butter and jelly',
    dinner: 'mac and cheese'
  }*/

属性按添加顺序输出。但以下代码的输出顺序不符合预期：

const backPackingMeals = {
    ...morning, 
    ...dinner
};

// 结果：
/*{
  '0': 'm',
  '1': 'a',
  '2': 'c',
  '3': ' ',
  '4': 'a',
  '5': 'n',
  '6': 'd',
  '7': ' ',
  '8': 'c',
  '9': 'h',
  '10': 'e',
  '11': 'e',
  '12': 's',
  '13': 'e',
  breakfast: 'oatmeal',
  lunch: 'Peanut butter and jelly'
}*/

我并非询问为何dinner被拆分为单个字符的属性，而是想知道为何这些数字键属性会排在breakfast和lunch属性之前。

这是因为ECMAScript规范对对象属性的遍历/展示顺序有明确规则：

• 首先处理整数索引类型的键（即能被解析为正整数的字符串键，比如'0'、'1'、'10'这类），这些键会按数值从小到大排序，放在属性列表最前面；
• 接着处理非整数索引的字符串键，按照它们被添加到对象中的先后顺序排列；
• 最后处理Symbol类型的键，同样按插入顺序排列。

在第二个示例里，扩展字符串dinner时，会生成一系列以数字为键的属性（'0'对应'm'，'1'对应'a'，以此类推），这些都属于整数索引键，所以会被优先排到前面；而morning中的breakfast、lunch属于非数字的字符串键，只能按插入顺序排在整数索引键之后。

内容的提问来源于stack exchange，提问作者Columbus