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」的對象而獲得顏色「紅色」。

什麼是最有效的實現方法？

Answer 1

對於此angular.merge()，角度具有內置功能，該功能在angular 1.6.5中適用於此類場景。請檢查您的角度版本的兼容性。

代碼的主要代碼如下所示。

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

這裏$scope.source被合併$scope.changed，這些變化做了$scope.source直接，也沒有必要爲LHS變量。

我試圖在下面的小提琴中表示發生了什麼。請檢查此代碼是否能夠解決您的問題！

JSFiddle Demo