根据数组对象数据创建一个新数组

Question

我在数组中有一个嵌套对象。

{
  "page": [
    {
      "num": "1",
      "comp": [
        {
        "foo": "bar",
        "bar": "foo",
        "name": "comp1",
          "items": [
            {
              "fooBar":"barFoo",
              "itemData": 
                {
                  "foo": "bar",
                  "bar": "foo",
                  "fooBar": "barFor"
                }
              
            }
          ]
        }
      ]
    },
    {
      "num": "2",
      "comp": [
        {
        "foo": "bar",
        "bar": "foo",
        "name": "comp2",
          "items": [
            {
              "fooBar":"barFoo",
              "itemData": 
                {
                  "foo": "bar",
                  "bar": "foo",
                  "fooBar": "barFor"
                }
              
            }
          ]
        },
        {
          "items": [
            {
              "fooBar":"barFoo2",
              "itemData": 
                {
                  "foo": "bar",
                  "bar": "foo",
                  "fooBar": "barFor"
                }
              
            },
            {
              "itemData": 
                {
                  "foo": "bar",
                  "bar": "foo",
                  "fooBar": "barFor"
                }
              
            }
          ]
        }
      ]
    },
    {
      "num": "3"
    }
  ]
}

所以我要做的是用itemData 创建一个新数组，但保持对象的一般结构不变。

我不能只删除每个不需要的键/值，因为键可以更改或可以添加新键，并且很难维护。所以我在想一些嵌套的 for 循环来到达 itemData 对象：

for (const [i, page] of this.testingAnimation.pages.entries()){
                for (const [j, comp] of page.comp.entries()){
                    for (const [k, item] of comp.items.entries()){
                        if (item.itemData !== undefined) {
                            
                        } else {

                        }
                    }
                }
            }

但现在我有了itemData，我如何将它放入数组中，同时保留原始对象的一般嵌套结构，而无需额外的键/值

预期输出：

{
  "page": [
    {
      "comp": [
        {
          "items": [
            {
              "itemData": 
                {
                  "foo": "bar",
                  "bar": "foo",
                  "fooBar": "barFor"
                }
            }
          ]
        }
      ]
    },
    {
      "comp": [
        {
          "items": [
            {
              "itemData": 
                {
                  "foo": "bar",
                  "bar": "foo",
                  "fooBar": "barFor"
                }
              
            }
          ]
        },
        {
          "items": [
            {
              "itemData": 
                {
                  "foo": "bar",
                  "bar": "foo",
                  "fooBar": "barFor"
                }
              
            },
            {
              "itemData": 
                {
                  "foo": "bar",
                  "bar": "foo",
                  "fooBar": "barFor"
                }
              
            }
          ]
        }
      ]
    },
    {
      "num": "3"
    }
  ]
}

Answer 1

用这个替换你的内部循环（for (const [k, item] of comp.items.entries()) {...} 部分）怎么样：

comp.items = comp.items.map(item => ({ itemData: item.itemDate }));

这只会将每个 comp.items 数组替换为一个新数组，其中每个对象只有一个您要保留的键。

如果您实际上并不想就地修改数据（即，创建具有所需结构的新数据结构，而保留原始数据结构），您可以使用类似以下内容：

const filtered = {
  ...this.testingAnimation,
  page: this.testingAnimation.page.map(page =>
    'comp' in page
      ? {
        ...page,
        comp: page.comp.map(comp =>
          'items' in comp
            ? {
              ...comp,
              items: comp.items.map(item => ({ itemData: item.itemData }))
            }
            : comp
          )
      }
      : page
  )
}

注意：这个解决方案没有使用Object.entries()，但是如果你想使用它，你应该使用符合标准的Object.entries(someObject)，因为一般来说，someObject.entries() 是没有定义的。此外，对于数组，可以使用此函数，但通常使用someArray.forEach(...) 或newArray = someArray.map(item => ...) 更有意义。 MDN 是获得更多帮助的绝佳资源。