ReactJS中如何对带有id键的嵌套对象进行过滤和排序？

问题原因 #

你给出的people初始结构不符合JavaScript语法规范：数组中不能直接使用1:{...}、2:{...}这类键值对写法，你要保留顶层id作为索引键的话，people应该定义为对象类型，而非数组类型，这就是你原有代码不生效的核心原因。

解决方案 #

方案1：修正people为对象类型（保留顶层id键） #

首先把people的外层括号从数组的[]改为对象的{}：

const people = {
  1:{
    id : 1,
    name: 'James',
    age: 31,
    toBeDeleted: false,
    position: 2
  },
  2:{
    id : 2,
    name: 'John',
    age: 45,
    toBeDeleted: true,
    position: 3
  },
  3:{
    id : 3,
    name: 'Paul',
    age: 65,
    toBeDeleted: false,
    position: 1
  }
};

你原有处理逻辑无需修改，直接运行即可得到预期结果：

const sorted = Object.values(people)
  .filter(item => item.toBeDeleted !== true)
  .sort((a, b) => a.position - b.position);

输出的sorted就是你需要的目标数组：

[
  {
    id: 3,
    name: 'Paul',
    age: 65,
    toBeDeleted: false,
    position: 1
  },
  {
    id: 1,
    name: 'James',
    age: 31,
    toBeDeleted: false,
    position: 2
  }
]

后续你需要通过id选中记录时，直接用people[id]即可调用对应记录。

方案2：保留people为数组类型，单独维护id映射表 #

如果你有其他逻辑需要people保持数组结构，可以单独生成id与记录的映射表，满足快速选中记录的需求：

// 数组格式的people
const people = [
  {
    id : 1,
    name: 'James',
    age: 31,
    toBeDeleted: false,
    position: 2
  },
  {
    id : 2,
    name: 'John',
    age: 45,
    toBeDeleted: true,
    position: 3
  },
  {
    id : 3,
    name: 'Paul',
    age: 65,
    toBeDeleted: false,
    position: 1
  }
];

// 生成id映射表，支持通过id快速查找记录
const peopleIdMap = new Map(people.map(item => [item.id, item]));
// 调用示例：获取id为1的记录：peopleIdMap.get(1)

之后用你原有逻辑直接处理数组即可正常运行。

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