如何在JavaScript中结合react_query动态提取JSON指定字段？

我用React Query获取数据，通过以下代码返回JSON格式数据：

return fetch(getRequest).then((response) => response.json())

随后我把数据转为数组：

Query.data.map(({field1,field2,field3,}) => [field1, field2,field3])

我不确定这是不是最优方案，因为返回的是[Array(3), Array(3), Array(3) ...]形式的嵌套数组，而非field1:[...], field2:[...], field3:[...]的字典结构。

无论用哪种数据格式，我需要根据字符串形式的字段名动态提取指定字段。但没法直接用如下代码：

let field_to_call = "example"
Query.data.map(({field_to_call}) => [field_to_call]) 

原因是解构语法需要变量本身而非字符串引用，请问该问题的最优解决方案是什么？

动态提取单个字段 #

如果只是要根据字符串形式的字段名，提取对应字段的所有值组成数组，直接用对象的方括号访问语法就行，不用解构：

const field_to_call = "example";
const extractedValues = Query.data.map(item => item[field_to_call]);

执行后extractedValues就是该字段所有值的数组，比如[val1, val2, val3...]。

转换为按字段分组的字典结构 #

如果需要把数据转换成{ field1: [...], field2: [...], field3: [...] }这种格式，用Array.reduce遍历构建最直接：

const groupedByField = Query.data.reduce((result, currentItem) => {
  // 可以指定需要分组的字段，或者用Object.keys(currentItem)遍历所有字段
  ['field1', 'field2', 'field3'].forEach(key => {
    if (!result[key]) result[key] = [];
    result[key].push(currentItem[key]);
  });
  return result;
}, {});

之后要动态取字段时，直接用groupedByField[field_to_call]就能拿到对应数组，这种格式适合需要多次访问不同字段的场景。

动态解构写法（按需使用） #

如果偏好解构语法，也可以用计算属性名实现动态解构：

const field_to_call = "example";
const extractedValues = Query.data.map(item => {
  const { [field_to_call]: targetValue } = item;
  return targetValue;
});

这种写法和第一种效果相同，适合需要同时解构多个动态字段的场景。

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