现实世界的数据结构：JavaScript中的表格和图形

by Yung L. Leung

梁永良

现实世界的数据结构：JavaScript中的表格和图形 (Real world data structures: tables and graphs in JavaScript)

An aerial view of boxes with addresses, each containing people & various items, shows neighborhoods connected by their roads. Viewed up close, you may say that we have a hash table. But, when viewed from afar, you might see a graph. Advancing from linear (linked lists, stacks & queues) and binary (binary search trees, binary heaps) data structures, hash tables, and graphs are steps towards a greater diversity of real-world applications.

带有地址的盒子的鸟瞰图，每个盒子都包含人和各种物品，显示了通过其道路相连的社区。 近距离查看，您可能会说我们有一个哈希表。 但是，从远处观看时，您可能会看到一个图表 。 从线性 (链表，堆栈和队列)和二进制 (二进制搜索树，二进制堆)数据结构 ， 哈希表和图形发展而来，是朝着更多样化的实际应用程序迈进的一步。

桌子 (Tables)

A hash table represents data (key-value pairs) tabulated by indexes.

哈希表表示由索引制成表格的数据(键值对)。

Each unique key is used to generate an index (hash function). A hash function can generate the same index for several unique keys (collision). A solution to this problem is to store the data sets under the same index (chaining).

每个唯一键都用于生成索引(哈希函数)。 哈希函数可以为多个唯一键生成相同的索引( 冲突 )。 解决此问题的方法是将数据集存储在相同的索引下( 链接 )。

So, you can imagine a hash table being a system for shelving similar items together. Simply enter the item name into a hash function and all the greenish type items will be assigned a shelf space, i.e. 4.

因此，您可以想象哈希表是一个将类似项目搁置在一起的系统。 只需在散列函数中输入商品名称，所有绿色的商品就会被分配一个货架空间，即4。

In general, a key-value pair insert requires generating an index (shelf number), checking whether that shelf exists, and placing the item (data) on the shelf. Suppose I had bananas and apples on the bottom shelf (index 0) and red wine on my top shelf (index 2).

通常，键值对插入需要生成索引 (架子编号)，检查该架子是否存在，然后将商品( 数据 )放置在架子上。 假设我的底部架子上有香蕉和苹果( 索引0 )，顶部架子上有红酒( 索引2 )。

If my index generator (hash function) returned an index 2 for my 2 “rotisserie chickens,” to insert that data requires checking for and creating shelf space.

如果我的索引生成器( 哈希函数 )为我的2只“烤肉鸡”返回了索引2 ，则插入该数据需要检查并创建货架空间。

To get a value (item) requires inputting its name (key) to generate its index (shelf number) and retrieving all items on that shelf. Then searching for the exact item (its name or key) and retrieving it (return value). So, to find how many apples are in stock (20) requires iterating through my shelf of fruits.

要获取值 (项目)，需要输入其名称( 键 )以生成其索引(货架编号)，并检索该货架上的所有物品。 然后搜索确切的项目(名称或键)并检索(返回值)。 因此，要找到库存的苹果数量( 20 )，需要遍历我的水果架。

To get a list of all keys or values requires searching through each existing shelf, logging it into your manifest (push into an array), and submitting the documents (return keys or values array).

要获取所有键或值的列表，需要搜索每个现有的架子，将其登录到清单(推入数组)，然后提交文档(返回键或值数组)。

The complexity to insert a key-value pair or access a value is, in general, a constant time (O(1)). A good hash function evenly distributes all items to all available shelves. So, insertion or access does not require looping through all existing “shelves” for storage or retrieval of data.

插入键值对或访问值的复杂度通常为固定时间( O(1) )。 良好的哈希功能可将所有商品平均分配到所有可用的货架上。 因此， 插入或访问不需要遍历所有现有“架子”来存储或检索数据。

Because cataloging (keys or values) requires going through all shelves, it has a complexity O(n). For n different data sets (for 4 different items), requires n steps to perform a catalog (requires looking through all 4 items to document its name or its quantity).

因为分类( 键或值 )需要遍历所有架子，所以复杂度为O(n) 。 对于n个不同的数据集(对于4个不同的项目)，需要n个步骤来执行目录(要求浏览所有4个项目以记录其名称或数量)。

