javascript - Controller 性能比较中的自定义过滤器与过滤器功能

Question

假设我有一个包含 5000 个对象(带有 bool 值)的数组，我必须在模板中ng-repeat:

$scope.arr = [
    {
        "value": true
    },
    {
        "value": false
    },
    {
        "value": false
    }
    //and so on
]

现在，我想根据我在别处设置的动态变量(例如“show_filter”)过滤此ng-repeated 数组。

如果“show_filter”设置为“all”，我想显示所有对象。如果它设置为 false( bool 值)，那么我想显示“value”键设置为 false 的对象。当“show_filter”设置为 true 时也是如此。

所以，有两种方法:

<强>1。构建自定义过滤器:

我会像这样为过滤任务编写自定义过滤器:

过滤器:

app.filter('filterArr', function() {
    return function(arr, show_filter) {
        var filtered_arr = [];
        if(show_filter != 'All') { //if show_filter is a boolean value
            for(var i = 0; i < arr.length; i++) {
                if(arr[i].value == show_filter) { 
                    filtered_arr.push(arr[i]);
                }
            }
            return filtered_arr;
        }
        else {
            return arr; //return the entire array if show_filter is set to 'All'
        }
    }
})

模板:

obj in arr | filterArr : show_filter

<强>2。在 Controller 中写一个过滤函数:

过滤器:

$scope.filterObjects = function(arr) {
    var filtered_arr = [];
    if($scope.show_filter != 'All') { //if $scope.show_filter is a boolean value
        for(var i = 0; i < arr.length; i++) {
            if(arr[i].value == $scope.show_filter) { 
                filtered_arr.push(arr[i]);
            }
        }
        return filtered_arr;
    }
    else {
        return arr; //return the entire array if show_filter is set to 'All'
    }
}

模板:

obj in filterObjects(arr)

以上两种方法中哪一种会更快？我已经看到每次摘要循环都会执行自定义过滤器代码，而不仅仅是对 $scope.show_filter，这让我相信它效率很低。虽然我不确定这两种方式之间哪种方式更快。<​​/p>

Answer 1

这两个函数将在每个摘要循环中被调用。这对于第二个函数来说有些明显。 filterObjects(arr) 的返回值在每次调用时可能不同。

为什么在每个摘要周期中都会调用一个过滤器 并不是很明显。文档说明如下:

The filter function should be a pure function, which means that it should be stateless and idempotent. Angular relies on these properties and executes the filter only when the inputs to the function change.

因此，如果 arr 和 show_filter 都没有改变，那么就不应该调用过滤器，对吧？但这里有一个问题:检测 arr 中的变化代价高昂。

Angular 必须复制数组以将其与当前内容进行比较。即使什么都没有改变，也必须比较每一个项目。如果项目是对象，则必须比较它们的每个属性。直接调用过滤器要便宜得多。当过滤器应用于数组(或对象)时，这就是 Angular 所做的。

要加快应用程序的速度，您有两种选择。第一个是仅在必要时过滤数组并将过滤后的数组公开给 ng-repeat。例如。如果您可以输入一个值来过滤数组，则只要该值发生变化就过滤数组。

如果数组和过滤器都没有改变(所以不是你的情况)，可以使用第二种选择。然后你可以使用一次性绑定(bind):

<li ng-repeat="item in ::array | filter">

当您有一组固定的项目并希望按名称对它们进行排序时，这很有用，例如在这种情况下，过滤器只会被调用一次。