回答編集履歴
4
テキスト修正
test
CHANGED
|
@@ -104,4 +104,4 @@
|
|
|
104
104
|
|
|
105
105
|
|
|
106
106
|
|
|
107
|
-
となっており、最終的な結果を得る変数 `tree` は配列になっており、これに合わせて、先に挙げた回答コードで得られる `tree` も配列になりますが、一般にツリー(木構造)というと、ルートのノードが一個と考えるのが通常と思われます。（ちなみに、グラフ理論の用語では、複数の木は、森（forest)と呼ばれます。） これをふまえて、もし、元の配列 `datas`の要素として、 `parent` が null である要素は一個しか出現しないことが前提になるのでしたら、最終的な結果が入る変数`tree` には、配列ではなくルートノードのオブジェクトが入ってくることにしたほうがよいかもしれません。または、元の配列 `datas`の要素として、 `parent` が null である要素が複数ある場合は、最終的な結果は配列になり、その要素それぞれが木のルートノードになるので、変数名を複数形の`trees` にするか、あるいは `forest` にしたほうがよいかもしれません。
|
|
107
|
+
となっており、最終的な結果を得る変数 `tree` は配列になっており、これに合わせて、[先に挙げた回答コード](https://codepen.io/jun68ykt/pen/poyVMMo?editors=0012)で得られる `tree` も配列になりますが、一般にツリー(木構造)というと、ルートのノードが一個と考えるのが通常と思われます。（ちなみに、グラフ理論の用語では、複数の木は、森（forest)と呼ばれます。） これをふまえて、もし、元の配列 `datas`の要素として、 `parent` が null である要素は一個しか出現しないことが前提になるのでしたら、最終的な結果が入る変数`tree` には、配列ではなくルートノードのオブジェクトが入ってくることにしたほうがよいかもしれません。または、元の配列 `datas`の要素として、 `parent` が null である要素が複数ある場合は、最終的な結果は配列になり、その要素それぞれが木のルートノードになるので、変数名を複数形の`trees` にするか、あるいは `forest` にしたほうがよいかもしれません。
|
3
テキスト修正
test
CHANGED
|
@@ -85,3 +85,23 @@
|
|
|
85
85
|
```
|
|
86
86
|
|
|
87
87
|
- **動作確認用 codepen:** [jun68ykt/pen/wvGXvXd?editors=0012](https://codepen.io/jun68ykt/pen/wvGXvXd?editors=0012)
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
### 追記2
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
一点、細かい指摘にはなりますが、補足があります。ご質問では
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
> var tree = [{
|
|
100
|
+
|
|
101
|
+
> id: 0,
|
|
102
|
+
|
|
103
|
+
> …
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
となっており、最終的な結果を得る変数 `tree` は配列になっており、これに合わせて、先に挙げた回答コードで得られる `tree` も配列になりますが、一般にツリー(木構造)というと、ルートのノードが一個と考えるのが通常と思われます。（ちなみに、グラフ理論の用語では、複数の木は、森（forest)と呼ばれます。） これをふまえて、もし、元の配列 `datas`の要素として、 `parent` が null である要素は一個しか出現しないことが前提になるのでしたら、最終的な結果が入る変数`tree` には、配列ではなくルートノードのオブジェクトが入ってくることにしたほうがよいかもしれません。または、元の配列 `datas`の要素として、 `parent` が null である要素が複数ある場合は、最終的な結果は配列になり、その要素それぞれが木のルートノードになるので、変数名を複数形の`trees` にするか、あるいは `forest` にしたほうがよいかもしれません。
|
2
テキスト修正
test
CHANGED
|
@@ -32,6 +32,10 @@
|
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
|
|
35
|
+
上記では、 ツリーノードの`id`とノードオブジェクトとのマップを配列で実装しており、それが、reduce の各回で変数`map`に入ってきます。
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
35
39
|
- **動作確認用 codepen:** [jun68ykt/pen/poyVMMo?editors=0012](https://codepen.io/jun68ykt/pen/poyVMMo?editors=0012)
|
|
36
40
|
|
|
37
41
|
|
|
@@ -46,7 +50,7 @@
|
|
|
46
50
|
|
|
47
51
|
|
|
48
52
|
|
|
49
|
-
参考までに、再帰を使って、指定`id`のノードをツリーから探すコードを挙げます。（※再帰の深さが何らかの最大値を越えないようする処理は加えていません。）
|
|
53
|
+
参考までに、再帰を使って、指定`id`のノードをツリーから深さ優先で探すコードを挙げます。（※再帰の深さが何らかの最大値を越えないようする処理は加えていません。）
|
|
50
54
|
|
|
51
55
|
|
|
52
56
|
|
1
テキスト修正
test
CHANGED
|
@@ -39,3 +39,45 @@
|
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
参考になれば幸いです。
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
### 追記
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
参考までに、再帰を使って、指定`id`のノードをツリーから探すコードを挙げます。（※再帰の深さが何らかの最大値を越えないようする処理は加えていません。）
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
```javascript
|
|
54
|
+
|
|
55
|
+
const findTreeNodeById = (tree, id) => {
|
|
56
|
+
|
|
57
|
+
for (let i = 0; i < tree.length; ++ i) {
|
|
58
|
+
|
|
59
|
+
if (tree[i].id === id) {
|
|
60
|
+
|
|
61
|
+
return tree[i];
|
|
62
|
+
|
|
63
|
+
} else if (tree[i].children.length > 0) {
|
|
64
|
+
|
|
65
|
+
const node = findTreeNodeById(tree[i].children, id);
|
|
66
|
+
|
|
67
|
+
if (node) {
|
|
68
|
+
|
|
69
|
+
return node;
|
|
70
|
+
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
return null;
|
|
78
|
+
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
- **動作確認用 codepen:** [jun68ykt/pen/wvGXvXd?editors=0012](https://codepen.io/jun68ykt/pen/wvGXvXd?editors=0012)
|