Angular 过滤器中的 forEach 未返回

Question

我有一个过滤器可以将 BPM 整数转换为正确的拉丁词。

最初我对每个拉丁术语都有一个 if else 语句，但现在正在重构以使其更易于维护。

这是我想出的：

angular.module('app').filter('latinTerm', function() {
    var terms = [
        {
            min: 0,
            max: 41,
            term: "Grave"
        },
        {
            min: 40,
            max: 60,
            term: "Largo"
        },
        {
            min: 59,
            max: 66,
            term: "Larghetto"
        }
    ]

    return function(value) {
        angular.forEach(terms, function(term) {
            if (value > term.min && value < term.max) {
                return value;
            }
        });
    }
});

但这 return 没有任何意义，即使该值介于所提供的值之间。

从这个意义上说，我是不是用错了过滤器？或者它可以调整工作吗？

谢谢。

Answer 1

当你需要打破循环时你不能使用 forEach 和 return 因为它不会中断。您可以使用老式 for 循环来实现它。

引用 Array.prototype.forEach | MDN,

There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool, use a plain loop instead.

像这样：

angular.module('app').filter('latinTerm', function() {
    var terms = [
        {
            min: 0,
            max: 41,
            term: "Grave"
        },
        {
            min: 40,
            max: 60,
            term: "Largo"
        },
        {
            min: 59,
            max: 66,
            term: "Larghetto"
        }
    ]

    return function(value) {
        for(var i = 0; i < terms.length; i++) {
            if (value > terms[i].min && value < terms[i].max) {
                return value;
            }
        }
    }
});

Answer 2

您不能 return 在 foreach 内部，因为它不会在 each 内部中断。您可以做的一件事是根据条件为变量赋值或使用 for 循环

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.values = [21,331,12,44,1111]
}).filter('latinTerm', function() {
    var terms = [
        {
            min: 0,
            max: 41,
            term: "Grave"
        },
        {
            min: 40,
            max: 60,
            term: "Largo"
        },
        {
            min: 59,
            max: 66,
            term: "Larghetto"
        }
    ]

    return function(value) { 
          var result = [];
          angular.forEach(terms, function(term) {
            if (value > term.min && value < term.max) {
                result.push( value); 
            }
          });
        return result[0]
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div ng-repeat="item in values">{{item | latinTerm}}</div>
</div>

Answer 3

如果你仍然需要使用angular.forEach（它发生了），只需使用一个变量：

return function(value) {
    var returnValue;
    angular.forEach(terms, function(term) {
        if (value > term.min && value < term.max) {
            returnValue = value;
        }
    });
    return returnValue;
}

Angular 过滤器中的 forEach 未返回

forEach in Angular filter not returning

angularjs

angularjs-filter