循环遍历对象，出现顺序错乱问题

原创于 2025-06-09 16:52:44 发布 · 257 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

const mySymbol = Symbol("myKey");
const obj = {
    '1': 1,
    '2': 2,
    'a': 3,
    '4': 4,
    mySymbol: 5
};

console.log(Object.keys(obj)); 
// 输出: ['1', '2', '4', 'a', 'mySymbol']

问题原因分析
根据 ECMAScript 规范，对象属性遍历顺序遵循以下规则：

数字键属性（如 “1”, “2”）会被解释为整数索引，按数值升序排列

字符串键属性（如 ‘a’）按照属性定义时的顺序排列

Symbol 类型属性总是被放在最后

详细原因可参考

前端几种解决方案

1.sort方法

const dateObj = {
    "2025": {
        2: { a: 1, b: 2 },
        1: { a: 1, b: 2 }
    },
    "2024": {
        2: { a: 1, b: 2 },
        1: { a: 1, b: 2 }
    }
};

// 普通遍历（可能不按预期顺序）
Object.keys(dateObj).forEach(key => {
    console.log('默认顺序:', key); // 输出: 2024, 2025
});

// 年份降序排序
const sortedYears = Object.keys(dateObj).sort((a, b) => b - a);
console.log('年份排序:', sortedYears); // 输出: 2025, 2024

// 多层嵌套结构排序
sortedYears.forEach(year => {
    const sortedMonths = Object.keys(dateObj[year]).sort((a, b) => b - a);
    sortedMonths.forEach(month => {
        console.log(`年份 ${year} 月份 ${month}`);
    });
});

2.map方法

   const dateMap = new Map();
dateMap.set('2025', 2025);
dateMap.set('2024', 2024);

// Map 会严格保持插入顺序
for (const [key, value] of dateMap) {
    console.log(key, value); // 保证输出: 2025 2025, 2024 2024
}