如何让浏览器控制台展开JS对象时保持属性定义顺序？

给定以下JavaScript代码：

const resultMain = {
    mad: [1, 2, 3],
    led: [62, 73, 85, 96, 10],
};

const customConsoleOutput = {
    top: resultMain.mad,
    rest: resultMain.led,
};

console.log(customConsoleOutput);

执行后，控制台折叠状态下显示{top: Array(3), rest: Array(5)}，但展开后属性会按字母顺序排列（rest在前、top在后）。需要保持展开后的属性顺序与定义顺序一致（top在前、rest在后），且必须保留数组的展开功能，因此字符串输出和console.table不适用。

解决方案 #

方法1：调整浏览器控制台设置（最简单） #

大部分现代浏览器（如Chrome、Edge）的控制台默认会对对象属性按字母排序显示，关闭该设置即可解决：

• 打开控制台（F12），点击右上角的设置图标（⚙️）
• 在设置面板中找到**"按属性名称排序"**（Sort properties by name）选项，取消勾选
• 刷新页面重新执行代码，展开对象后即可按属性定义顺序显示

方法2：用Map替代普通对象（兼容所有环境） #

Map会严格按照键的插入顺序存储和展示，且数组依然保留可展开功能：

const resultMain = {
    mad: [1, 2, 3],
    led: [62, 73, 85, 96, 10],
};

const customConsoleOutput = new Map([
    ['top', resultMain.mad],
    ['rest', resultMain.led],
]);

console.log(customConsoleOutput);

方法3：手动定义属性枚举顺序（保留普通对象结构） #

如果必须使用普通对象，可通过Object.defineProperty逐个添加属性，确保枚举顺序与定义顺序一致（兼容旧版环境）：

const resultMain = {
    mad: [1, 2, 3],
    led: [62, 73, 85, 96, 10],
};

const customConsoleOutput = {};
Object.defineProperty(customConsoleOutput, 'top', {
    value: resultMain.mad,
    enumerable: true,
    writable: true,
    configurable: true
});
Object.defineProperty(customConsoleOutput, 'rest', {
    value: resultMain.led,
    enumerable: true,
    writable: true,
    configurable: true
});

console.log(customConsoleOutput);

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