如何将下面的递归函数变成纯函数？

Question

以下函数将对象附加到嵌套数组中（通过递归搜索）：

function appendDeep (arr, obj, newObj) {
  if (arr.indexOf(obj) !== -1) {
    arr.splice(arr.indexOf(obj) + 1, 0, newObj)
  } else {
    arr.map(item => {
      if (item.children) spliceDeep(item.children, obj)
    })
  }
}

例子：

const colors = {
  children: [
    {
      name: 'white',
    },
    {
      name: 'yellow',
      children: [
        {
          name: 'black'
        }
      ]
    }
  ]
}

const color = {
  name: 'black'
}

const newColor = {
  name: 'brown'
}

appendDeep(colors.children, color, newColor)

结果：

children: [
     [
       {
         name: 'white',
       },
       {
         name: 'yellow',
         children: [
           {
             name: 'black'
           },
           {
             name: 'brown'
           }
         ]
       }
     ]
   ]

如您所见，appendDeep 返回一个副作用；它修改了arr。所以我决定改为返回数组（这样函数就会变成纯函数）：

function findDeep (arr, obj) {
  if (arr.indexOf(obj) !== -1) {
    console.log(arr)
    return arr
  } else {
    arr.map(item => {
      if (item.children) findDeep(item.children, obj)
    })
  }
}

并像这样使用新功能：

const newArr = findDeep(colors.children, color)
newArr.splice(newArr.indexOf(color) + 1, 0, newColor)

但我收到此错误：

bundle.js:19893 Uncaught TypeError: Cannot read property 'splice' of undefined

我做错了什么？

（注意：这里是CodePen。）

（注 2：console.log(arr) 确实返回嵌套的子级。但由于某种原因，它们在函数之外变成了undefined。）

Answer 1

您不会在map 中返回递归findDeep 方法。返回它以使递归工作，因为您的条件分支没有从地图中返回任何内容。结果，您得到的结果为undefined。 JSBin

Answer 2

这是一个使用thisArgs 或Array#some 的提案。

function appendDeep(object, search, insert) {
    function iter(a) {
        if (a.name === search.name) {
            this.children.push(insert);
            return true;
        }
        return Array.isArray(a.children) && a.children.some(iter, a);
    }

    object.children.some(iter, object);
}

var colors = { children: [{ name: 'white', }, { name: 'yellow', children: [{ name: 'black' }] }] },
    color = { name: 'black' },
    newColor = { name: 'brown' };

appendDeep(colors, color, newColor);

document.write('<pre>' + JSON.stringify(colors, 0, 4) + '</pre>');

Answer 3

首先，一个 find 方法将返回所请求项所在的数组（作为直接子项）。

function findDeep(arr, obj) {
    return arr.map((item) => {
        if (item.name === obj.name) {
            return arr;
        } else if (item.children) {
            return findDeep(item.children, obj);
        } else {
            return undefined;
        }
    }).reduce((prev, cur) => {
        return prev ? prev : cur;
    });
}

您可以使用它来将项目附加到列表中，但这仍会修改原始数组：

function appendDeep(arr, color, newColor) {
    let found = findDeep(arr, color);

    if (found) {
        found.splice(found.indexOf(color) + 1, 0, newColor);
    }

    return arr;
}

如果您不想修改原始数组，事情会变得更加复杂。那是因为push和splice等标准数组函数会修改原始数组。没有快速修复，至少我不知道，因为最好不要克隆比实际需要的更多的项目。

你不需要克隆black，但你需要克隆包含它的数组（它可以简单地重用现有的黑色对象。）这意味着黄色的对象也需要被克隆（到使用克隆的数组），需要克隆黄色所在的数组。但是同一个数组中的white没有被修改，也不需要克隆。我还没有弄清楚如何正确地做到这一点。