将2个数组中具有相同键的对象合并到Javascript/React中的一个数组中

Question

我有两个对象数组，我想将它们合并到一个数组中，然后也合并它们的对象。

两个数组：

const itemsFr = [
    {
      title: "Bonjour"
    },
    {
      title: "Bonne Nuit"
    }
  ];

  const itemsEn = [
    {
      title: "Good Morning"
    },
    {
      title: "Good Night"
    }
  ];

我想要的结果：

items = [
    {
      title: {
        fr: "Bonjour",
        en: "Good Morning"
      }
    },
    {
      title: {
        fr: "Bonne Nuit",
        en: "Good Night"
      }
    }
  ];

这是我尝试过的：

export default function App() {
  const [items, setItems] = useState([]);

  const itemsFr = [
    {
      title: "Bonjour"
    },
    {
      title: "Bonne Nuit"
    }
  ];

  const itemsEn = [
    {
      title: "Good Morning"
    },
    {
      title: "Good Night"
    }
  ];

const fillItemsFrArray = () =>
    itemsFr.map((item) => {
      setItems(...items, {
        title: {
          fr: item.title
        }
      });
    });

  const fillItemsEnArray = () =>
    itemsEn.map((item) => {
      setItems(...items, {
        title: {
          en: item.title
        }
      });
    });

  useEffect(() => {
    fillItemsFrArray();
    fillItemsEnArray();
  }, []);
  return (
    <div className="App">
      <h2>{JSON.stringify(items, null, 4)}</h2>
    </div>
  );
}

这是 CodeSandbox link：https://codesandbox.io/s/restless-night-xq6qg?file=/src/App.js:670-1166

Answer 1

这行得通吗？

const itemsFr = [
    {
      title: "Bonjour"
    },
    {
      title: "Bonne Nuit"
    },
    {
      title: "bla bla"
    }
  ];

  const itemsEn = [
    {
      title: "Good Morning"
    },
    {
      title: "Good Night"
    }
  ];
  
  const items = itemsFr.map((i,c) => ({fr:i.title, en:itemsEn[c]?.title}));
  console.log(items)

Answer 2

您可以采用动态方法，使用带有最终结果所需键的对象。

const
    itemsFr = [{ title: "Bonjour" }, { title: "Bonne Nuit" }],
    itemsEn = [{ title: "Good Morning" }, { title: "Good Night" }],
    result = Object
        .entries({ fr: itemsFr, en: itemsEn })
        .reduce((r, [key, a]) => a.map(({ title }, i) => ({
            title: { ...r[i]?.title, [key]: title }
        })), []);

console.log(result);

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

将2个数组中具有相同键的对象合并到Javascript/React中的一个数组中

Merge objects with the same key in 2 arrays into one array in Javascript/React

javascript

arrays

array-merge

javascript-objects

reactjs