Javascriptマージ配列が元の配列に変更されます

Question

私は以下のような配列を持っています。

[{ 
    name: 'a', 
    color: 'red', 
    children: 
    [{ 
     name: 'a1', 
     color: 'red', 
     children: 
     [{ 
      name: 'a11' 
     }] 
    }, 
    { 
     name: 'a2' 
     color: 'red', 
    }] 
}, 
{ 
    name: 'b' 
    color: 'red', 
}] 

ユーザーはフロントエンドを変更して、次のように配列の新しい構造を取り戻します。

[{ 
    name: 'a' 
    color: 'red', 
    children: 
    [{ 
     name: 'a1' 
     color: 'red', 
    }, 
    { 
     name: 'a2' 
     color: 'red', 
     children: 
     [{ 
      name: 'a21', 
      color: 'yellow' 
     }] 
    }] 
}, 
{ 
    name: 'new' 
    color: '', 
}, 
{ 
    name: 'a11' 
    color: 'red', 
}, 
{ 
    name: 'b' 
    color: 'red', 
}] 

ご覧のとおり、一部のオブジェクトが移動して一部が追加されています。変更を元の配列にマージし、変更されていないオブジェクトは変更しないでください。

このリストは角度で表示されるので、元の配列を新しい配列に置き換えると、配列全体が再びレンダリングされます（この配列は大量になります）。

私はlodashでマージ機能を使用しようとしましたが、名前が "b"のオブジェクトのため、 "new"という名前のオブジェクトに問題が発生しました。

これを達成する最も効率的な方法は何ですか？

Answer 1

Angularには、angular.merge()の組み込み関数があり、このようなシナリオではangular 1.6.5で動作します。あなたの角バージョンとの互換性を確認してください。

コードのメインラインを以下に示します。ここで$scope.source

angular.merge($scope.source, $scope.changed); 

が $scope.changedにマージされ、変更が直接 $scope.sourceに行われており、 LHS変数は必要ありません。

私は下のフィドルで何が起こっているのかを表現しようとしました。このコードが問題を解決できるかどうかを確認してください。

JSFiddle Demo