如何將物件陣列簡化為由鍵組織的物件

我有一個陣列

const countries = [{
  name: "Angola",
  region: "Africa"
}, {
  name: "Spain",
  region: "Europe"
}, {
  name: "Italy",
  region: "Europe"
}]

我需要的結果是：

const result = {
  Europe: [{
    name: "Spain"
  }, {
    name: "italy"
  }],
  Africa: [{
    name: "Angola"
  }]
}

我嘗試了兩種方法：

• 方法一：

const result = countries.reduce((acc, {
  name,
  region
}) => {

  acc[region] = [...acc[region], {
    name
  }]

  return acc
}, {})

• 方法二：

const result = countries.reduce((acc, {
  name,
  region
}) => {
  return {
    ...acc,
    [region]: [...acc[region], {
      name
    }]
  }
}, {})

它們都不起作用，因為我找不到在陣列中傳播現有專案的方法，這在第一次迭代時顯然是空的。

謝謝

uj5u.com熱心網友回復：

我根本不會用reduce這個。如果你不使用預定義的、可重用的 reducer 函式進行函式式編程reduce，那只是一個過于復雜的回圈——難以閱讀，容易出錯。

相反，我只使用一個回圈：

const result = {};
for (const { name, region } of countries) {
    let entry = result[region];
    if (!entry) {
        entry = result[region] = [];
    }
    entry.push({ name });
}

顯示代碼片段

const countries = [
    {
        name: "Angola",
        region: "Africa",
    },
    {
        name: "Spain",
        region: "Europe",
    },
    {
        name: "Italy",
        region: "Europe",
    },
];

const result = {};
for (const { name, region } of countries) {
    let entry = result[region];
    if (!entry) {
        entry = result[region] = [];
    }
    entry.push({ name });
}
console.log(result);

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

但是由于您確實特別要求reduce，您可以這樣做（任何陣列操作都可以硬塞進 a reduce）：

const result = countries.reduce((result, { name, region }) => {
    let entry = result[region];
    if (!entry) {
        entry = result[region] = [];
    }
    entry.push({ name });
    return result;
}, {});

顯示代碼片段

const countries = [
    {
        name: "Angola",
        region: "Africa",
    },
    {
        name: "Spain",
        region: "Europe",
    },
    {
        name: "Italy",
        region: "Europe",
    },
];

const result = countries.reduce((result, { name, region }) => {
    let entry = result[region];
    if (!entry) {
        entry = result[region] = [];
    }
    entry.push({ name });
    return result;
}, {});
console.log(result);

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

或者通過在每個回圈上創建新物件和陣列來獲得更多 FP 風格（但在這種情況下沒有意義）：

const result = countries.reduce((result, { name, region }) => {
    const entry = result[region] ?? [];
    return {
        ...result,
        [region]: [...entry, { name }],
    };
}, {});

顯示代碼片段

const countries = [
    {
        name: "Angola",
        region: "Africa",
    },
    {
        name: "Spain",
        region: "Europe",
    },
    {
        name: "Italy",
        region: "Europe",
    },
];

const result = countries.reduce((result, { name, region }) => {
    const entry = result[region] ?? [];
    return {
        ...result,
        [region]: [...entry, { name }],
    };
}, {});
console.log(result);

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

uj5u.com熱心網友回復：

突然我找到了解決問題的方法

const result = countries.reduce((acc, {
  name,
  region
}) => {
  return {
    ...(acc || {}),
    [region]: [...(acc[region] || []), {
      name
    }]
  }
}, {})

uj5u.com熱心網友回復：

您可以通過定義來解決問題 acc[region]

const result = countries.reduce((acc, {
  name,
  region
}) => {
  if (!acc[region]) acc[region] = [];

  acc[region] = [...acc[region], {
    name
  }]

  return acc
}, {})

標籤：javascript 数组 目的

上一篇：將帶有多邊形坐標的字串轉換為lat/lng格式

下一篇：如何在Excel中的同一列中復制行N次？