VUE中封装方法时遇到的问题

这是我在封装方法时遇到的问题，场景情况也比较特殊，可能不适用于大多数场景，仅记录一下嗷

因为需求的原因，我封装了两个方法，一个是树结构转数组，另一个是数组转树结构。在这里这两个方法就不都写出来了

树结构转数组

interface transitionType {
  id: number;
  name: string;
  parentId: number | null;
  children?: transitionType[];
}

const arrayToTree = (data: transitionType[]): transitionType[] => {
  const arr: transitionType[] = [];

  const expanded = (datas: transitionType[]): transitionType[] => {
    datas.forEach((e, index) => {
      if (e.children) {
        datas.push(...e.children);
        delete e.children;
      }
      arr.push(e);
      delete datas[index];
    });
    if (datas.join('').length == 0) {
      return arr;
    }

    return expanded(datas);
  };

  return expanded(data);
};

遇到的问题是 输出的是一个空数组（数组转树结构输出的是一个长度无限的数组）

这是html的结构（爆红是因为有特殊字母删掉了，有些不能展示...见谅）

 原因分析：

1.首先通过 reactive 定义的一个响应式 testArrayToTree 变量（当修改这个变量的时候，在 html 模版中使用到这个变量地方都会重新执行一次）

2.这个变量是一个引用数据类型，当一个引用数据类型通过函数的形参传递进去，并在内部对其进行修改的时候，外部的变量也会修改（引用数据类型是按地址传递）

3.在当前 arrayToTree 方法中，使用forEact对传入数组进行遍历处理（forEach会改变原数组）

最终就导致了，当调用第一次 ArrayToTree 方法处理 textArrayToTree 就会修改 textArrayToTree 本身，Vue 监测到响应式数据被修改后，重新执行调用过该数据的位置，然后又执行了一次 ArrayToTree 方法，一直执行，直到数组为空...... 

解决的方法：

我是通过对传入的参数进行深拷贝来解决这个问题的，这样forEach操作的数组就不再是传入的那个参数了，或者也可以使用 map ，当然我没有这么写过，大家如果想尝试一下也可以试一试。