前端应用程序的实用数据结构:何时使用Tries

Trie(通常发音为“ try”)是针对特定类型的搜索进行优化的树数据结构。 当您想获取部分值并返回一组可能的完整值时,可以使用Trie。 一个典型的例子是自动完成。

上图显示了Trie的结构,以暗示其工作原理。 您可以将Trie视为一组相关值。 这些值的共同点是它们的前缀。

当您搜索更特定的前缀时,您将获得更特定的返回值。 使用上图所示的Trie,搜索与前缀“ b”的匹配项将返回6个值:be,bear,bell,bid,bull,buy。

搜索与前缀“ be”匹配的结果将返回2个值:bear,bell

何时使用Tries

只要您想将前缀与可能的完整值匹配,就可以使用Trie。 这就是Trie如何获得有趣的名字的方式。 “ Trie”一词是“ re trie val”一词的后缀。

尝试通常用于实现以下内容:

  • 自动完成/提前输入
  • 搜索
  • 拼写检查
  • 分类

您不仅限于前缀匹配的单词。 试用可以存储:

  • IP地址
  • 电话号码,
  • 对象(您可以搜索对象的属性),
  • 和更多…

您是否应该在前端应用程序中使用Tries?

在使用JavaScript固有的数据结构之前,需要考虑一些实际因素,例如:

  • 这种结构是否可以提高性能? 性能提升值得吗?
  • 这种结构是否易于使用-或至少不再困难?
  • 这种结构是否为我的数据提供了更多的语义? 它使我的代码更容易理解吗?
  • 此结构会对我的构建大小有多大影响? 这种增加的构建大小值得吗?

为了回答这些问题,我们将比较Tries和Arrays-数组是JavaScript中最常用的Collection结构。

对比的尝试和数组
注意: 各种JavaScript引擎将实现JavaScript规范。 不一样。 因此,每个环境的性能结果可能会有所不同。

这是我们用来对比Tries和Arrays的标准:

  • 性能(运行时间和加载时间)
  • 易于使用和可读性
  • 构建大小(数组不添加任何额外的代码。我们将分析Trie。)
设定
  • 我使用create-react-app在React中编写了快速自动完成功能。 看起来是这样的:
  • 我使用Josh Jung的trie-search作为我的Trie实现。
  • 我使用faker者生成了10,000个名称集。 我不在乎名称是否唯一。

这是自动完成的基本代码。 注意,它不使用任何特定的Collection数据结构。 下面是Trie和Array的实现细节。

这是基于数组的代码:

这是基于TrieSearch的代码:

性能

我在代码中测试了两个地方的性能:

  1. 将数据项加载到数据结构中。
  2. 在数据结构中搜索项目。

所有测试均使用Chrome 65.x进行。

加载数据项
使用Trie,您将比数组经历更长的初始化时间。 尝试以O(n * m)时间初始化。 为了让您有一个实际的认识,平均花费90毫秒将10,000个项目添加到测试代码中的Trie。 这是一次性费用。 可以(即应该)将Trie初始化推迟到页面加载完成之后。

最常见的是,您将从数组初始化Trie。 如果需要添加更多数据,则可以手动将项目添加到Trie。

当搜索是应用程序的主要重点之一时,尝试会增加价值。 由于初始化成本高,如果用户搜索量不大,使用Trie可能不适合您的应用程序。

运行
在每个测试中,我在自动完成输入中键入“ Cath”,并测量了搜索花费了多长时间。

TrieSearch的表现优于Array.filter 。 它快了50%。

使用方便

如上面的代码示例所示,使用TrieSearch并不比使用Array复杂。 但是,要记住一些差异:

有关使用TrieSearch的更多详细信息,请参阅文档

尺寸

TrieSearch最小为7.4kb。 它具有13个依赖项。 整个产品的构建大小约为10kb。 确定这是否会对您的应用程序产生重大影响取决于您。

摘要

当您拥有进行大量搜索的应用程序时,Trie是一种出色的数据结构。 尝试相对容易使用-而且速度很快。

在阵列上使用Trie会降低性能,例如:

  • Trie初始化。 (因此,建议您将Trie的初始化推迟到页面加载之后)。
  • 较大的捆束尺寸。

From: https://hackernoon.com/practical-data-structures-for-frontend-applications-when-to-use-tries-5428a565eba4

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值