合并对象数组

JavaScriptJavaScriptBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个实验中,我们将进行一个 JavaScript 编程练习,目标是根据指定属性合并两个对象数组。这个练习的目的是帮助你练习使用 JavaScript 中的 Array.prototype.reduce() 方法和对象操作,这对于任何使用 JavaScript 的开发者来说都是必不可少的技能。在这个实验结束时,你应该能够根据一个属性无缝合并两个对象数组以创建一个新数组。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`") javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("`Destructuring Assignment`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") subgraph Lab Skills javascript/variables -.-> lab-28201{{"`合并对象数组`"}} javascript/data_types -.-> lab-28201{{"`合并对象数组`"}} javascript/arith_ops -.-> lab-28201{{"`合并对象数组`"}} javascript/comp_ops -.-> lab-28201{{"`合并对象数组`"}} javascript/cond_stmts -.-> lab-28201{{"`合并对象数组`"}} javascript/array_methods -.-> lab-28201{{"`合并对象数组`"}} javascript/higher_funcs -.-> lab-28201{{"`合并对象数组`"}} javascript/destr_assign -.-> lab-28201{{"`合并对象数组`"}} javascript/spread_rest -.-> lab-28201{{"`合并对象数组`"}} end

基于指定键合并对象数组的函数

要基于特定键合并两个对象数组,请按以下步骤操作:

  1. 打开终端/SSH 并输入 node 以开始练习编码。
  2. 使用 Array.prototype.reduce() 和一个对象累加器,根据给定的 prop 合并两个数组中的所有对象。
  3. 使用 Object.values() 将结果对象转换为数组并返回。

以下是你可以使用的函数:

const combine = (a, b, prop) =>
  Object.values(
    [...a, ...b].reduce((acc, v) => {
      if (v[prop])
        acc[v[prop]] = acc[v[prop]] ? { ...acc[v[prop]], ...v } : { ...v };
      return acc;
    }, {})
  );

以下是如何使用此函数的示例:

const x = [
  { id: 1, name: "John" },
  { id: 2, name: "Maria" }
];
const y = [{ id: 1, age: 28 }, { id: 3, age: 26 }, { age: 3 }];
combine(x, y, "id");
// [
//  { id: 1, name: 'John', age: 28 },
//  { id: 2, name: 'Maria' },
//  { id: 3, age: 26 }
// ]

总结

恭喜你!你已经完成了“合并对象数组”实验。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程