javascript - 通过动态属性从对象数组创建对象

Question

我有一个对象数组

  "options": [
    {
      "width": 10,
      "height": 20
    },
    {
      "width": 20,
      "height": 40
    },
    {
      "width": 30,
      "height": 60
    }
  ]

我想转换成下面的

{ width: [10, 20, 30], height: [20, 40, 60] }

请记住，键是动态的。在本例中，它是 width 和 height。

我确实有解决方案。

const pluck = (arr: Record<string, any> | undefined, property: string) => {
  return arr?.map((obj: any) => {
    return obj[property];
  });
};
const unique = (arr: any[] | undefined) =>
  arr ? Object.keys(Object.assign({}, ...arr)) : null;

const keys = unique(myArray);
const options = keys
  ? Object.fromEntries(keys.map((key) => [key, pluck(myArray, key)]))
  : null;

但是我可以缩短它吗？

Answer 1

最简单的方法就是编写一个循环。让我们从 JavaScript 开始，然后再回到类型:

const result = {};
for (const entry of myArray) {
    for (const key in entry) { // or: of Object.keys(entry)
        const values = result[key] = result[key] ?? [];
        values.push(entry[key]);
    }
}

实例:

const myArray = [
    {
        "width": 10,
        "height": 20
    },
    {
        "width": 20,
        "height": 40
    },
    {
        "width": 30,
        "height": 60
    }
];

const result = {};
for (const entry of myArray) {
    for (const key in entry) { // or: of Object.keys(entry)
        const values = result[key] = result[key] ?? [];
        values.push(entry[key]);
    }
}
console.log(result);

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

关于 for (const key in entry) 与 for (const key of Object.keys(entry)，前者也访问继承的属性。你的例子没有没有任何继承的属性，但如果你有它们，你可以添加一个 hasOwnProperty 检查，或者如果你不介意临时数组，使用 of Object.keys(entry).

好的，所以:类型。我原以为这会很困难，但事实并非如此，这让我怀疑我错过了什么。 :-) 我们会为它使用一个函数，这样我们就可以使用类型参数:

function condense<ObjType extends object>(array: ObjType[]) {
    const result: Record<string, any> = {};
    for (const entry of array) {
        for (const key in entry) { // or: of Object.keys(entry)
            const values = result[key] = result[key] ?? [];
            values.push(entry[key]);
        }
    }
    return result as {[key in keyof ObjType]: ObjType[key][]};
}
const result = condense(myArray);
console.log(result);

Playground link

由于结果是随着时间的推移而建立的，我在 condense 函数中使用了相当松散的类型，但输入和输出的类型是正确的。例如，上面的result的结果是{ width: number[];高度:数字[]； }，这就是我们想要的。如果我们输入不同类型(比如 string)的第三个属性(比如 description)，它甚至可以工作，给我们 { width: number[] ;高度:数字[]；描述:字符串[]； }:Playground link

---

目前的时尚是使用reduce，但没有理由在这里使用它，它只会增加复杂性。