如何正确映射数组以访问其嵌套数组中的属性？

Question

说我有一个对象数组：

const array = [ 
   { 
      "fieldA":"abc",
      "fieldB":[ 
         { 
            "fieldC":{ 
               "fieldD":"I am here!"
            }
         },
         { 
            "fieldC":{ 
               "fieldD":"And I am here!",
            },
         }
      ]
   }
]

如何访问数组中每个对象的fieldD属性值？

我尝试过的：

console.log(array.map(({ fieldB }) =>
    fieldB.map(({ fieldC: { fieldD } }) => ({ fieldD }))
))

但是，它将返回一个父数组，该父数组的0索引处包含一个数组，该数组包含具有名为fieldD的键的对象。

我想返回一个仅包含值的数组，即：

// expected output
[ 'I am here!', 'And I am here!' ]

.map可能吗？

Answer 1

您几乎已经明白了。您可以将fieldD映射到对象，而不是将其映射到它的值。要删除内部数组，可以为此使用.flatMap()，它将内部数组内容映射到一个更大的数组：

const array = [ 
   { 
      "fieldA":"abc",
      "fieldB":[ 
         { 
            "fieldC":{ 
               "fieldD":"I am here!"
            }
         },
         { 
            "fieldC":{ 
               "fieldD":"And I am here!",
            },
         }
      ]
   }
];

console.log(array.flatMap(({ fieldB }) =>
    fieldB.map(({ fieldC: { fieldD } }) => fieldD)
))

Answer 2

尝试一下。

const array = [ 
    { 
       "fieldA":"abc",
       "fieldB":[ 
          { 
             "fieldC":{ 
                "fieldD":"I am here!"
             }
          },
          { 
             "fieldC":{ 
                "fieldD":"And I am here!",
             },
          }
       ]
    }
 ];

 let result = array.reduce((acc, item) => {
     let result = item.fieldB.map( elem => elem.fieldC.fieldD);
     return result;
 }, []);

 console.log(result);

Answer 3

    const array = [ 
       { 
          "fieldA":"abc",
          "fieldB":[ 
             { 
                "fieldC":{ 
                   "fieldD":"I am here!"
                }
             },
             { 
                "fieldC":{ 
                   "fieldD":"And I am here!",
                },
             }
          ]
       }
    ]
    
    console.log(array.map(({ fieldB }) =>
        fieldB.map(({ fieldC: { fieldD } }) => (fieldD))
    )[0])

我希望这段代码对您有帮助。但这不是一个适当的解决方案。