입문

이 글은 자바스크립트가 트리 구조를 쉽게 처리하는 방법에 대해 사내 학습회에서 언급한 것이다.

1. 트리 구조를 쉽게 처리할 수 있는 라이브러리

다음 두 가지를 추천합니다.

tree-model-js

https://github.com/joaonuno/tree-model-js

list-to-tree

https://github.com/DenQ/list-to-tree

2. tree-model-js

트리 구조에 대한 데이터는 노드의 검색과 필터 등의 조작을 잘 할 수 있는 라이브러리입니다.

2-1. 호출

const TreeModel = require('tree-model');
const tree = new TreeModel();

2-2. 예상 데이터 형식

tree-model-js에서 중첩된 트리 구조 객체를 입력합니다.
다음 조직도를 예로 들자.
조직도

위 조직도 객체를 나타냅니다.children 하위 조직의 대상을 속성 그룹에 넣고 다음과 같이 표시한다.

const treeDataStructure = {
  id: 1,
  name: '全社',
  children: [
    {
      id: 11,
      name: 'つくばオフィス'
      children: [
        {
          id: 111,
          name: 'システムアンドサービスグループ'
        }
      ]
    },
    {
      id: 12,
      name: '東京オフィス',
      children: [
        {
          id: 121,
          name: 'スイートプロダクトデザイングループ'
        },
        {
          id: 122,
          name: 'アクティブ・ラーニングデザイングループ'
        }
      ]
    },
    {
      id: 13,
      name: '不明のグループ'
    }
  ]
};

2-3. 루트 노드 객체 만들기

tree-model-js의 parse 보조 대상에 상기 중첩 데이터를 넣고 대상 트리 구조의 루트 노드의 대상을 만듭니다.

// 木構造のオブジェクトをパースしてRootノードオブジェクトを作成
const root = tree.parse(treeDataStructure);

2-4. 노드 찾기

id가 121인 노드를 찾고 노드의 예시를 가져옵니다.

const node121 = root.first(node => node.model.id === 121);
console.log(node121.model);
// modelプロパティを使えば、ノードのプロパティを取得できる。
// -> { id: 121, name: 'SPD' }

2-5. 노드 필터링

id가 100보다 크거나 같은 모든 노드의 예시를 가져옵니다.

const nodesGt100 = root.all(node => node.model.id > 100);

2-6. 스캔 노드

이것은 위에서 아래로 노드 id를 순서대로 출력하는 예입니다.

root.walk(node => { console.log(node.model.id) });
/*
1
11
111
12
121
122
13
*/

2-7. 검색 알고리즘 지정

상기 모든 API(first,all,walk)는 검색 알고리즘을 지정하는 옵션을 사용할 수 있습니다.

root.walk({ strategy: 'breadth' /* 幅優先探索 */ }, node => { console.log(node.model.id) });
/*
1
11
12
13
111
121
122
*/

지원되는 세 가지 유형:.
유형
탭 페이지에서 항목 작성 또는 편집
폭 우선 순위 검색
{ strategy: 'breadth' }
깊이 우선 순위 검색 (루트부터)
{ strategy: 'pre' }
깊이 우선 순위 검색 (끝부터)
{ strategy: 'post' }

3. list-to-tree

평면 목록에서 2-2. 期待するデータの形式 에 설명된 네스트된 트리 구조 객체의 라이브러리로 변환합니다.

const LTT = require('list-to-tree');

const nodeList = [
  { id: 1, parent: 0 },
  { id: 11, parent: 1 },
  { id: 111, parent: 11 }
];

const treeDataStructure = new LTT(
  nodes,
  { key_id: 'id', key_parent: 'parent', key_child: 'children' }
).GetTree()[0];

console.log(JSON.stringfy(treeDataStructure, null, 2));
/*
{
  "children": [
    {
      "children": [
        {
          "id": 111,
          "parent": 11
        }
      ],
      "id": 11,
      "parent": 1
    }
  ],
  "id": 1,
  "parent": 0
}
*/

4. tree-model-js와list-to-tree 조합

하면, 만약, 만약...
1. 평면 목록에 정의된 트리 구조 데이터에 따라
2. 중첩된 객체로 변환하는 트리 구조 데이터
3. 루트 노드 객체tree-model-js를 생성할 수 있습니다.

const TreeModel = require('tree-model');
const LTT = require('list-to-tree');

// 1. フラットな木構造のデータ
const nodeList = [
  { id: 1, parent: 0 },
  { id: 11, parent: 1 },
  { id: 111, parent: 11 }
];

// 2. 入れ子になっている木構造のオブジェクト
const treeDataStructure = new LTT(
  nodes,
  { key_id: 'id', key_parent: 'parent', key_child: 'children' }
).GetTree()[0];

// 3. tree-model-jsのRootノードオブジェクトを作成
const root = tree.parse(treeDataStructure);

마지막

오류와 개선점 등이 있으면 지적해 주십시오.

참조 링크

tree-model-js

https://github.com/joaonuno/tree-model-js

list-to-tree

https://github.com/DenQ/list-to-tree