Question

我遇到以下代码的问题，也许我只是不了解过滤器的工作原理。从我的理解过滤器应该返回一个新的数组。 filteredItems是我在DOM中执行* ngFor的内容。所以我首先使用slice方法将我的输入项数组的浅表副本放入我的filteredItems和copyItems中。之后，我尝试从浅复制的items数组中返回一个新的过滤项数组。但是，每当我尝试过滤项目数组时，它实际上操纵原始数组的数据，而不是只返回一个包含我需要的数据的新数组。

@Input() private items: Items[];

private copyItems = new Array<Items>();

public input = new FormControl();
public filteredItems = new Array<Items>();

ngOnInit() {
  this.filteredItems = this.items.slice();
  this.copyItems = this.items.slice();

  this.subscription = this.input.valueChanges
    .debounceTime(500)
    .distinctUntilChanged()
    .map((value) => {
      return value;
    })
    .subscribe((searchTerm) => {
      if (searchTerm) {
        this.filteredItems = this.filterItems(searchTerm.toLowerCase());
        console.log(this.items);
      } else {
        this.copyItems = this.items.slice();
        this.filteredItems = this.items.slice();
      }
    });
}

private filterItems(searchTerm: string): Array<Items> {
  return this.copyItems.filter((item) => {
    let filterExists: boolean = false;
    let itemName = <string>item.name;
    if (itemName.toLowerCase().startsWith(searchTerm)) {
      filterExists = true;
    }

    let filteredChildren =  this.filterChildren(searchTerm, item);

    if (filteredChildren.length > 0) {
      filterExists = true;
      item.children = filteredChildren;
    }

    if (filterExists)
      return true;
    else
      return false;
  });
}

private filterChildren(searchTerm: string, item: Items): Array<ChildItems> {
  return item.children.filter(child => {
    let childName = <string>child.name;
    if (childName.toLowerCase().startsWith(searchTerm)) {
      return child;
    }
  });
}

有人可以告诉我，我在这里做错了什么。在过去的两天里，我一直在我的办公桌上反复修改这个问题并且无法解决这个问题。

提前致谢！

Answer 1

filter确实创建了一个新数组，但原始引用的对象也被新数组引用，因此通过它们可以看到对它们的更改。

如果您要更改数组中项目的状态并且不希望通过旧数组显示该更改，则需要创建 new 项并在阵列。那将是map而不是filter - 或者更确切地说，在你的情况下，是两者的组合。

以下是您目前正在做的更简单的示例;请注意state如何成为2，无论我们在哪个数组中查看它：

var original = [
  {id: 1, state: 1},
  {id: 2, state: 1},
  {id: 3, state: 1}
];
var filtered = original.filter(item => {
  if (item.id % 2 == 1) {
    ++item.state;
    return item;
  }
});
console.log("original", original);
console.log("filtered", filtered);

.as-console-wrapper {
  max-height: 100% !important;
}

坚持使用现有的Array.prototype函数，您进行变异过滤的方式是使用map然后filter删除undefined条目：

var original = [
  {id: 1, state: 1},
  {id: 2, state: 1},
  {id: 3, state: 1}
];
var filtered = original
  .map(item => {
    if (item.id % 2 == 1) {
      return {id: item.id, state: item.state + 1};
    }
  })
  .filter(item => !!item);
console.log("original", original);
console.log("filtered", filtered);

.as-console-wrapper {
  max-height: 100% !important;
}

或者，你可以给自己一个mapFilter函数：

Object.defineProperty(Array.prototype, "mapFilter", {
  value: function(callback, thisArg) {
    var rv = [];
    this.forEach(function(value, index, arr) {
      var newValue = callback.call(thisArg, value, index, arr);
      if (newValue) {
        rv.push(newValue);
      }
    })
    return rv;
  }
});
var original = [
  {id: 1, state: 1},
  {id: 2, state: 1},
  {id: 3, state: 1}
];
var filtered = original
  .mapFilter(item => {
    if (item.id % 2 == 1) {
      return {id: item.id, state: item.state + 1};
    }
  });
console.log("original", original);
console.log("filtered", filtered);

.as-console-wrapper {
  max-height: 100% !important;
}

...但是有关扩展内置原型的所有注意事项都适用（您可能会将其作为传递数组的实用程序）。

filter是不是在创建一个新数组？

1 个答案: