JS 获取树状数据下的所有节点个数，及符合条件的节点个数

需求

有一段数据如下，期望获取 children 下及 children 所有节点个数，并且能根据条件获取符合条件的节点个数。

let data = [
  {
    id: 1,
    type: 0,
    name: '1',
    children: [
      { id: 2, type: 1, name: '2' },
      {
        id: 3,
        type: 0,
        name: '3',
        children: [
          { id: 4, type: 1, name: '4' },
          { id: 5, type: 1, name: '5' },
          { id: 6, type: 0, name: '6' },
        ],
      },
      { id: 7, type: 1, name: '7' },
      { id: 8, type: 1, name: '8' },
      { id: 9, type: 0, name: '9' },
    ],
  },
];

经过处理转换后

let data2 = [
  {
    id: 1,
    type: 0,
    name: '1',
    total: 8, // 获取下面的 children 及 chilren 下面的数据总数
    total_0: 3, // 获取下面的 children 及 chilren 下面的 type 为 0 数据总数
    total_1: 5, // 获取下面的 children 及 chilren 下面的 type 为 1 数据总数
    children: [
      { id: 2, type: 1, name: '2' },
      {
        id: 3,
        type: 0,
        name: '3',
        total: 3, // 获取下面的 children 及 chilren 下面的数据总数
        total_0: 1, // 获取下面的 children 及 chilren 下面的 type 为 0 数据总数
        total_1: 2, // 获取下面的 children 及 chilren 下面的 type 为 1 数据总数
        children: [
          { id: 4, type: 1, name: '4' },
          { id: 5, type: 1, name: '5' },
          { id: 6, type: 0, name: '6' },
        ],
      },
      { id: 7, type: 1, name: '7' },
      { id: 8, type: 1, name: '8' },
      { id: 9, type: 0, name: '9' },
    ],
  },
];

题解

function deepTree(array, node = {}) {
  let newArray = array;
  debugger
  for (let index = 0; index < newArray.length; index++) {
    const element = newArray[index];

    node.total = (node.total || 0) + 1;

    if (
      Object.prototype.toString.call(element) === '[object Object]' &&
      Object.prototype.hasOwnProperty.call(element, 'children')
    ) {
      const children = element.children;
      const deepChildren = deepTree(children, element);
      node.total = (node.total || 0) + (element.total || 0);
    }
  }
  return newArray;
}

const newData = deepTree(data);

console.log('newData', newData);

JS 获取树状数据下的所有节点个数，及符合条件的节点个数

需求

题解

参考文章