提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
js如何实现删除某个文件及其所有的子级文件、子级的子级文件…
js如何通过递归实现多叉树的遍历呢？
一、实现的效果/功能
说明：删除图片这个目录及其所有的子级目录
二、如何实现？
1.首先看一下数据表的数据机构：
//部分代码
const arr = [
{
"_id": "60e66c854cb0900001598c46",
"father_id": "//:",
"file": {
"name": "图片",
"fileType": "fileder",
"url": "",
"size": "未知"
},
"createTime": 1625713795988,
"sort": 100
},
{
"_id": "60e66c8bacc1cf00011fff2f",
"father_id": "60e66c854cb0900001598c46",
"file": {
"name": "imgs",
"fileType": "fileder",
"url": "",
"size": "未知"
},
"createTime": 1625713802650,
"sort": 100
},
{
"_id": "60e66c92e22fbe0001adf45f",
"father_id": "60e66c8bacc1cf00011fff2f",
"file": {
"name": "2.jpg",
"fileType": "image/jpeg",
"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a3eacf9e-6821-4c0d-b2ca-3efa3779ac92/f7ae9b6e-3e06-4b88-9587-61e54c4f9dfa.jpg",
"size": 22288
},
"createTime": 1625713809055
},
{
"_id": "60e6770dacc1cf0001203d50",
"father_id": "60e66c8bacc1cf00011fff2f",
"file": {
"name": "4.jpg",
"fileType": "image/jpeg",
"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a3eacf9e-6821-4c0d-b2ca-3efa3779ac92/a2a84ea2-5945-4bb1-b9c7-065e7246cd8b.jpg",
"size": 25730
},
"createTime": 1625716492032
},
{
"_id": "60e69e7cf6a398000198098b",
"father_id": "60e66c8bacc1cf00011fff2f",
"file": {
"name": "3.jpg",
"fileType": "image/jpeg",
"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a3eacf9e-6821-4c0d-b2ca-3efa3779ac92/13da3630-a1e7-45cf-9e15-d137cb23f22d.jpg",
"size": 16885
},
"createTime": 1625726586149
}
{
"_id": "60e6772eacc1cf0001203e1b",
"father_id": "60e677249dad8500018b082c",
"file": {
"name": "微信图片_20210706115238.png",
"fileType": "image/png",
"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a3eacf9e-6821-4c0d-b2ca-3efa3779ac92/19b5dccd-d66f-4471-9475-fc4f56a74bbe.png",
"size": 34141
},
"createTime": 1625716525580
}
]
结构说明：每一条数据都有一个"_id"以及“father_id”，"_id"是每条数据的id具有唯一性(相当于主键)，“father_id"是上级目录的”_id"
2.具体实现代码(全部代码)
//这是从数据表中随便复制的几条数据
const arr = [
{
"_id": "60e66c854cb0900001598c46",
"father_id": "//:",
"file": {
"name": "图片",
"fileType": "fileder",
"url": "",
"size": "未知"
},
"createTime": 1625713795988,
"sort": 100
},
{
"_id": "60e66c8bacc1cf00011fff2f",
"father_id": "60e66c854cb0900001598c46",
"file": {
"name": "imgs",
"fileType": "fileder",
"url": "",
"size": "未知"
},
"createTime": 1625713802650,
"sort": 100
},
{
"_id": "60e66c92e22fbe0001adf45f",
"father_id": "60e66c8bacc1cf00011fff2f",
"file": {
"name": "2.jpg",
"fileType": "image/jpeg",
"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a3eacf9e-6821-4c0d-b2ca-3efa3779ac92/f7ae9b6e-3e06-4b88-9587-61e54c4f9dfa.jpg",
"size": 22288
},
"createTime": 1625713809055
},
{
"_id": "60e6770dacc1cf0001203d50",
"father_id": "60e66c8bacc1cf00011fff2f",
"file": {
"name": "4.jpg",
"fileType": "image/jpeg",
"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a3eacf9e-6821-4c0d-b2ca-3efa3779ac92/a2a84ea2-5945-4bb1-b9c7-065e7246cd8b.jpg",
"size": 25730
},
"createTime": 1625716492032
},
{
"_id": "60e69e7cf6a398000198098b",
"father_id": "60e66c8bacc1cf00011fff2f",
"file": {
"name": "3.jpg",
"fileType": "image/jpeg",
"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a3eacf9e-6821-4c0d-b2ca-3efa3779ac92/13da3630-a1e7-45cf-9e15-d137cb23f22d.jpg",
"size": 16885
},
"createTime": 1625726586149
},
{
"_id": "60e677165c44840001087275",
"father_id": "60e66c854cb0900001598c46",
"file": {
"name": "icons",
"fileType": "fileder",
"url": "",
"size": "未知"
},
"createTime": 1625716500940,
"sort": 100
},
{
"_id": "60e6771b8a69dc0001e4b35a",
"father_id": "60e677165c44840001087275",
"file": {
"name": "1.png",
"fileType": "image/png",
"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a3eacf9e-6821-4c0d-b2ca-3efa3779ac92/725bdbb1-15fd-451b-84c7-9b4fe9c1eae0.png",
"size": 118235
},
"createTime": 1625716506809
},
{
"_id": "60e677249dad8500018b082c",
"father_id": "//:",
"file": {
"name": "musics",
"fileType": "fileder",
"url": "",
"size": "未知"
},
"createTime": 1625716515809,
"sort": 100
},
{
"_id": "60e6772eacc1cf0001203e1b",
"father_id": "60e677249dad8500018b082c",
"file": {
"name": "微信图片_20210706115238.png",
"fileType": "image/png",
"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a3eacf9e-6821-4c0d-b2ca-3efa3779ac92/19b5dccd-d66f-4471-9475-fc4f56a74bbe.png",
"size": 34141
},
"createTime": 1625716525580
}
]
//装取其目录下的所有子级数据
let alls = [];
/**
* 通过id查找其子级以及子级的子级以及...
* @param {Arrow} directory 当前目录
* @param {*} count
*/
function gets(directory, count = 2) {
let temp = [];//用于装取当前_id下的子级元素
directory.forEach(ite => {
arr.forEach((item, index) => {
// 判断数据中是否有当前的子级元素
if (item.father_id == ite._id) {
temp.push(item);
// 性能优化：如果当前文件不是文件夹类型，就将其删除，减少后面arr的遍历。
// item.file.fileType != 'fileder' ? arr.splice(index, 1) : '';
}
});
})
alls.push(...temp);
if (temp.length > 0) {
// 判断是否第一次进来，如果不是则删除temp中的第一项(因为第一项已经遍历完成);
if (count != 1) {
temp.splice(0, 1);
}
// 递归 将子级进行递归取值
gets(temp);
}
}
gets([arr[0]], 1);
// console.log(alls);
// console.log(alls.length);
alls.forEach(item => {
// 查看其 所有子级的name
console.log(item.file.name);
});
总结
实现起来也并不是太难，主要是需要有清晰的逻辑以及对一些基础语法的掌握(如：递归级循环);