Javascript 多维映射和归约函数

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,
    ])

on pickShownMenus() 函数尝试 return menu.id 的数组，例如 [3, 4, 5, 7] 用于根目录，[5] 用于根目录，当项目不是已选择。

问题：我已经尝试使用 map 和 reduce 函数来获得结果，但它 return 与我预期的不同，因为映射的第二次迭代将覆盖一切....那么我怎样才能防止覆盖并收到收集结果？

这是我使用的函数（不工作）：

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,
]

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

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]

  }

Javascript 多维映射和归约函数

Javascript multi dimensional map and reduce function

javascript

mapreduce

reactjs