通过属性比较对象数组，然后 append 数组中的新 object：Javascript

Question

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

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
  }
];

Output 应该是这样的

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
      }
    };
  });

Answer 1

你非常接近怎么办：

1. 将您的.map()包装在命名为 function 中，以便可以递归调用它（我使用addConfig ）
2. 在.map()的返回 object 中，添加键/值对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);