时间戳

首页 > 解决方案 > 嵌套数组的 JavaScript 映射和过滤

javascript - 嵌套数组的 JavaScript 映射和过滤

问题描述

我猜对于任何有经验和逻辑头脑的人来说，这都是一个基本问题，但这让我困惑了两天。

我正在尝试按状态过滤数组，然后只映射结果数组的一个属性。

这是我的 states 数组，其中包含美国各州的子集：

const states = [{ state: 'AL' }, { state: 'OH' }, { state: 'PA' }]

这是我想首先按状态过滤的数组，然后映射到一个只包含我需要的值的新数组。

refData = [
  {
    state: 'AL',
    details: [
      {
        code: '1A',
        description: 'AL Description 1'
      },
      {
        code: '1B',
        description: 'AL Description 2'
      },
      {
        code: '1C',
        description: 'AL Description 3'
      }
    ]
  },
  {
    state: 'PA',
    details: [
      {
        code: '1A',
        description: 'PA Description 1'
      },
      {
        code: '1B',
        description: 'PA Description 2'
      }
    ]
  }
]

这是我过滤然后映射的唯一工作尝试，但它没有给我我需要的东西：

const filteredRefData = refData
  .filter((item) => (states.some(stateName => item.state === stateName.state)))
  .map((item) => item.details)

这让我得到的是所有细节的数组，包括代码和描述。我需要的只是描述值，但无论我尝试什么，我都无法得出最终结果。

我从这张地图中得到的：

[
  0: [
    0: {code: "1A", description: "AL Description 1"}
    1: {code: "1B", description: "AL Description 2"}
    2: {code: "1C", description: "AL Description 3"}
  ],
  1: [
    0: {code: "1A", description: "PA Description 1"}
    1: {code: "1B", description: "PA Description 2"}
  ]
]

我需要这张地图：

[
    0: [
      0: "AL Description 1"
      1: "AL Description 2"
      2: "AL Description 3"
    ],
    1: [
      0: "PA Description 1"
      1: "PA Description 2"
    ]
]

我尝试使用动态索引，但失败了，因为我传递的任何索引总是与顶级数组相关，而不是嵌套数组。我也尝试了 reduce 方法，但我发现很难理解 reduce 如何仅与对象的键/值对一起工作。

感谢您提供任何帮助！

标签： javascriptarrays

解决方案

你快到了。唯一需要的更改是，在 final 中.map，不仅仅是返回item.details，而是map-ing 该数组的结果以仅提取描述：

const states = [{ state: 'AL' }, { state: 'OH' }, { state: 'PA' }];

const refData = [
  {
    state: 'AL',
    details: [
      {
        code: '1A',
        description: 'AL Description 1'
      },
      {
        code: '1B',
        description: 'AL Description 2'
      },
      {
        code: '1C',
        description: 'AL Description 3'
      }
    ]
  },
  {
    state: 'PA',
    details: [
      {
        code: '1A',
        description: 'PA Description 1'
      },
      {
        code: '1B',
        description: 'PA Description 2'
      }
    ]
  }
];

const filteredRefData = refData
  .filter((item) => (states.some(stateName => item.state === stateName.state)))
  .map((item) => item.details.map(({ description }) => description));

console.log(filteredRefData);

推荐阅读