Javascript 阵列中的滤波器阵列故障

基本上，我正在尝试创建一个搜索，在另一个数组中的数组中搜索关键字，如下面的示例所示

let BASKETS=[
{
篮名：“一”，
篮子物品：[
{
项目名称：“香蕉”
},
{
项目名称：“苹果”
}
]
},
{
篮筐名称：“两个”，
篮子物品：[
{
项目名称：“香蕉”
},
{
项目名称：“橙色”
}
]
},
{
篮筐名称：“三”，
篮子物品：[
{
项目名称：“香蕉”
},
{
商品名称：“葡萄”
}
]
},
{
篮筐名称：“四”，
篮子物品：[
{
项目名称：“西瓜”
},
{
项目名称：“梨”
}
]
}
]
让篮子=[…篮子]；
函数listenForInput（）{
const input=document.querySelector（“#input”）；
input.addEventListener（'keydown'，（）=>{
搜索（输入值）；
});
}
函数搜索（术语）{
for（设i=0；i<0.length；i++）{
let basketItems=[…篮子[i]。basketItems]
篮子[i].basketItems=basketItems.filter（x=>x.itemName.includes（term））；
}
console.clear（）；
控制台.原木（篮）；
}
listenForInput（）
数组和对象通过引用传递。在本例中，将修改实际阵列源。数组结构进行浅层克隆。您可能需要深入克隆阵列源，或者只需使用阵列过滤器，这样就不会修改实际的阵列源

希望这能有所帮助。
您应该使用
输入
事件，而不是
按键
，如下所示：


let BASKETS=[
{
篮名：“一”，
篮子物品：[
{
项目名称：“香蕉”
},
{
项目名称：“苹果”
}
]
},
{
篮筐名称：“两个”，
篮子物品：[
{
项目名称：“香蕉”
},
{
项目名称：“橙色”
}
]
},
{
篮筐名称：“三”，
篮子物品：[
{
项目名称：“香蕉”
},
{
商品名称：“葡萄”
}
]
},
{
篮筐名称：“四”，
篮子物品：[
{
项目名称：“西瓜”
},
{
项目名称：“梨”
}
]
}
]
让篮子=[…篮子]；
函数listenForInput（）{
const input=document.querySelector（“#input”）；
addEventListener（'input'，（）=>{
搜索（输入值）；
});
}
函数搜索（术语）{
baskets=baskets.filter（b=>b.basketItems.filter（bi=>bi.itemName.includes（term））.length）；
console.clear（）；
控制台.原木（篮）；
}
listenForInput（）
你不需要一个深度克隆大锤来完成这个任务-


const search=（query=”“）=>
{常数结果=
数据
.flatMap（（{basketName=”“，basketItems=[]}）=>
篮子物品
.filter（（{itemName=”“}）=>
itemName.includes（查询）
)
.map（r=>（{basketName，…r}））
)
console.log（'--'，result）
}
常量数据=
[{basketName:'one'，basketItems:[{itemName:'banana'}，{itemName:'apple'}]}，{basketName:'two'，basketItems:[{itemName:'banana'}，{itemName:'orange'}，{basketName:'banana'}，{itemName:'grapes'}，{basketName:'four'，basketItems:[{itemName:'西瓜'}，{itemName:'pear'}]
常量输入=
document.querySelector（'input'）
input.addEventListener（'keyup'，=>search（input.value））
谢谢，我通过使用lodash
cloneDeep
方法解决了这个问题。几乎不需要浅克隆，更不用说深克隆了…@谢谢，如果是这样的话，那么请给出你如何解决这个问题的答案。filter（（item）=>{return item.filter（//等等）}。只有在内部筛选方法else false中的项名称匹配时，外部返回才应为true。