Javascript多维映射和reduce功能

Question

我想显示根据用户条件和属性动态变化的菜单：如果是根目录，是否选择了项目或用户具有权限。这是menu列表对象。

const menus = [
{ 'id': 1, 'onHidden': ['root', 'user'] },
{ 'id': 2, 'onHidden': ['root', 'user'] },
{ 'id': 3, 'onHidden': ['user', 'unselected'] },
{ 'id': 4, 'onHidden': ['user', 'unselected'] },
{ 'id': 5, 'onHidden': ['unselected'] },
{ 'id': 6, 'onHidden': ['root', 'user'] },
{ 'id': 7, 'onHidden': ['user', 'unselected'] },
]

在 React 的前端，我将条件作为数组对象传递给函数，如下所示：

const shownMenues = pickShownMenus([
this.props.parent === 0 ? 'root' : false,
this.props.selected < 0 ? 'unselected' : false,
this.props.user.permission > 2 ? 'user' : false,
])

onpickShownMenus()函数尝试返回一个menu.id数组，例如[3, 4, 5, 7]用于根目录，[5]用于根目录(如果未选择项目(。

问题：我尝试使用 map 和 reduce 函数来获得结果，但它返回的结果与我预期的不同，因为映射的第二次迭代将覆盖所有内容......那么，如何防止覆盖并接收收集结果呢？

这是我使用的功能(不起作用(：

const pickShownMenus = (props) => {
const p = props.slice()
const propsArr = p.filter((x) => x != false)
const reduce = menus.reduce((arr, menu) => {
propsArr.map((props) => {
if (menu.onHidden.indexOf(props) < 0) {
arr.push(menu.id)
}
})
return arr
}, [])
return reduce
}

Answer 1

因此，根据您提供的内容考虑这种情况：

const menus = [
{ 'id': 1, 'onHidden': ['root', 'user'] },
{ 'id': 2, 'onHidden': ['root', 'user'] },
{ 'id': 3, 'onHidden': ['user', 'unselected'] },
{ 'id': 4, 'onHidden': ['user', 'unselected'] },
{ 'id': 5, 'onHidden': ['unselected'] },
{ 'id': 6, 'onHidden': ['root', 'user'] },
{ 'id': 7, 'onHidden': ['user', 'unselected'] },
]
const props = {
parent: 1,
selected: -1,
user: {
permission: 1
}
};
const params = [
props.parent === 0 ? 'root' : false,
props.selected < 0 ? 'unselected' : false,
props.user.permission > 2 ? 'user' : false,
]

基于此，pickDisplayMenus应该是这样的：

const pickShownMenus = (params) => {
const filtered_params = params
.filter(elm => !!elm) // Remove the falses
return menus
.filter(menu => 
menu.onHidden
.some(onHiddenDirective => 
filtered_params
.find(filtered_param => 
filtered_param === onHiddenDirective
)
)
)
.map(menu => menu.id) // output: [3, 4, 5, 7]
}