编辑子数组中的对象[重复]答案

【问题标题】：Edit object in child array [duplicate]编辑子数组中的对象[重复]
【发布时间】：2019-12-10 08:29:30
【问题描述】：

我有这样一个数组

const arr = [
    {id: 1, title: 'qwer', children: []},
    {id: 2, titile: 'sparta', children: 
      [
       {id: 21, title: 'sdf', children: []},
       {id: 11, title: 'change me', children: []}
      ]
    }
  ]

我需要编辑一个对象{id: 11, title: 'change me', children: []}; 我就是这样做的

const newData = dataCopy.map(el => {
          if(el.Id === this.titleId){
            return {
              ...el,
              Title: val
            }
          }
          return el;
        });

问题是我不知道如何在子数组中找到目标对象。如何找到它并返回新数组？

【问题讨论】：

你试过双循环还是双 find？
在地图内使用过滤器

标签： javascript arrays

【解决方案1】：

您可以创建如下函数：

function editCopy(arr, id, val) {
    return arr.map(item => ({
        ...item,
        title: item.id === id ? val : item.title,
        children: editCopy(item.children, id, val)
    }));
}

然后调用函数，给定数组作为第一个参数，要更改的元素的 id 作为第二个参数，要更改的值作为第三个参数。例如，在您的情况下，

const newData = editCopy(arr, 11, '...some changed value...')

该函数将返回一个新数组，其中包含更改给定 id 的元素的值。

该函数也使用递归来检查和更改 'children' 数组中的值。

希望这会有所帮助。

【讨论】：