我需要将数组元素中的所有对象组合成一个新的对象数组

Question

我有一个嵌套数组，其中包含名为“选项”的属性。 options 属性是一个对象数组，现在每个对象都有自己的属性字段，也是一个对象数组。

因此，我需要从选项数组中的每个选项中获取选项字段，并将它们全部放入一个新数组中。

我将发布我的数组的外观图像，因为它可能更容易理解它的外观。 Here is the array image.

现在我已经尝试通过它们进行映射，然后获取字段，但以我的方式它返回数组但每个字段对象，但我希望它返回，因为字段中的每个字段都应该是一个新的数组属性。

const obj = {
  key: 'clothes',
  label: 'Clothes',
  options: [
    {
      key: 'base-layers',
      label: 'base-layers',
      fields: [{ key: 'brand', label: 'brand' }, { key: 'size', label: 'Size' }],
    },
    {
      key: 'front-layers',
      label: 'front-layers',
      fields: [{ key: 'gender', label: 'Gender' }, { key: 'condition', label: 'Condition' }],
    },
  ],
};

const getFields = obj.options.map(a => a.map(f => f.fields));

const final = getFields.reduce((r, c) => Object.assign(r, c), {}));

因此，fields 对象中的每个字段都应该是新对象数组中的自己的属性。

我真的很感谢您的帮助！

Answer 1

您可以使用单个 reduce 函数来迭代每个选项并组合字段集合。

const obj = {
  key: 'clothes',
  label: 'Clothes',
  options: [
    {
      key: 'base-layers',
      label: 'base-layers',
      fields: [{ key: 'brand', label: 'brand' }, { key: 'size', label: 'Size' }, { key: 'condition', label: 'Condition' }],
    },
    {
      key: 'front-layers',
      label: 'front-layers',
      fields: [{ key: 'gender', label: 'Gender' }, { key: 'condition', label: 'Condition' }],
    },
  ],
};

const allFields = obj.options.reduce((fields, option) => [...fields, ...option.fields], []);

console.log(allFields);


// Combine all fields without duplications (not optimized)

const allFieldsUnique = obj.options.reduce((fields, option) => {
  return [...fields, ...option.fields.filter(a => !fields.some(b => b.key === a.key))];
}, []);

console.log(allFieldsUnique);

Answer 2

使用Array.flatMap() 通过从每个选项中提取字段来获取一个数组。

如果您想要一个对象，请将字段映射到 [key, value] 对的数组，然后转换为带有 Object.fromEntries() 的对象：

const obj = {"key":"clothes","label":"Clothes","options":[{"key":"base-layers","label":"base-layers","fields":[{"key":"brand","label":"Brand"},{"key":"size","label":"Size"}]},{"key":"front-layers","label":"front-layers","fields":[{"key":"gender","label":"Gender"},{"key":"condition","label":"Condition"}]}]};

const arr = obj.options.flatMap(option => option.fields)

console.log(arr);

const object = Object.fromEntries(obj.options.flatMap(option =>
  option.fields.map(({ key, label }) => [key, label])
));

console.log(object);