如何获取嵌套数组中的项目[重复]答案

【问题标题】：How to get items inside nested arrays [duplicate]如何获取嵌套数组中的项目[重复]
【发布时间】：2019-08-26 15:07:39
【问题描述】：

我有一个这样的数组：

[
  {
    "id": 1,
    "name": "Vehicle",
    "subCategories": [
      {
        "subCategoryId": 1,
        "subCategoryName": "Car"
      }
    ]
  },
  {
    "id": 2,
    "name": "Delivery",
    "subCategories": [
      {
        "subCategoryId": 1,
        "subCategoryName": "Furniture"
      }
    ]
  },
  {
    "id": 3,
    "name": "Home Services",
    "subCategories": [
      {
        "subCategoryId": 1,
        "subCategoryName": "Lawn Mowing"
      }
    ]
  }
]

我想从一个名为 subcategories 的数组中获取所有类别的所有子类别。

我尝试过 map、reduce、concat 等，但似乎无法得到想要的结果。

【问题讨论】：

标签： javascript arrays angular typescript

【解决方案1】：

您可以使用解构从每个对象中提取subCategories 数组，然后使用.flatMap 将其展平为一个数组，如下所示：

const arr = [{id:1,name:"Vehicle",subCategories:[{subCategoryId:1,subCategoryName:"Car"}]},{id:2,name:"Delivery",subCategories:[{subCategoryId:1,subCategoryName:"Furniture"}]},{id:3,name:"Home Services",subCategories:[{subCategoryId:1,subCategoryName:"Lawn Mowing"}]}];

const subcategories = arr.flatMap(({subCategories}) => subCategories);
console.log(subcategories);

如果您想要更兼容浏览器的东西，您可以在初始数组上使用 .reduce()，方法是将每个 subCategories 数组的内容分散到一个累加数组中：

const arr = [{id:1,name:"Vehicle",subCategories:[{subCategoryId:1,subCategoryName:"Car"}]},{id:2,name:"Delivery",subCategories:[{subCategoryId:1,subCategoryName:"Furniture"}]},{id:3,name:"Home Services",subCategories:[{subCategoryId:1,subCategoryName:"Lawn Mowing"}]}];
const subcategories = arr.reduce((res, {subCategories}) => [...res, ...subCategories], []);
console.log(subcategories);

【讨论】：

【解决方案2】：

您可能需要根据您的浏览器支持需求进行 polyfill，但 flatMap 非常适合：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

假设您的示例数据位于名为data 的变量中，请调用

data.flatMap(item => item.subcategories);

【讨论】：