如何动态添加JavaScript对象属性并保持属性添加顺序？

我需要创建一个可动态添加属性的对象，且严格保留属性的添加顺序。期望得到的对象示例如下：

var obj = {
   "0%": 1,
   "5%": 1,
   "05%": 1,
   "6%": 1,
}

属性值可以不同，但顺序必须与添加顺序一致。比如我有这样一个数组：

var arr =[
   {
    "0%": 1,
   },
    {
    "5%": 1,
   },
    {
    "05%": 1,
   },
    {
    "6%": 1,
   }
]

请问怎么把这个数组转换成符合要求的对象？

我试过这段代码：

var obj: { [k: string]: any } = {};
obj["0%"] = 1
obj["5%"] = 1
obj["05%"] = 1
obj["6%"] = 1

但得到的结果属性顺序不符合预期：

var obj = {
   "0%": 1,
   "05%": 1,
   "5%": 1,
   "6%": 1,
}

原因分析 #

普通JavaScript对象（{}）会自动对类数字的字符串键进行排序，像"5%"和"05%"这类键会被识别为类数字字符串，导致插入顺序被打乱。

解决方法 #

方法1：使用Map（推荐）

Map会严格保留键的插入顺序，完全适配你的需求：

const map = new Map();
// 按顺序添加属性
map.set("0%", 1);
map.set("5%", 1);
map.set("05%", 1);
map.set("6%", 1);

// 如需转换为普通对象格式（ES6+环境下遍历会保留顺序）
const obj = Object.fromEntries(map);
console.log(obj);

方法2：遍历数组构建Map再转对象

针对你提供的数组，可以批量处理：

const arr = [
  { "0%": 1 },
  { "5%": 1 },
  { "05%": 1 },
  { "6%": 1 }
];

const map = new Map();
arr.forEach(item => {
  const [key, value] = Object.entries(item)[0];
  map.set(key, value);
});

const obj = Object.fromEntries(map);
console.log(obj);

方法3：使用Object.defineProperty

通过Object.defineProperty添加属性时，不会触发自动排序，会严格遵循调用顺序：

const obj = {};

// 按顺序定义属性
Object.defineProperty(obj, "0%", {
  value: 1,
  writable: true,
  enumerable: true,
  configurable: true
});
Object.defineProperty(obj, "5%", {
  value: 1,
  writable: true,
  enumerable: true,
  configurable: true
});
Object.defineProperty(obj, "05%", {
  value: 1,
  writable: true,
  enumerable: true,
  configurable: true
});
Object.defineProperty(obj, "6%", {
  value: 1,
  writable: true,
  enumerable: true,
  configurable: true
});

console.log(obj);

注意事项 #

• ES6+规范中，普通对象的自有属性通常保留插入顺序，但类数字字符串键是例外，会被优先排序，因此普通对象无法满足你的需求。
• Map在遍历（如for...of）时会严格按插入顺序返回键值对，是最可靠的方案；转换后的普通对象在ES6+环境中遍历也会保留顺序，但类数字键的场景仍存在排序风险。

内容的提问来源于stack exchange，提问作者Анатолий Сапунов