如何在JavaScript中将键值对象转换为目标对象数组？

先确认返回对象的真实结构 #

控制台直接打印res可能因为对象是代理（比如React/Vue的响应式对象）或DOM相关节点，显示的是表面结构，实际内部嵌套了ChildrenNode。先通过序列化拿到真实结构：

const getAgenda = async () => {
  const res = await getEvents();
  // 序列化后打印真实结构，排除代理/包装的干扰
  console.log(JSON.parse(JSON.stringify(res)));
}

根据打印结果，确认目标子对象是直接在res的键值下，还是嵌套在ChildrenNode属性里。

根据真实结构提取目标子对象 #

情况1：子对象嵌套在ChildrenNode中 #

如果res的每个键值对应的对象里，目标子对象存放在ChildrenNode属性中，直接提取：

const getAgenda = async () => {
  const res = await getEvents();
  // 提取每个项的ChildrenNode内容
  const agendaArray = Object.values(res).map(item => item.ChildrenNode);
  // 若ChildrenNode是数组（比如单元素数组），用flatMap扁平化
  // const agendaArray = Object.values(res).flatMap(item => item.ChildrenNode);
  console.log(agendaArray);
}

情况2：返回对象是响应式代理/包装对象 #

如果res是React状态对象、Vue的Proxy或其他包装对象，先转成普通对象再处理：

const getAgenda = async () => {
  const res = await getEvents();
  // 转成普通对象（保留函数/Symbol）
  const plainObject = Object.assign({}, res);
  // 或用序列化反序列化（会丢失函数、Symbol等特殊类型）
  // const plainObject = JSON.parse(JSON.stringify(res));
  const agendaArray = Object.values(plainObject);
  console.log(agendaArray);
}

情况3：目标对象在res的深层属性中 #

如果getEvents()返回的res里，目标对象实际在res.data或其他层级下，先拿到正确层级再取values：

const getAgenda = async () => {
  const res = await getEvents();
  // 假设目标对象在res.data下，根据真实结构调整层级
  const agendaArray = Object.values(res.data);
  console.log(agendaArray);
}

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