时间戳

首页 > 解决方案 > 如何在javascript中的每次点击时在数组内创建子对象

javascript - 如何在javascript中的每次点击时在数组内创建子对象

问题描述

我想在每次单击按钮时插入对象作为现有最后一个对象的子对象。

这是我的代码：

const Myarray = [
    { id: 1, child:[] }
]

handleArrayDepth = (Myarray) => {

    Myarray.map(arrayitem => {
      let id = arrayitem.id;
      id++;
      arrayitem.child.push({
        id: id,
        child: []
      });
      if (id < 2) {
        this.handleArrayDepth(arrayitem.child);
      }
    });
};
console.log(Myarray);

这是我的初始数组的日志。

0:{
  id: 1,
  child: []
}

如果我单击按钮 2 次，我会得到如下输出：

0:{
  id: 1,
  child: [
    0:{
      id: 2,
      child: []
    },
    1:{
      id: 3,
      child: []
    }
  ]
}

但我想要下面的东西：

0:{
  id: 1,
  child: [
    0:{
      id: 2,
      child: [
        0:{
          id: 3,
          child: []
        }
      ]
    }
  ]
}

它应该递归/无限地进行每次点击。我找不到有效的方法来做到这一点。

标签： javascriptarraysobjectecmascript-6

解决方案

一些问题

  • 不要Array用作变量名
  • 当你没有从它返回值或改变值时，不要使用 map
  • array.id没有意义，因为您没有array在原始代码中命名任何变量

您可以稍微修改您的代码，如果子长度大于 0 则进行递归调用，否则推送该值

const array = [{id: 1,child: []}]

handleArrayDepth = (arr) => {
  arr.forEach(({id,child}) => {
    id++;
    if (child.length) {
      handleArrayDepth(child);
    } else {
      child.push({id: id, child: [] });
    }
  });
};
handleArrayDepth(array)
handleArrayDepth(array)
console.log(array);

推荐阅读