简体   繁体   English

AngularJS过滤器中的突变数组

[英]Mutated Array in AngularJS Filter

I have this custom AngularJS filter containing a few conditions. 我有一个包含一些条件的自定义AngularJS过滤器。 In my else condition I am splicing values out of an array and returning that array. 在我的else条件下,我将值从数组中拼接出来并返回该数组。

Here's my issue: Splicing values out of the array in the else condition mutates the array, and if the if condition is invoked afterwards, it no longer processes the original complete and pristine array, but only a partial array containing the remaining indexes after it's been spliced. 这是我的问题:在else条件中将值拼接出数组会改变该数组,如果之后调用if条件,它将不再处理原始的完整数组和原始数组,而仅处理包含剩余索引的部分数组拼接。

How can I correct this to ensure that I'm working on a complete dataset each time the filter is run? 我该如何纠正这个问题,以确保每次运行过滤器时都在处理完整的数据集? I tried working with a copy of the array (using var newArr = items.splice(0) )in the else block, but for whatever reason the issue remains. 我尝试在else块中使用数组的副本(使用var newArr = items.splice(0) ),但是无论出于何种原因,问题仍然存在。

One option is to build a new array in the else condition and return that, rather than chipping away at the original array. 一种选择是在else条件下构建一个新数组,然后返回该数组,而不是破坏原始数组。 However since I'm dealing with a complex multi-nested data structure, for simplicity's sake I'm looking for a solution where I can remove values. 但是,由于我要处理的是复杂的多嵌套数据结构,为了简单起见,我正在寻找一种可以删除值的解决方案。

angular.module("app", []).
filter('department', function() {
  return function(items, args) {
    var filtered;
    var output = [];

    // return all items when 'All Departments' selected              
    if (args.selectedDepartment.Name == 'All Departments' && args.selectedDepartment.Id === undefined) {
      return items;
    }

    // return orders containing products from selected department with 'Inclusive' option
    if (args.selectedDepartment.Id !== undefined && !args.option) {
      for (let i = 0; i < items.length; i++) {
        filtered = items[i].products.filter(function(item) {
          return item.Order__r.Department__r.Id == args.selectedDepartment.Id;
        });
        if (filtered.length >= 1) {
          output.push(items[i]);
        }
      }

      // return only products which are an exact match to the selected department with 'Exclusive' option
    } else if (args.selectedDepartment.Id !== undefined && args.option) {

      for (let i = 0; i < items.length; i++) {
        for (let j = 0; j < items[i].products.length; j++) {
          if (items[i].products[j].Order__r.Department__r.Id != args.selectedDepartment.Id) {
            items[i].products.splice(j, 1);
          }
        }
        if (items[i].products.length === 0) {
          items.splice(i, 1);
        }
      }

      return items;
    }
    return output;
  };
})

Removing an element from the given array is a mutating operation. 从给定数组中删除元素是一种变异操作。

Another approach would be to implement a non-mutating element removal. 另一种方法是实现非变异元素去除。 Instead of directly modifying the input array, the remove function below could return a new array that contains all elements except the specified one: 代替直接修改输入数组,下面的remove函数可以返回一个包含除指定元素以外的所有元素的新数组:

function remove(array, element) {
    return array.filter(e => e !== element);
}
const vowelsAndX = ["a", "e", "i", "o", "u", "x"];
const vowels = remove(vowelsAndX, "x");
vowels.toString(); // "a,e,i,o,u"

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM