递归

概念

处理重复单元

const a = {
  name: "begin",
  children: [
    {
      name: "1",
      children: [
        { name: "2", children: [{ name: "3", children: [{ name: "4" }] }] },
      ],
    },
  ],
};

一个单元

function handle(data) {
  const arr = [];
  arr.push(data.name);

  return arr;
}

每次执行返回一个新数组，单个 handle 处理的结果

递阶段

创建新的执行上下文阶段,也就是进栈

归阶段

销毁执行上下文阶段,也就是出栈(当进行到最后一个 return 的时候，进行归阶段)

普通版

function handle(data) {
  const arr = [];
  arr.push(data.name);
  if (Array.isArray(data.children)) {
    data.children.forEach((item) => {
      // 每次执行，开辟新的执行上下文并返回一个全新的数组
      const returnArr = handle(item);
      //最后一个return,归阶段开始执行，（想不通，可以考虑将树的层级缩为一级）
      arr.push(...returnArr);
    });
  }
  return arr;
}

优化版

function handle2(data, list = []) {
  list.push(data.name);
  if (Array.isArray(data.children)) {
    data.children.forEach((item) => {
      handle2(item, list); //同一份引用
    });
  }
  return list;
}

有人说 data 是数组不支持,Emmmm

let res = arr.map((item) => handle2(item)).flat(Infinity);

const lastHandle = (data) => {
  if (Array.isArray(data)) {
    return data.map((item) => handle2(item)).flat(Infinity);
  } else {
    return handle2(data);
  }
};