次の再帰関数を純粋な関数にするには？

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

まず、要求されたアイテムを（直接の子として）配置されている配列を返します検索方法。

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を複製する必要はありませんが、それを含む配列を複製する必要があります（既存のオブジェクトを単に黒く再利用できます）。つまり、黄色のオブジェクトも複製する必要があります複製されたアレイ）および黄色が位置するアレイをクローニングする必要がある。しかし、同じ配列内にある白は変更されておらず、複製する必要もありません。私はそれを正しく行う方法を考え出していない。

Answer 2

あなたは再帰的な帰国されていませんmap内のfindDeepメソッド。条件分岐がマップ内から何も返さないため、再帰が機能するように戻します。結果としてundefinedという結果が得られます。 JSBin

Answer 3

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>');