如何按指定数组索引排序JavaScript对象的属性？

在ES6及以上版本中，JavaScript对象的属性具备固定顺序（纯数字类型键除外），我们可以通过构建新对象的方式，按指定数组的索引顺序排列原有对象的属性。

方法一：固定保留"all"属性在前 #

如果"all"需要固定排在第一位，直接手动保留该属性，再按users数组顺序依次添加其他属性：

const data = {
    "all": 2,
    "test1": 0,
    "test": 2,
    "test2": 0,
    "test3": 0,
    "test4": 0,
    "test5": 0
};
const users = ["test","test1","test2","test3","test4","test5"];

const sortedData = {
    // 先放置固定的all属性
    all: data.all,
    // 按users数组顺序添加对应属性
    ...users.reduce((acc, key) => {
        acc[key] = data[key];
        return acc;
    }, {})
};

console.log(sortedData);

运行后得到的结构完全符合预期：

{
    "all": 2,
    "test": 2,
    "test1": 0,
    "test2": 0,
    "test3": 0,
    "test4": 0,
    "test5": 0
}

方法二：通用排序方案 #

如果存在多个不在users数组中的属性，且需要保留它们原有的顺序，可以先提取这些属性，再按users顺序拼接：

const data = {
    "all": 2,
    "test1": 0,
    "test": 2,
    "test2": 0,
    "test3": 0,
    "test4": 0,
    "test5": 0
};
const users = ["test","test1","test2","test3","test4","test5"];

// 筛选出不在users数组中的属性
const nonTargetKeys = Object.keys(data).filter(key => !users.includes(key));

const sortedData = {
    // 先添加非目标属性，保留原顺序
    ...nonTargetKeys.reduce((acc, key) => {
        acc[key] = data[key];
        return acc;
    }, {}),
    // 再按users顺序添加目标属性
    ...users.reduce((acc, key) => {
        acc[key] = data[key];
        return acc;
    }, {})
};

注意事项 #

• 该方案依赖ES6+的对象属性顺序特性，不适用于ES5及以下环境；
• 如果属性键是纯数字（比如"1"、"2"），JavaScript会优先按数字大小排序，这类场景需要额外处理。

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