在開始之前，我們必須首先解決輸入數(shù)據(jù)的不規(guī)則形狀 -
const data2 =
? { name:"root"
? , children:
? ? ? Array.from
? ? ? ? ( Object.entries(data.root)
? ? ? ? , ([ country, _ ]) =>
? ? ? ? ? ? Object.assign({ name:country }, _)
? ? ? ? )
? }
console.log(JSON.stringify(data2, null, 2))
現(xiàn)在我們看到的data2是一個統(tǒng)一的{ name, children: [ ... ]}形狀——
{
? "name": "root",
? "children": [
? ? {
? ? ? "name": "Europe",
? ? ? "children": [
? ? ? ? { "name": "Germany" },
? ? ? ? {
? ? ? ? ? "name": "England",
? ? ? ? ? "children": [
? ? ? ? ? ? {
? ? ? ? ? ? ? "name": "London",
? ? ? ? ? ? ? "search_words": [ "city", "capital" ],
? ? ? ? ? ? ? "children": [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? "name": "Westminster",
? ? ? ? ? ? ? ? ? "search_words": [ "borough" ]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? "name": "Manchester",
? ? ? ? ? ? ? "search_words": [ "city" ]
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? "name": "France",
? ? ? ? ? "children": [
? ? ? ? ? ? {
? ? ? ? ? ? ? "name": "Paris",
? ? ? ? ? ? ? "search_words": [ "city", "capital" ]
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? }
? ? ? ]
? ? },
? ? {
? ? ? "name": "North America",
? ? ? "children": [
? ? ? ? {
? ? ? ? ? "name": "Canada",
? ? ? ? ? "children": [
? ? ? ? ? ? { "name": "Toronto" },
? ? ? ? ? ? { "name": "Ottawa" }
? ? ? ? ? ]
? ? ? ? },
? ? ? ? { "name": "United States" }
? ? ? ]
? ? }
? ]
}
現(xiàn)在我們編寫一個通用的深度優(yōu)先遍歷函數(shù)，dft-
function* dft (t, path = [])
{ for (const _ of t.children ?? [])
? ? yield* dft(_, [...path, t.name ])
? yield [path, t]
}
我們的dft函數(shù)為我們的輸入樹中的path每個元素提供了一個-et
["root","Europe"]
{"name":"Germany"}
["root","Europe","England","London"]
{name:"Westminster", search_words:["borough"]}
["root","Europe","England"]
{name:"London", search_words:["city","capital"], children:[...]}
["root","Europe","England"]
{name:"Manchester", search_words:["city"]}
["root","Europe"]
{name:"England", children:[...]}
["root","Europe","France"]
{name:"Paris", search_words:["city","capital"]}
["root","Europe"]
{name:"France", children:[...]}
["root"]
{name:"Europe", children:[...]}
["root","North America","Canada"]
{name:"Toronto"}
現(xiàn)在我們知道了每個節(jié)點的路徑，我們可以創(chuàng)建一個index使用path和 anysearch_words鏈接回該節(jié)點的路徑 -
const index = t =>
? Array.from
? ? ( dft(t)
? ? , ([path, e]) =>
? ? ? ? [ [...path, e.name, ...e.search_words ?? [] ] // all words to link to e
? ? ? ? , e? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// e
? ? ? ? ]
? ? )
? ? .reduce
? ? ? ( (m, [ words, e ]) =>
? ? ? ? ? insertAll(m, words, e) // update the index using generic helper
? ? ? , new Map
? ? ? )
這取決于通用助手insertAll-
const insertAll = (m, keys, value) =>
? keys.reduce
? ? ( (m, k) =>
? ? ? ? m.set(k, [ ...m.get(k) ?? [], value ])
? ? , m
? ? )
完成后index，我們有一種方法可以為任何搜索詞創(chuàng)建快速查找 -
const myIndex =?
? index(data2)
console.log(myIndex)
Map?
{ "Europe" =>
? ? [{"name":"Germany"},{"name":"Westminster",...},{"name":"London",...},{"name":"Manchester",...},{"name":"England"...},{"name":"Manchester",...}]},{"name":"Paris",...},{"name":"France"...},{"name":"Europe"...},{"name":"Manchester",...}]},{"name":"France"...}]}]
, "Germany" =>?
? ? [{"name":"Germany"}]
, "England" =>
? ? [{"name":"Westminster",...},{"name":"London",...},{"name":"Manchester",...},{"name":"England"...},{"name":"Manchester",...}]}]
, "London" =>
? ? [{"name":"Westminster",...},{"name":"London",...}]
, "Westminster" =>
? ? [{"name":"Westminster",...}]
, "borough" =>
? ? [{"name":"Westminster",...}]
, "city" =>
? ? [{"name":"London",...},{"name":"Manchester",...},{"name":"Paris",...}]
, "capital" =>
? ? [{"name":"London",...},{"name":"Paris",...}]
, "Manchester" =>
? ? [{"name":"Manchester",...}]
, "France" =>
? ? [{"name":"Paris",...},{"name":"France"...}]
, "Paris" =>
? ? [{"name":"Paris",...}]
, "North America" =>
? ? [{"name":"Toronto"},{"name":"Ottawa"},{"name":"Canada"...},{"name":"United States"},{"name":"North America"...},
? ? {"name":"United States"}]}]
, "Canada" =>
? ? [{"name":"Toronto"},{"name":"Ottawa"},{"name":"Canada"...}]
, "Toronto" =>
? ? [{"name":"Toronto"}]
, "Ottawa" =>
? ? [{"name":"Ottawa"}]
, "United States" =>
? ? [{"name":"United States"}]? ?
}
這應該突出顯示數(shù)據(jù)中剩余的不一致之處。例如，您有一些嵌套在city、capital或下的節(jié)點borough。另外值得注意的是，我們可能應該使用s.toLowerCase()所有索引鍵，以便查找不區(qū)分大小寫。這是留給讀者的練習。
創(chuàng)建index很容易，您只需要做一次-
const myIndex =?
? index(data2)
您的索引可以根據(jù)需要重復用于任意多次查找 -
console.log(myIndex.get("Toronto") ?? [])
console.log(myIndex.get("France") ?? [])
console.log(myIndex.get("Paris") ?? [])
console.log(myIndex.get("Canada") ?? [])
console.log(myIndex.get("Zorp") ?? [])
[{"name":"Toronto"}]
[{"name":"Paris",...},{"name":"France"...}]
[{"name":"Paris",...}]
[{"name":"Toronto"},{"name":"Ottawa"},{"name":"Canada"...}]
[]
將結果插入 Vue 應用程序由您完成。
