js树形结构数据扁平化，递归遍历

示例数据

let originalArray = [
    {
        name: 'Alice',
        age: 30,
        Children: []
    },
    {
        name: 'Bob',
        age: 25,
        Children: [
            {
                name: 'Charlie',
                age: 35,
                Children: [
                    { name: 'David', age: 40 },
                    { name: 'Eve', age: 45 }
                ]
            }
        ]
    }
];

js树形结构数据扁平后效果

let originalArray=[
    {
        name: 'Alice',
        age: 30,
    },
    {
        name: 'Bob',
        age: 25,
    },
    {
        name: 'Charlie',
        age: 35,
    },
    { 
        name: 'David',
        age: 40 
    },
    { 
        name: 'Eve', 
        age: 45 
    }
]

//搜索内容
let search = ''
//递归扁平化
let list = this.flattenArray(this.originalArray)
//搜索
let filterlist = this.filterArray(list,search)

递归本体

// 定义一个函数，用于将嵌套数组扁平化
function flattenArray(arr) {
    let result = []; // 存储扁平化后的结果数组

    // 定义一个递归函数，用于处理每个嵌套对象
    function flatten(item) {
        let newItem = {}; // 存储处理后的新对象
        // 遍历对象的属性
        Object.keys(item).forEach(key => {
            // 如果属性不是 'Children'，则将其添加到新对象中
            if (key !== 'Children') {
                newItem[key] = item[key];
            }
        });
        result.push(newItem); // 将新对象添加到结果数组中

        // 如果对象有子对象并且子对象不为空，则递归处理每个子对象
        if (item.Children && item.Children.length > 0) {
            item.Children.forEach(child => {
                flatten(child);
            });
        }
    }

    // 对输入的数组中的每个对象应用扁平化函数
    arr.forEach(item => {
        flatten(item);
    });

    return result; // 返回扁平化后的结果数组
}

搜索本体

filterArray(array, searchTerm){
	return array.filter(obj => {  
	// 检查name属性  
	if (obj.hasOwnProperty('name') && typeof obj.name=== 'string' && obj.name.includes(searchTerm)) {  
		return true;  
	}  
	// 检查id属性（假设id是字符串或可以转换为字符串）  
	if (obj.hasOwnProperty('id') && typeof obj.id=== 'string' && obj.id.includes(searchTerm)) {  
		return true;  
	} 
	// 如果属性都不匹配，则返回false  
	return false;  
	});  
}

obj.hasOwnProperty(‘name’) && typeof obj.name=== ‘string’
当对象 obj 中包含 ‘name’ 属性并且 ‘name’ 属性的值是字符串类型时
如果obj中的属性名明确可以不用加

1.一边递归一边搜索：在每次递归处理对象时，同时进行搜索并筛选出符合条件的属性，将其添加到结果数组中。这种方法可以在递归的过程中及时发现匹配项，减少最终搜索的次数。如果数据集很大且匹配项分布广泛，这种方法可能会更快，因为可以在递归的过程中提前找到匹配项。

2.递归完再搜索：先完全递归处理整个数据集，然后再对扁平化后的结果进行搜索和筛选。这种方法可能会在数据集较小或匹配项较少的情况下更有效，因为只需要进行一次搜索操作，避免了在递归过程中的重复搜索

本文章是递归完再搜索，在mounted中请求数据，js递归扁平化后赋值，避免了’‘一边递归一边搜索’’ 时每次搜索都要递归的消耗