javascript - 从aurelia类的所有数组中删除的元素

我正在为成员编写一个简单的过滤器“搜索”功能。我有2个数组属性，一个是members，这是所有成员的列表，另一个是filteredMembers，这是成员的过滤后的列表：

getMembers() {
    return this.userService.getMembers(this.authUser.selectedCompany).then(data => {
        if (data.statusCode === 200) {
            this.members = data.content.users.sort(function (a, b) {
                if (a.firstName < b.firstName) return -1;
                if (a.firstName > b.firstName) return 1;
                return 0;
            });

            this.filteredMembers = this.members;
        }
    }).catch(err => {
        console.log('error getting members:', err.response);
    });
}

由于尚未进行任何过滤，因此我只将filteredMembers设置为等于members。到目前为止，一切都很好。

现在，我可以进行带有keyup事件的输入搜索，该事件可以根据我在搜索框中输入的内容过滤成员：

<input type="search" value.bind="searchQuery" keyup.delegate="filterMembers()">

和功能：

filterMembers() {
    if(!this.searchQuery) {
        this.filteredMembers = this.members;
        return;
    }
    let filteredCount = this.filteredMembers.length;
    for (var i = 0; i < filteredCount; i++) {
        if (this.filteredMembers[i].lastName.toLowerCase().indexOf(this.searchQuery.toLowerCase()) == -1) {
            this.filteredMembers.splice(i, 1);
        }
    }
}

因此，您可以在函数中看到，我只是检查是否在成员的姓氏中找不到用户在搜索框中键入的内容，然后从filteredMembers数组中删除该成员。如果搜索查询为空，则再次使filteredMembers等于members。

这是我出于某种原因遇到的问题，可能是Aurelia中的错误，也可能是人为错误，但是当我从filteredMembers中删除​​元素时，它也在从members数组中删除它。我尝试了各种变体，例如在该初始filteredMembers函数中不将members设置为等于getMembers()。

最佳答案

如果filteredMembers和members是相同的数组实例，则元素删除将反映在这两个属性中，因为这两个属性都是对同一数组实例的引用。

将members数组浅克隆后再将其分配给filteredMembers。

更改此：

if(!this.searchQuery) {
    this.filteredMembers = this.members;
    return;
}

对此：

if(!this.searchQuery) {
    this.filteredMembers = this.members.slice(0);
    return;
}