Javascript 过滤JS问题

我想对输入进行过滤，然后显示不同的结果。 但正如您在console.log输出中看到的，它更改了我的this.data.stationInfo.stations数组。 过滤器应该创建一个新数组，而不是更改我从中读取的数组。我认为问题在于这个的使用？有人知道怎么解决吗

onTextChanged: function () {
            let copy = this.data.stationInfo.stations;
            console.log("this.data.stationInfo.stations.length", this.data.stationInfo.stations.length);
            copy  = copy
                .filter(el => {
                    return el.eng站名.toLowerCase().startsWith(this.data.searchBar.search.toLowerCase())
                    ||
                        el.站名.toLowerCase().startsWith(this.data.searchBar.search.toLowerCase())
                    ||
                        el.traWebsiteCode.startsWith(this.data.searchBar.search.toLowerCase())
                });
            this.data.resultDetails.stations = copy;
            console.log("copy.length", copy.length);
            console.log("after copy.length this.data.stationInfo.stations.length", this.data.stationInfo.stations.length);
        },

console.log输出：

JS:'this.data.stationInfo.stations.length'239

JS:'copy.length'4

JS:'after copy.length this.data.stationInfo.stations.length'4

JS:'this.data.stationInfo.stations.length'4

JS:“copy.length”0

JS:“在copy.length this.data.stationInfo.stations.length”0之后

JS:'this.data.stationInfo.stations.length'0

JS:“copy.length”0

JS:“在copy.length this.data.stationInfo.stations.length”0之后

JS:'this.data.stationInfo.stations.length'0

JS:“copy.length”0

JS:“在copy.length this.data.stationInfo.stations.length”0之后

更新：

---

NativeScript游乐场：

您不应该创建引用。实际上，您需要设置一个对原始数组的引用，然后针对您的副本的所有突变都将反映在原始数组上

onTextChanged: function () {
            console.log("this.data.stationInfo.stations.length", this.data.stationInfo.stations.length);
            let newArray  = this.data.stationInfo.stations
                .filter(el => {
                    return el.eng站名.toLowerCase().startsWith(this.data.searchBar.search.toLowerCase())
                    ||
                        el.站名.toLowerCase().startsWith(this.data.searchBar.search.toLowerCase())
                    ||
                        el.traWebsiteCode.startsWith(this.data.searchBar.search.toLowerCase())
                });
            this.data.resultDetails.stations = newArray;
            console.log("copy.length", copy.length);
            console.log("after copy.length this.data.stationInfo.stations.length", this.data.stationInfo.stations.length);
        }

我还建议您改进代码，并在一个地方完成所有需要的工作。您可以迭代数组并直接排除所有需要的桩号。这里有一个例子：

onTextChanged: function () {
const stations = this.data.stationInfo.stations;
function doSearch(el,str) {
    return 
        el.eng站名.toLowerCase().startsWith(str) ||
        el.站名.toLowerCase().startsWith(str) ||
        el.traWebsiteCode.startsWith(str);
}

for(let j=0; j < stations.length; j++){
    if(!doSearch(stations[j], this.data.searchBar.search.toLowerCase())){
        stations.splice(j, 1);
    }
}

console.log(stations);
}

---

我尝试了您的解决方案，我需要为变量this.data.resultDetails.stations=stations指定桩号；但是当我再试一次的时候。我的意思是删除输入和键入另一个单词this.data.stationInfo.stations的长度不再是原始的请查看console.log输出在这种情况下，请创建一个工作示例，我将提供帮助，因为从我的角度来看，它现在应该可以正常工作。因此，是否要执行自动完成？因此不应在data.resultDetails.stations中为=项使用此.data.stationInfo.stations。我的建议是在上面的级别上创建一个类似smth的filteredStations的副本，并在html模板中使用这个变量。