Javascript 为什么我的自定义过滤器会导致无限消化？

我创建了一个自定义过滤器，将键值对数组分解为一个对象，该对象按特定属性的第一个字母对值进行分组。比如说

输入：

[{foo:'bar'}，{faz:'baz'}，{boo:'foo'}]

输出：

{f:[{foo:bar}，{faz:baz}]，b:[{boo，foo}]}

然而，这个过滤器似乎在角度上造成了无限的消解误差

var-app=angular.module（'app'，[]）；
app.controller（'ctrl'，['$scope'，函数（$scope）{
$scope.arr=[{name:'foo'，def:'bar'}，{name:'faz'，def:'baz'}，{name:'boo'，def:'foo'}]
}]);
app.filter（'firstLetterChunks'，function（）{
返回函数（输入）{
var chunks={}；
对于（变量i=0；i

这导致了一个infdig错误。检查你的控制台。
{{firstletter}}

{{value}}
之所以会发生这种情况，是因为每个过滤器调用基本上都会返回一个新对象，该对象具有新的标识，因此认为某些内容已经更改。这反过来会触发一个新的消化周期，并一直持续到达到10个消化极限

我想可以通过使用缓存来修复它，以存储计算对象并保留过滤器，但我将您的代码更改为以下代码，其工作原理相同，但如果数组更改，您必须重新计算
块
：

var app = angular.module('app', []);

app.controller('ctrl', ['$scope', function($scope){

  $scope.arr = [{name: 'foo', def: 'bar'}, {name: 'faz', def: 'baz'}, {name: 'boo', def: 'foo'}];

    function getChunks() {
        var input = $scope.arr;
        var chunks = {};
        for(var i = 0; i < input.length; i++){
            var firstLetter = input[i].name[0].toUpperCase();
            if(!(chunks.hasOwnProperty(firstLetter))) {
                chunks[firstLetter]=[];
            }
            chunks[firstLetter].push(input[i]);
        }

        return chunks;
    }

    $scope.chunks = getChunks();
}]);

var-app=angular.module（'app'，[]）；
app.controller（'ctrl'，['$scope'，函数（$scope）{
$scope.arr=[{name:'foo'，def:'bar'}，{name:'faz'，def:'baz'}，{name:'boo'，def:'foo'}]；
函数getChunks（）{
var输入=$scope.arr；
var chunks={}；
对于（变量i=0；i

并将HTML调用更改为：

<div ng-repeat="(firstletter, values) in chunks">