从数组中的数组中删除项答案

【问题标题】：Remove Items from Arrays inside an Array从数组中的数组中删除项
【发布时间】：2021-06-17 17:48:35
【问题描述】：

我正在尝试使用 .map 和 .filter 从数组中的数组中删除特定项目，并尝试删除同一数组中的数组。

这是数组的一个例子：

items: [
    {
        title: 'dashboard',
        isValidateAccess: false,
    },
    {
        title: 'reports',
        isValidateAccess: true,
        children: [
            {
                title: 'attendancesReportMenu',
                isValidateAccess: true,
            },
            {
                title: 'holidaysReportMenu',
            },
            {
                title: 'absencesReportMenu',
                isValidateAccess: true,
            },
        ],
    },
    {
        title: 'myDepartments',
        children: [
            {
                title: 'inconsistencies',
                isValidateAccess: true,
            },
            {
                title: 'absences',
            },
            {
                title: 'clocks',
                isValidateAccess: true,
            },
            {
                title: 'employees',
            },
        ],
    },
]

基本上，我想删除所有 isValidateAccess 为 true 的项目/数组。结果是这样的：

items: [
    {
        title: 'dashboard',
        isValidateAccess: false,
    },
    {
        title: 'myDepartments',
        children: [
            {
                title: 'absences',
            },
            {
                title: 'employees',
            },
        ],
    },
]

【问题讨论】：

为什么reports 对象会在您的结果中被删除？
请先发布您的尝试。
因为它有isValidateAccess: true。这是棘手的部分，我不想只删除项目，还要删除数组，以防万一他们认为这是真的。
我以为你只想从内部数组中删除，而不是外部数组。
我的错..这可能吗？ :|

标签： javascript arrays filter

【解决方案1】：

在主数组上使用filter() 删除顶级元素，然后在其余元素中使用forEach()，以便您可以过滤children 数组。

let items = [{
    title: 'dashboard',
    isValidateAccess: false,
  },
  {
    title: 'reports',
    isValidateAccess: true,
    children: [{
        title: 'attendancesReportMenu',
        isValidateAccess: true,
      },
      {
        title: 'holidaysReportMenu',
      },
      {
        title: 'absencesReportMenu',
        isValidateAccess: true,
      },
    ],
  },
  {
    title: 'myDepartments',
    children: [{
        title: 'inconsistencies',
        isValidateAccess: true,
      },
      {
        title: 'absences',
      },
      {
        title: 'clocks',
        isValidateAccess: true,
      },
      {
        title: 'employees',
      },
    ],
  },
];

items = items.filter(item => !item.isValidateAccess);
items.forEach(item => item.children && (item.children = item.children.filter(child => !child.isValidateAccess)));

console.log(items);

【讨论】：

【解决方案2】：

这是相当现代的实现

const items = [
    {
        title: 'dashboard',
        isValidateAccess: false,
    },
    {
        title: 'reports',
        isValidateAccess: true,
        children: [
            {
                title: 'attendancesReportMenu',
                isValidateAccess: true,
            },
            {
                title: 'holidaysReportMenu',
            },
            {
                title: 'absencesReportMenu',
                isValidateAccess: true,
            },
        ],
    },
    {
        title: 'myDepartments',
        children: [
            {
                title: 'inconsistencies',
                isValidateAccess: true,
            },
            {
                title: 'absences',
            },
            {
                title: 'clocks',
                isValidateAccess: true,
            },
            {
                title: 'employees',
            },
        ],
    },
]
const filter = (filterable) =>
  filterable
  .filter(item => !item.isValidateAccess)
  .map(item => ({
    ...item,
    children: item.children?.filter(i => !i.isValidateAccess)
  }))


  
console.log(filter(items))

【讨论】：