时间戳

首页 > 解决方案 > 通过属性比较对象数组，然后将新对象附加到数组中：Javascript

javascript - 通过属性比较对象数组，然后将新对象附加到数组中：Javascript

问题描述

我有两个对象数组，其中name需要比较这些对象并获取值并将其附加到数组之一。我能够在第一级做到这一点，我怎样才能递归地实现相同的目标并更新对象。

const arr1 = [
  {
    name: "internalcorp.com",
    children: [
      {
        name: "internalcorp.com.child1",
        children: [
          {
            name: "internalcorp.com.grandchild1",
            children: []
          },
          {
            name: "internalcorp.com.grandchild2",
            children: []
          }
        ]
      },
      {
        name: "internalcorp.com.child2",
        children: []
      }
    ]
  },
  {
    name: "internalcorpwebsite.com",
    children: [
      {
        name: "internalcorpwebsite.com.child1",
        children: []
      }
    ]
  }
];

const arr2 = [
  {
    name: "internalcorp.com",
    val1: false,
    val2: false
  },
  {
    name: "internalcorp.com.child1",
    val1: true,
    val2: true
  },
  {
    name: "internalcorp.com.grandchild1",
    val1: true,
    val2: true
  },
  {
    name: "internalcorp.com.grandchild2",
    val1: false,
    val2: true
  },
  {
    name: "internalcorp.com.child2",
    val1: true,
    val2: false
  },
  {
    name: "internalcorpwebsite.com",
    val1: false,
    val2: false
  },
  {
    name: "internalcorpwebsite.com.child1",
    val1: false,
    val2: false
  }
];

输出应该看起来像

const res = [
  {
    name: "internalcorp.com",
    config: {
      val1: false,
      val2: false
    },
    children: [
      {
        name: "internalcorp.com.child1",
        config: {
          val1: true,
          val2: true
        },
        children: [
          {
            name: "internalcorp.com.grandchild1",
            config: {
              val1: true,
              val2: true
            },
            children: []
          },
          {
            name: "internalcorp.com.grandchild2",
            config: {
              val1: false,
              val2: true
            },
            children: []
          }
        ]
      },
      {
        name: "internalcorp.com.child2",
        config: {
          val1: true,
          val2: false
        },
        children: []
      }
    ]
  },
  {
    name: "internalcorpwebsite.com",
    children: [
      {
        name: "internalcorpwebsite.com.child1",
        className: "level-1 leaf",
        children: [],
        val1: false,
        val2: false
      }
    ],
    config: {
      val1: false,
      val2: false
    }
  }
];

我试过的代码

  const result = arr1.map((item) => {
    let config = arr2.find((p) => p.name === item.name);
    return {
      ...item,
      config: {
        val1: config.val1,
        val2: config.val2
      }
    };
  });

标签： javascriptarrays

解决方案

你很接近了怎么办：

  1. 将您包装.map()在一个命名函数中，以便可以递归调用它（我去了addConfig）
  2. 在 的返回对象中.map()，添加键/值对children: addConfig(item.children)

这样就行了。

const arr1 = [
      {
        name: "internalcorp.com",
        children: [
          {
            name: "internalcorp.com.child1",
            children: [
              {
                name: "internalcorp.com.grandchild1",
                children: []
              },
              {
                name: "internalcorp.com.grandchild2",
                children: []
              }
            ]
          },
          {
            name: "internalcorp.com.child2",
            children: []
          }
        ]
      },
      {
        name: "internalcorpwebsite.com",
        children: [
          {
            name: "internalcorpwebsite.com.child1",
            children: []
          }
        ]
      }
    ];

    const arr2 = [
      {
        name: "internalcorp.com",
        val1: false,
        val2: false
      },
      {
        name: "internalcorp.com.child1",
        val1: true,
        val2: true
      },
      {
        name: "internalcorp.com.grandchild1",
        val1: true,
        val2: true
      },
      {
        name: "internalcorp.com.grandchild2",
        val1: false,
        val2: true
      },
      {
        name: "internalcorp.com.child2",
        val1: true,
        val2: false
      },
      {
        name: "internalcorpwebsite.com",
        val1: false,
        val2: false
      },
      {
        name: "internalcorpwebsite.com.child1",
        val1: false,
        val2: false
      }
    ];

const addConfig = (items) =>
  items.map(item => {
    const { val1, val2 } = arr2.find(p => p.name === item.name);
    return {
      ...item,
      config: {
        val1,
        val2    
      },
      children: addConfig(item.children)
    };
  });

const result = addConfig(arr1);

console.log(result);

推荐阅读