무한 재귀 트리를 구현하는 JavaScript 코드 예제

이 기사의 내용은 JavaScript에서 무한 재귀 트리를 구현하기 위한 코드 예제에 대한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

Demand: 최근에 저는 일반적으로 백엔드에서 트리 구조를 프런트 엔드로 직접 반환하는 데 사용되었습니다. 계단식 영역 또는 메뉴 트리) 처리 계층을 제거합니다. 백그라운드 개발을 변경한 후 평면화된 배열 데이터를 프런트 엔드로 반환하여 다음 데이터를 처리했습니다. 갑자기 조금 패닉이 왔습니다...

const data = [
    {
        "area_id": 5,
        "name": "广东省",
        "parent_id": 0,
    },  
    {
        "area_id": 6,
        "name": "广州市",
        "parent_id": 5,
    },
    {
        "area_id": 7,
        "name": "深圳市",
        "parent_id": 5,
    },
    {
        "area_id": 4,
        "name": "北京市",
        "parent_id": 3,
    },
    {
        "area_id": 3,
        "name": "北京",
        "parent_id": 0,
    },
    {
        "area_id": 2,
        "name": "测试子地区",
        "parent_id": 1,
    },
    {
        "area_id": 1,
        "name": "测试地区",
        "parent_id": 0,
    }
]

emm 생각이 바뀌어서 생각해보니 그냥 운동을 하다가 소매 걷어붙이고 하다가 정리해봤습니다. 다음 두 가지 구성 방법~

# 🎜🎜#

방법 1 - 재귀

이러한 재귀에 적합한 시나리오에서 어떻게 재귀는 생략되나요? 첫 번째 방법은 재귀입니다! 재귀의 보물 선물~

function toTreeData(data,pid){
 
    function tree(id) {
        let arr = []
        data.filter(item => {
            return item.parent_id === id;
        }).forEach(item => {
            arr.push({
                area_id: item.area_id,
                label: item.name,
                children: tree(item.area_id)
            })
        })
        return arr
    }
    return tree(pid)  // 第一级节点的父id，是null或者0，视情况传入
}

자 포즈 제대로, 콘솔에서 실행

아 나쁘지 않네요~ 뒤에 있는 동생은 더 이상 어떤 데이터를 나에게 반환해야 할지 걱정하지 않습니다. 하지만 이 방법에는 단점이 있습니다. 컴포넌트를 사용할 때 필요한 데이터 구조에서 자식에 데이터가 없으면 []가 반환됩니다. 뭐, 문제가 있긴 하지만 그래도 최적화가 가능한데 이렇게 쉽게 최적화된 코드를 제공할 수 있을까요? 당신은 이미 성숙한 프로그래머이므로 코드를 최적화하는 방법을 직접 배워야 합니다! ! !

방법 2 - 물체

그 물체는 내 눈에는 항상 천영룡을 죽이는 검의 존재였습니다. 나와 함께 예약하세요. 물론 제대로 사용하지 않으면 고철더미와 다름없으며 예측할 수 없는 결과를 초래할 수도 있습니다.

function setTreeData(arr) {
    //  删除所有 children,以防止多次调用
    arr.forEach(function (item) {
            delete item.children;
    });
    let map = {}; // 构建map
    arr.forEach(i => {
        map[i.area_id] = i; // 构建以area_id为键 当前数据为值
    });

    let treeData = [];
    arr.forEach(child => {
        const mapItem = map[child.parent_id]; // 判断当前数据的parent_id是否存在map中

        if (mapItem) { // 存在则表示当前数据不是最顶层数据
        
            // 注意: 这里的map中的数据是引用了arr的它的指向还是arr，当mapItem改变时arr也会改变,踩坑点
            (mapItem.children || ( mapItem.children = [] )).push(child); // 这里判断mapItem中是否存在children, 存在则插入当前数据, 不存在则赋值children为[]然后再插入当前数据
        } else { // 不存在则是组顶层数据
            treeData.push(child);
        }
    });

    return treeData;
};

console.log(setTreeData(data)); // 输出整理后的数据

결과적으로는 실행하지 않게 되는데, 이는 재귀적 결과와 유사합니다. 나는 재귀보다 이 접근 방식을 선호합니다. 하지만 이 방법에는 오류가 발생하기 쉬운 부분이 있습니다. 즉, 원본 데이터가 변경된다는 것입니다. 오랫동안 여기에 갇혀 있었기 때문에 자식을 삭제하여 초기화했습니다. 기억나지 않는다면 3번 반복해보세요! ! !

Summary

위에서는 플랫 데이터를 재귀 트리로 변환하는 두 가지 방법을 간략하게 소개했습니다. 그렇지 않다면 돌아가서 코딩해 보세요! 현재 데이터를 트리 구조로 정리해야 할 필요성이 생기면 주로 메뉴 표시줄이나 분류의 트리 구조에 있습니다. 물론 지방, 도시 등의 하위 구조도 있습니다.

이 기사는 여기서 끝났습니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의

JavaScript 튜토리얼 동영상 칼럼을 주목하세요! ! !

위 내용은 무한 재귀 트리를 구현하는 JavaScript 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!