React项目中嵌套数组循环过滤获取专属结果的问题

嘿，我明白你现在卡在从嵌套数组对象里过滤出匹配技能别名的数据了，这就给你两种实用方案——原生JS和lodash的，按需选就行！

首先先明确下你的嵌套主数组大概的结构（我猜是这样的，如果和你的实际结构有出入，调整字段名就行）：

// 示例嵌套主数组
const mainNestedArray = [
  {
    id: 1,
    skills: [
      { alias: "string-1", name: "JavaScript" },
      { alias: "string-3", name: "CSS" }
    ]
  },
  {
    id: 2,
    skills: [
      { alias: "string-2", name: "React" },
      { alias: "string-1", name: "JavaScript" }
    ]
  },
  {
    id: 3,
    skills: [
      { alias: "string-4", name: "Node.js" }
    ]
  }
];

你的技能别名数组是：

let arrayA = ["string-1", "string-2"];
let newArr1 = [];

方案一：原生JavaScript实现 #

需求1：过滤出包含匹配技能的顶级对象 #

如果你想保留原有的顶级对象结构，只留下那些至少有一个技能别名在arrayA里的项，用filter+some组合就搞定：

newArr1 = mainNestedArray.filter(item => {
  // 检查当前项的skills中是否存在alias在arrayA里的技能
  return item.skills.some(skill => arrayA.includes(skill.alias));
});

执行后newArr1会包含id为1和2的两个对象，因为它们的skills里有匹配的alias。

需求2：提取所有匹配的技能对象 #

如果你想直接拿到所有符合条件的技能数据（不管属于哪个顶级对象），用flatMap+filter，一步得到一维数组：

newArr1 = mainNestedArray.flatMap(item => {
  // 过滤当前项的skills，只保留alias在arrayA里的
  return item.skills.filter(skill => arrayA.includes(skill.alias));
});

执行后newArr1会是：

[
  { alias: "string-1", name: "JavaScript" },
  { alias: "string-2", name: "React" },
  { alias: "string-1", name: "JavaScript" }
]

方案二：用Lodash简化代码 #

如果你的项目已经引入了Lodash，写法会更简洁，尤其适合复杂嵌套场景：

过滤顶级对象 #

import _ from 'lodash';

newArr1 = _.filter(mainNestedArray, item => {
  return _.some(item.skills, skill => _.includes(arrayA, skill.alias));
});

// 或者更简洁的链式调用
newArr1 = _.chain(mainNestedArray)
  .filter(item => _.some(item.skills, skill => _.includes(arrayA, skill.alias)))
  .value();

提取匹配的技能对象 #

用Lodash的flatMap直接展开所有skills再过滤，代码更短：

newArr1 = _.chain(mainNestedArray)
  .flatMap('skills') // 一键展开所有skills数组为一维数组
  .filter(skill => _.includes(arrayA, skill.alias)) // 过滤匹配的别名
  .value();

边界情况处理 #

如果arrayA是空数组，你可能需要特殊处理，比如返回空数组或者全部数据：

// 原生JS示例
newArr1 = arrayA.length === 0 
  ? [] // 这里可以改成mainNestedArray来返回所有数据，按需调整
  : mainNestedArray.filter(item => item.skills.some(skill => arrayA.includes(skill.alias)));

内容的提问来源于stack exchange，提问作者arunmenon