Angularjs 为什么splice不删除angular.forEach中的所有项目？_Angularjs

Angularjs 为什么splice不删除angular.forEach中的所有项目？

angularjs

Angularjs 为什么splice不删除angular.forEach中的所有项目？,angularjs,Angularjs,在下面的代码中，当我单击“删除所有过期的”按钮时，为什么它只删除状态=过期的4个客户对象中的3个 <html ng-app="mainModule"> <head> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/an

在下面的代码中，当我单击“删除所有过期的”按钮时，为什么它只删除状态=过期的4个客户对象中的3个

<html ng-app="mainModule">
    <head>
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    </head>    
    <body ng-controller="mainController" style="padding: 20px 0">

        <div class="col-lg-4">
            <table class="table-striped table-bordered table table-hover">
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Status</th>
                </tr>
                <tr ng-repeat="customer in customers| orderBy: 'lastName'">
                    <td>{{customer.firstName}}</td>
                    <td>{{customer.lastName}}</td>
                    <td ng-click="switchStatus(customer)" ng-class="{'text-danger': customer.status == 'expired'}" class="prohibitSelectionClickable">{{customer.status}}</td>
                </tr>
            </table>
            <button ng-click="deleteAllExpired()">Delete all expired</button>
        </div>

        <script>
                    var mainModule = angular.module('mainModule', []);
                            function mainController($scope) {

                                $scope.customers = [
                                    {id: 1, status: 'expired', firstName: 'Joe', lastName: 'Thompson'},
                                    {id: 2, status: 'expired', firstName: 'Hank', lastName: 'Howards'},
                                    {id: 3, status: 'expired', firstName: 'Clara', lastName: 'Okanda'},
                                    {id: 4, status: 'active', firstName: 'Thomas', lastName: 'Dedans'},
                                    {id: 5, status: 'expired', firstName: 'Zoe', lastName: 'Frappe'}
                                ];

                                $scope.deleteAllExpired = function () {
                                    angular.forEach($scope.customers, function (customer, index) {
                                        if (customer.status == 'expired') {
                                            $scope.customers.splice(index, 1);
                                        }
                                    });
                                };

                            }
        </script>
    </body>
</html>


名字
姓
地位
{{customer.firstName}
{{customer.lastName}
{{customer.status}
删除所有过期的
var mainModule=angular.module（'mainModule'，[]）；
功能主控制器（$scope）{
$scope.customers=[
{id:1，状态：'expired'，名：'Joe'，姓：'Thompson'}，
{id:2，状态：'expired'，名：'Hank'，姓：'Howards'}，
{id:3，状态：'expired'，名字：'Clara'，姓氏：'Okanda'}，
{id:4，状态：'active'，名：'Thomas'，名：'Dedans'}，
{id:5，状态：'expired'，名字：'Zoe'，姓氏：'Frappe'}
];
$scope.deleteAllExpired=函数（）{
angular.forEach（$scope.customers，function（customer，index）{
如果（customer.status==“过期”）{
$scope.customers.splice（索引1）；
}
});
};
}

这是因为您迭代的数组在迭代过程中发生了更改（由于删除），并且不会遍历所有项。将方法更改为：

$scope.deleteAllExpired = function () {

    var i = $scope.customers.length;

    while (i--) {
        var customer = $scope.customers[i];

        if (customer.status == 'expired') {
            $scope.customers.splice(i, 1);
        }
    }   
};

这是因为您迭代的数组在迭代过程中会发生更改（由于删除），并且不会遍历所有项。将方法更改为：

$scope.deleteAllExpired = function () {

    var i = $scope.customers.length;

    while (i--) {
        var customer = $scope.customers[i];

        if (customer.status == 'expired') {
            $scope.customers.splice(i, 1);
        }
    }   
};

最可能的原因是

splice（）

变异了数组，并且

angular.forEach（）

使用了无效索引。更好地执行海事组织：

$scope.deleteAllExpired = function () {
    var newCustomers = [];
    angular.forEach($scope.customers, function (customer) {
        if (customer.status !== 'expired') {
            newCustomers.push(customer);
        }
    });
    $scope.customers = newCustomers;
};

您甚至可以获得性能提升，而不是太多的突变（对于小数据集来说，这可能可以忽略不计）。

最可能的原因是

splice（）

突变了数组，并且

angular.forEach（）

使用了无效索引。更好地执行海事组织：

$scope.deleteAllExpired = function () {
    var newCustomers = [];
    angular.forEach($scope.customers, function (customer) {
        if (customer.status !== 'expired') {
            newCustomers.push(customer);
        }
    });
    $scope.customers = newCustomers;
};

您甚至可以获得性能提升，而不是太多的突变（对于小型数据集来说，这可能可以忽略不计）。

$scope.customers=$scope.customers.filter（函数（customer）{return customer.status！='expired'；}）

$scope.customers=$scope.customers.filter（函数（customer）{return customer.status！='expired'；}）当我尝试此操作时，当我简单地分配$scope.customers=newCustomers
时，它不会更新UI，难道它不应该自动执行此操作吗？为什么要使用forEach，您也可以使用过滤器，可能使用本机api实现效率更低、效率更高的代码……）当然还需要补充。但上一个答案中的while更有效though@PSL当然，只是试着在开场白的代码上做更少的修改。注意：filter
返回一个新数组，您仍然必须将其分配给$scope.customers
（如上面的newCustomers
。@NikosParaskevopoulos这就是我所说的，它已经在本机上可用了，为什么要重新发明轮子呢当我尝试此操作时，当我简单地分配$scope.customers=newCustomers
时，它不会更新UI，难道它不应该自动执行此操作吗？为什么要使用forEach，您也可以使用过滤器，可能使用本机api来实现效率更低、效率更高的代码……）当然还需要补充。但上一个答案中的while更有效though@PSL当然，只是试着在开场白的代码上做更少的修改。注意：filter
返回一个新数组，您仍然必须将其分配给$scope.customers
（如上面的newCustomers
。@NikosParaskevopoulos这就是我所说的，它已经在本机上可用了，为什么要重新发明轮子呢