图表 (Graphs)

A graph is nodes (vertices) of data related by their connections (edges). A road map of cities connected by their roads is a graph. A graph of connected users from a social media app is another example.

图是通过其连接( 边 )相关的数据节点( 顶点 )。 道路连接的城市路线图是一个图形。 来自社交媒体应用程序的已连接用户的图表是另一个示例。

To add a vertex and an edge requires storing them as key-value pairs in an adjacency list. So a vertex (New York) can be connected to other vertices (New Jersey & Pennsylvania) by making “New York” a key to an array containing “New Jersey,” “Pennsylvania.”

要添加顶点和边，需要将它们作为键值对存储在邻接表中 。 因此，通过将“纽约”作为包含“新泽西”，“宾夕法尼亚州”的数组的键，可以将顶点(纽约)连接到其他顶点(新泽西州和宾夕法尼亚州)。

The reverse must also be implemented, i.e.: “New Jersey” pointing to an array of “New York,” “Pennsylvania,” and so forth. So the result is an adjacency list of keys (“New York,” “New Jersey,” “Pennsylvania”), each pointing to arrays of their corresponding connections.

反之也必须实现，即：“新泽西”指向一系列“纽约”，“宾夕法尼亚州”，依此类推。 因此，结果是一个相邻的键列表(“纽约”，“新泽西”，“宾夕法尼亚州”)，每个键都指向其相应连接的数组。

To remove edge requires removing vertex1’s connection to vertex2 and the reverse. So, to remove New York’s connection to New Jersey requires, also, removing New Jersey’s connection to New York.

要删除边缘，需要删除vertex1与vertex2的连接，反之亦然。 因此，要删除纽约与新泽西的联系，还需要删除新泽西与纽约的联系。

To remove a vertex requires iterating through its connections. Removing its edges, before finally deleting the vertex from the adjacency list. So, to remove New York requires disconnecting it from its neighbors before deleting from the list.

要删除顶点，需要迭代其连接。 在最终从邻接表中删除顶点之前，先删除其边缘。 因此，要删除纽约，需要先将其与邻居断开连接，然后再从列表中删除。

Relative to a starting point, a depth-first traversal involves visiting a neighbor and its neighbors, before proceeding with the next immediate neighbor. A breadth-first traversal involves visiting all immediate neighbors before distant neighbors.

相对于起点， 深度优先遍历涉及在继续下一个直接邻居之前访问邻居及其邻居。 广度优先遍历涉及到在远邻之前先拜访所有近邻。

So for a graph with New York, New Jersey, Pennsylvania & Virginia as vertices, a depth-first traversal starting from New Jersey would be [“New Jersey”, “Pennsylvania”, “Virginia”, “New York”].

因此，对于以纽约，新泽西，宾夕法尼亚和弗吉尼亚为顶点的图形，从新泽西开始的深度优先遍历为[“新泽西”，“宾夕法尼亚州”，“弗吉尼亚州”，“纽约”]。

A breadth-first from New Jersey would be [“New Jersey”, “New York”, “Pennsylvania”, “Virginia”].

新泽西州广度优先的地区将是[“新泽西州”，“纽约州”，“宾夕法尼亚州”，“弗吉尼亚州”]。

Since a graph is a set of nodes connected, linear & binary data structures can, in a sense, be viewed as simple graphs. Because graphs can take many different forms & shapes, the complexity of traversal through a graph depends on the algorithm(s) used for the traveling, a discussion best saved for another time.

由于图是一组连接的节点，因此从某种意义上讲， 线性和二进制 数据结构可以视为简单的图。 由于图形可以采用许多不同的形式和形状，因此遍历图形的复杂度取决于用于旅行的算法，这种讨论最好在下一次保存。

参考文献： (References:)

https://www.udemy.com/js-algorithms-and-data-structures-masterclass/

https://www.udemy.com/js-algorithms-and-data-structures-masterclass/

翻译自: https://www.freecodecamp.org/news/real-world-data-structures-tables-and-graphs-in-javascript-bcb70c929495/