Javascript 对象转换答案

【问题标题】：Javascript Object conversionJavascript 对象转换
【发布时间】：2021-07-01 20:21:26
【问题描述】：

数据数组有 3 个对象，每个对象有 3 个键，即 key、city 和 fair。现在我想以这样一种方式进行析构，即城市和公平被隔离在单独的 JS 对象中（如下所示）

如何进行此类转换？

输入

const data = [
  {
    "key": 1,
    "city": "Delhi",
    "fair": 4500
  },
  {
    "key": 2,
    "city": "Ahmedabad",
    "fair": 2500
  },
  {
    "key": 3,
    "city": "Mumbai",
    "fair": 5000
  }
];

预期输出

const city = [
  {
    "key": 1,
    "value": "Delhi"
  },
  {
    "key": 1,
    "value": "Ahmedabad"
  },
  {
    "key": 1,
    "value": "Mumbai"
  }
];

const fair = [
  {
    "key": 1,
    "value": 4500
  },
  {
    "key": 1,
    "value": 2500
  },
  {
    "key": 1,
    "value": 5000
  }
];

【问题讨论】：

标签： javascript arrays json object

【解决方案1】：

您可以使用Array#reduce() 调用将每个属性累积到一个单独的数组中。

如果您事先知道要分组的键，则可以在初始累加器中声明它们并显式调用它们。

const input = [{ "key": 1, "city": "Delhi", "fair": 4500 }, { "key": 2, "city": "Ahmedabad", "fair": 2500 }, { "key": 3, "city": "Mumbai", "fair": 5000 }];

const { city, fair } = input.reduce((acc, { key, city, fair }) => {
  acc.city.push({ key, value: city });
  acc.fair.push({ key, value: fair });

  return acc;
}, { city: [], fair: [] });

console.log(city);
console.log(fair);

.as-console-wrapper { max-height: 100% !important; top: 0; }

但是，如果您有大量属性，您可能需要一个更动态的选项，这里将 key 分离并迭代任何剩余属性的 Object.entries()，并在累加器中按键对它们进行分组。

const input = [{ "key": 1, "city": "Delhi", "fair": 4500 }, { "key": 2, "city": "Ahmedabad", "fair": 2500 }, { "key": 3, "city": "Mumbai", "fair": 5000 }];

const { city, fair } = input.reduce((acc, { key, ...data }) => {
  Object.entries(data).forEach(([prop, value]) => {
    (acc[prop] ??= []).push({ key, value });
  });
  return acc;
}, {});

console.log(city);
console.log(fair);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

当归约到具有已知键的对象时，只需将初始值设置为您期望的值会更容易：{ city: [], fair: []} - 然后您不需要在 reducer 函数中使用任何条件。
我最初的回答是这样，但我决定提供一个更动态的选项。

【解决方案2】：

创建一对简单的数据构造函数并映射到数组：

const data = [ { "key": 1, "city": "Delhi", "fair": 4500 }, { "key": 2, "city": "Ahmedabad", "fair": 2500 }, { "key": 3, "city": "Mumbai", "fair": 5000 } ];

const City = ({key, city: value}) =>
  ({ key, value });
  
const Fair = ({key, fair: value}) =>
  ({ key, value });


const city = data.map(City);
const fair = data.map(Fair);

//more compact display
for (const c of city)
  console.log(JSON.stringify(c));

console.log("-----");

for (const f of fair)
  console.log(JSON.stringify(f));

.as-console-wrapper {
  max-height: 100% !important;
}

或者循环遍历一次源数组并填充两个输出数组：

const data = [ { "key": 1, "city": "Delhi", "fair": 4500 }, { "key": 2, "city": "Ahmedabad", "fair": 2500 }, { "key": 3, "city": "Mumbai", "fair": 5000 } ];

const City = ({key, city: value}) =>
  ({ key, value });
  
const Fair = ({key, fair: value}) =>
  ({ key, value });


const city = [];
const fair = [];

for(const datum of data) {
  city.push(City(datum));
  fair.push(Fair(datum));
}
  

//more compact display
for (const c of city)
  console.log(JSON.stringify(c));

console.log("-----");

for (const f of fair)
  console.log(JSON.stringify(f));

.as-console-wrapper {
  max-height: 100% !important;
}

【讨论】：