本文介绍在JavaScript中处理多层嵌套数组数据的方法。针对深层嵌套结构，通过遍历与过滤操作，精准定位并删除指定层级对象中的特定元素。文章提供了两种主要思路：一是构建新数组，二是直接修改原数据结构，并附带递归处理示例，帮助开发者高效解决复杂数据结构的清洗问题。
JavaScript 中处理多层嵌套数组时，有时需要删除最后一层中的部分数据。
具体需求是：在数组 arr 中，找到第二个对象内的 aList 属性，并从中移除 id 为 153、name 为 'daad' 的元素。
const arr = [
{
id: 1,
name: 'llaq',
aList: [
{
id: 20,
name: 'hdka',
},
{
id: 12,
name: 'loqas',
},
]
},
{
id: 2,
name: '略略略',
aList: [
{
id: 21221,
name: 'dqd',
},
{
id: 152,
name: 'daad',
},
{
id: 19522,
name: 'kka',
},
]
},
{
id: 3,
name: '哐哐哐',
aList: [
{
id: 32,
name: '32',
},
{
id: 132,
name: '32daa',
},
{
id: 1232,
name: 'da',
},
]
},
]
// id是aList中要删除的id
const handleClose = (id: number) => {
const list = arr.map(item => {
//修改被删除的item的数据
item.aList = item?.aList?.filter(v => v.id !== id);
return item;
})
console.log(list,'list');
};对于多层嵌套的数组，我们可以遍历每一层数据，既可以生成一个新的数组结构，也可以直接修改内部数据的值。
具体的数据结构示例如下。
data: [{
id: 0,
name: "1",
children: [{
id: 0 - 1,
name: "0-1",
children: [{
id: 0 - 1 - 1,
name: "0-1-1",
children: [{...}]
}]
}]
}]这种结构的特点是数组内部包含数组，且层级可能继续向下延伸，形成树状或深层嵌套形式。
针对此类问题的处理方法主要有以下几种。
tree(res) {
for (const item of res) {
//这里可以处理很多数据，比如遍历一个数据数组匹配数据更改数据
item.label = item.name;//如果label存在就是改变值，如果不存在就是往数组里面添加了一条新数据
//如果item.children存在，就再调用一次函数，传数组给他，直到没有儿子结束
if (item.children) {
this.tree(item.children);
}
}
},第一种方法是遍历并构建新数组。
tree(res,list) {
for (const item of res) {
list.push(item.id)
if (item.children) {
this.tree(item.children,list);
}
}
},具体实现时，传入原数组以及用于存储结果的新数组。通过循环遍历，将处理后的数据 push 到新数组中，直到遍历条件不满足为止。
总结来说，处理嵌套数据需根据实际需求选择生成新数组或直接修改原数据的方式。
以上为个人经验分享，希望能为大家提供参考，也希望大家多多支持本站。