Javascript 在对象的嵌套数组中使用过滤器

我希望有一个数组，它返回基于选中属性的特定属性

const data = [
      {
        "param": "type",
        "id": 6,
        "data": [
          {
            "name": "Collect",
            "filterKey": "collect",
            "checked": false
          },
          {
            "name": "Redeem",
            "filterKey": "redeem",
            "checked": true
          }
        ]
      },
      {
        "param": "country",
        "id": 5,
        "data": [
          {
            "name": "Malaysia",
            "filterKey": "my",
            "checked": true
          },
          {
            "name": "Singapore",
            "filterKey": "sg",
            "checked": false
          }
        ]
      }
    ]

为什么我下面的代码不起作用？这是我用于检查或取消检查事件的函数

const checkedKeys = data.map(o => {
        return o.data.filter(o2 => {
          return o2.checked === true
        }).filterKey
    })

对于上述情况，我希望获得

['my'，'reduce']

为什么我下面的代码不起作用？这是我用于支票或支票的函数 取消选中事件

因为

filter

返回一个数组，而该数组没有

filterKey

属性

使用

reduce

、

filter

和

map

var output = data.reduce( ( a, b ) => //use reduce to accumulate all filtered values
            a.concat( b.data.filter( o2 =>  //filter by checked
                o2.checked ).map( o3 =>   // map to get only the filterKey property
                   o3.filterKey ) ) , []); //[] is the initial value of accumulator

演示

var数据=[
{
“参数”：“类型”，
“id”：6，
“数据”：[
{
“名称”：“收集”，
“filterKey”：“收集”，
“选中”：false
},
{
“姓名”：“赎回”，
“filterKey”：“兑换”，
“已检查”：真
}
]
},
{
“参数”：“国家”，
“id”：5，
“数据”：[
{
“名称”：“马来西亚”，
“filterKey”：“我的”，
“已检查”：真
},
{
“名称”：“新加坡”，
“filterKey”：“sg”，
“选中”：false
}
]
}
];
var输出=data.reduce（（a，b）=>a.concat（b.data.filter（o2=>o2.checked.map（o3=>o3.filterKey）），[]）；
控制台日志（输出）
为什么我下面的代码不起作用？这是我用于支票或支票的函数
取消选中事件

因为
filter
返回一个数组，而该数组没有
filterKey
属性

使用
reduce
、
filter
和
map

var output = data.reduce( ( a, b ) => //use reduce to accumulate all filtered values
            a.concat( b.data.filter( o2 =>  //filter by checked
                o2.checked ).map( o3 =>   // map to get only the filterKey property
                   o3.filterKey ) ) , []); //[] is the initial value of accumulator

演示


var数据=[
{
“参数”：“类型”，
“id”：6，
“数据”：[
{
“名称”：“收集”，
“filterKey”：“收集”，
“选中”：false
},
{
“姓名”：“赎回”，
“filterKey”：“兑换”，
“已检查”：真
}
]
},
{
“参数”：“国家”，
“id”：5，
“数据”：[
{
“名称”：“马来西亚”，
“filterKey”：“我的”，
“已检查”：真
},
{
“名称”：“新加坡”，
“filterKey”：“sg”，
“选中”：false
}
]
}
];
var输出=data.reduce（（a，b）=>a.concat（b.data.filter（o2=>o2.checked.map（o3=>o3.filterKey）），[]）；
控制台日志（输出）您也可以通过使用简单的javascript来实现这一点，javascript看起来很容易理解，并且您可以为将来的更改轻松地进行编辑。尽管使用ECMA脚本或纯javascript时，基于时间和空间的复杂性是相同的。仅仅依靠速记代码


var数据=[
{
“参数”：“类型”，
“id”：6，
“数据”：[
{
“名称”：“收集”，
“filterKey”：“收集”，
“选中”：false
},
{
“姓名”：“赎回”，
“filterKey”：“兑换”，
“已检查”：真
}
]
},
{
“参数”：“国家”，
“id”：5，
“数据”：[
{
“名称”：“马来西亚”，
“filterKey”：“我的”，
“已检查”：真
},
{
“名称”：“新加坡”，
“filterKey”：“sg”，
“选中”：false
}
]
}
];
var checkedKeys=[]；
data.forEach（（数据项）=>{
dataItem.data.forEach（（innerData）=>{
if（innerData.checked）{
checkedKeys.push（innerData.filterKey）；
}
});
});
log（checkedKeys）
您也可以通过使用简单的javascript来实现这一点，javascript看起来很容易理解，您可以轻松编辑以备将来更改。尽管使用ECMA脚本或纯javascript时，基于时间和空间的复杂性是相同的。仅仅依靠速记代码


var数据=[
{
“参数”：“类型”，
“id”：6，
“数据”：[
{
“名称”：“收集”，
“filterKey”：“收集”，
“选中”：false
},
{
“姓名”：“赎回”，
“filterKey”：“兑换”，
“已检查”：真
}
]
},
{
“参数”：“国家”，
“id”：5，
“数据”：[
{
“名称”：“马来西亚”，
“filterKey”：“我的”，
“已检查”：真
},
{
“名称”：“新加坡”，
“filterKey”：“sg”，
“选中”：false
}
]
}
];
var checkedKeys=[]；
data.forEach（（数据项）=>{
dataItem.data.forEach（（innerData）=>{
if（innerData.checked）{
checkedKeys.push（innerData.filterKey）；
}
});
});
console.log（checkedKeys）
一个带有array.prototype.concat、array.prototype.filter、array.prototype.map和ES6扩展运算符的解决方案：


var data=[{“param”：“type”，“id”：6，“data”：[{“name”：“Collect”，“filterKey”：“Collect”，“checked”：false}，{“name”：“redeme”，“filterKey”：“redeme”，“checked”：true}，{“param”：“country”，“id”：5，“data”：[{“name”：“malia”，“filterKey”：“my”，“checked”：true}，{“name”：“Singapore”，“filterKey”：“sg”，“checked”：false}]；
var result=[].concat（…data.map（o=>o.data））.filter（d=>d.checked）.map（d=>d.filterKey）；
控制台日志（结果）带有array.prototype.concat、array.prototype.filter、array.prototype.map和ES6扩展运算符的解决方案：


var data=[{“param”：“type”，“id”：6，“data”：[{“name”：“Collect”，“filterKey”：“Collect”，“checked”：false}，{“name”：“redeme”，“filterKey”：“redeme”，“checked”：true}，{“param”：“country”，“id”：5，“data”：[{“name”：“malia”，“filterKey”：“my”，“checked”：true}，{“name”：“Singapore”，“filterKey”：“sg”，“checked”：false}]；
var result=[].concat（…data.map（o=>o.data））.filter（d=>d.checked）.map（d=>d.filterKey）；
控制台日志（结果）您也可以尝试类似的方法

逻辑

创建一个临时数组。（
acc
在下面的示例中）
循环
数据
并依次循环
数据[i]。数据
检查
checked
是否为真，将
filterKey
值按到
acc

ES5版本：


var data=[{“param”：“type”，“id”：6，“data”：[{“name”：“Collect”，“filterKey”：“Collect”，“checked”：f