JS按元素字段值过滤嵌套数组答案

【问题标题】：JS filter nested array by element field valueJS按元素字段值过滤嵌套数组
【发布时间】：2020-09-10 20:29:37
【问题描述】：

我想按元素字段值过滤嵌套数组。这是需要过滤的数组。我想按元素检查值过滤，如果值等于真，返回，假，丢弃元素。

let rawData =[
      {
        name: 'red',
        checked: true,
        children: [
          {
            name: 'red1',
            checked: false,
            children: [
              {
                name: 'red11',
                checked: true,
                children: [
                  {
                    name: 'red111',
                    checked: false,
                    children: [
                      {
                        name: 'red1111',
                        checked: true,
                        children: []
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: 'blue',
        checked: false,
        children: [
          {
            name: 'blue1',
            checked: true,
            children: [
              {
                name: 'blue11',
                checked: true,
                children: []
              },
               {
                name: 'blue12',
                checked: false,
                children: []
              },
            ]
          }
        ]
      },
      {
       name: 'yellow',
       checked: false,
       children: []
      }
    ]

这是我想要的结果。（过滤每个元素并以选中的等于 true 的方式返回它。如果不等于 true，则丢弃。

 let result =[
      {
        name: 'red',
        checked: true,
        children: [
          {
            name: 'red11',
            checked: true,
            children: [
              {
                name: 'red1111',
                checked: true,
                children: []
              }
            ]
          }
        ]   
      },
        {
          name: 'blue1',
          checked: true,
          children: [
            {
              name: 'blue11',
              checked: true,
              children: []
            }
          ]
        }
      ]

这是我的解决方案。（不会工作）

let result = rawData.filter(node => {
  function getCheckedData (node) {
    if (node.checked === true) {
      return node
    }
    if (node.children.length) {
      node.children.filter(c => {
        getCheckedData(c)
      })
    }
   return getCheckedData(node)
})

node.children.filter 如果一级数据checked equal true 则永远不会执行。无论parent 检查状态如何，我应该怎么做才能使children 递归继续进行。谢谢~~

【问题讨论】：

您是否真的在尝试支持字符串"false" 的检查值？你认为这等同于什么？真的？假的？
您的要求有些奇怪。您正在返回一棵树，但输出结构与输入结构仅略微相关。在输入中，red1111 是red11 的孙子。但在输出中它是一个child。您确定不想要输出的平面列表吗？

标签： javascript arrays recursion filter nested

【解决方案1】：

这不说明您使用了checked: 'false',，这是一个真实的值，但这个词是假的......所以¯\_(ツ)_/¯ 我会假设文字是假的。

let rawData =[
      {
        name: 'red',
        checked: true,
        children: [
          {
            name: 'red1',
            //checked: 'false', // ¯\_(ツ)_/¯
            checked: false,
            children: [
              {
                name: 'red11',
                checked: true,
                children: [
                  {
                    name: 'red111',
                    checked: false,
                    children: [
                      {
                        name: 'red1111',
                        checked: true,
                        children: []
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: 'blue',
        checked: false,
        children: [
          {
            name: 'blue1',
            checked: true,
            children: [
              {
                name: 'blue11',
                checked: true,
                children: []
              },
               {
                name: 'blue12',
                checked: false,
                children: []
              },
            ]
          }
        ]
      },
      {
       name: 'yellow',
       checked: false,
       children: []
      }
    ];

function checkedStuff(arr) {
  return arr.flatMap(
    a => a.checked
    ? {...a, children: checkedStuff(a.children)}
    : checkedStuff(a.children)
  );
}

console.log(checkedStuff(rawData));

【讨论】：

flatMap 和递归的美妙使用