乐趣区

关于javascript:查找数组树的所有路径

需要

导航栏或者菜单栏组件,元数据从最外层到 target vlaue 的门路上文案全副高亮。所以须要找出通过 target vlaue 的门路有哪些?

例子

  1. 元数据数据后果如下:
const dataSource = [
  {
    label: '首页',
    value: 1,
  },
  {
    label: '商品分类',
    value: 2,
    child: [
      {
        label: '服饰',
        value: 21,
        child: [
          {
            label: '精美女装',
            value: 211,
          },
        ],
      },
      {
        label: '中央特产',
        value: 22,
        child: [
          {
            label: '河南特产',
            value: 221,
            child: [
              {
                label: '方中山胡辣汤',
                value: 2211,
              },
              {
                label: '烩面',
                value: 2212,
              },
            ],
          },
          {
            label: '上海特产',
            value: 222,
          },
        ],
      }
    ]
  },
  {
    label: '我的',
    value: 3,
    child: [
      {
        label: '根本信息',
        value: 31,
      },
      {
        label: '我的订单',
        value: 33,
        child: [
          {
            label: '全副订单',
            value: 331,
          },
          {
            label: '待收货',
            value: 332,
          },
        ],
      }
    ]
  }
]
  1. 查找出该元数据所有的门路:
/**
 * 获取所有门路
 */
const getAllValuePaths = (dataSource) => {let result = []
  if (!dataSource || dataSource.length ===0) return []

  const constructPaths = (data, path) => {data.forEach(({ value, child}) => {path.push(value)
      if (!child || child.length === 0) {result.push(JSON.parse(JSON.stringify(path)))
      } else {constructPaths(child, path)
      }
      path.pop()})
  }

  constructPaths(dataSource, [])
  return result
}
  1. 优化所有门路办法,找出指定 target value 的门路:
/**
 * 获取指定 target 门路
 */
const getValuePathsByTarget = (dataSource, target) => {let result = []
  if (!dataSource || dataSource.length ===0 || !target) return []

  const constructPaths = (data, target, path) => {data.forEach(({ value, child}) => {path.push(value)
      if (value === target) {result = JSON.parse(JSON.stringify(path))
        return
      }
      if (child && child.length) {constructPaths(child, target, path)
      }
      path.pop()})
  }

  constructPaths(dataSource, target, [])
  return result
}
  1. 自测后果:

退出移动版