Question

我希望过滤数组而不更改我已切片的原始数组。你可以看到我在filterChange函数中做的第一件事就是从原始数组中拼接。最初的阵列最终也会改变，我不明白为什么。

Intent

Answer 1

如果你想过滤数组并使用过滤后的内容创建一个新的数组，并保留旧数据，我建议

newArray = oldArray.filter(function(item) { return item.wantThis === true; })

现在你有newArray只包含那些具有属性

的对象

item.wantThis === true

在您的示例中，您使用slice()，根据我的经验，它看起来非常像splice()（可以改变数组）。

我建议您坚持使用filter()。

但你为什么要制作这么多切片？

如果您在收到的数组中发布了一个Object示例，那将会有所帮助。

表单看着你的例子，如果你将代码的活动部分改为......，则filterItems似乎是前一个ForEach循环的私有var。

   module.filterChange = function (filterText) {

    var filteredMenuItems = module.menuItems.slice(0);

    var filteredItems; // declare the var outside of the .forEach

        filteredMenuItems.forEach(function (item, index) {
            filteredItems = item.MenuItems.filter(function (el) {
            return (el.MenuText.includes(filterText));
        });
        filteredMenuItems[index].MenuItems = filteredItems;
    })
    _template(filteredMenuItems); 
}

它可能有用。

您的filteredItems的效果是..

   filteredMenuItems.forEach(function(item) {
    item.MenuItems = item.MenuItems
                            .filter(function(el) { return (el.MenuText.includes(filterText)); });
    })

所以你的item.MenuItems会随着每个过滤器变小。

Answer 2

所以看来我并不理解拼接。特别是浅方面。因为我想要过滤数组的子数组，我试图复制我最终没有得到一个真正的副本。

不是复制数组而是创建一个新数组并将过滤器的结果推送到它。使用原始数组中未过滤的属性。

module.filterChange = function (filterText) {
    var filteredMenuItems = [];
    module.menuItems.forEach(function (item, index) {
        var filteredItems = item.MenuItems.filter(function (el) {
            return (el.MenuText.includes(filterText));
        });
        filteredMenuItems.push({
            HeaderText: item.HeaderText,
            ID: item.ID,
            MenuItems: filteredItems
        })
    })
    _templateOnChange(filteredMenuItems); 
}

Javascript在保持原始数组的同时过滤数组中的深层数组

2 个答案: