JavaScript 字典(Dictionary)数据结构实现与详解

作者：闭包旅人时间：2026-10-23 10:20:50浏览：517

本文详解如何在 JavaScript 中实现字典(Dictionary)数据结构。通过封装 Object 特性，自定义实现 add、find、remove、count 和 clear 等核心方法，并深入探讨使用 delete 操作符及 Object.keys().sort() 进行元素管理与有序输出的技巧，帮助开发者掌握基于键值对的存储与操作逻辑。

本文详细介绍 JavaScript 中字典(Dictionary)算法与数据结构的实现方法，供读者参考学习。

字典(Dictionary)

字典是一种基于键-值对存储数据的数据结构，其运作机制类似于查阅通讯录：通过查找机主名字（键）来获取对应的电话号码（值）。在此结构中，键用于索引查找，而值则是查找返回的结果。

JavaScript 内置的 Object 类本质上已具备字典特性。本文将利用 Object 的特性，自主构建一个 Dictionary 类，以提供更便捷的使用方式。

字典的实现

Dictionary 类的基础实现依赖于 Array 类。

与常见数据结构类似，字典类需具备添加、删除及清空等功能。首先定义字典的基础数据类型，如图所示。

字典(Dictionary) 数据类型定义

基于上述数据类型定义，Dictionary 类的构造函数定义便顺理成章。


//字典类

function Dictionary () {
  this.dataStore = [];
  this.add = add;     // 添加元素
  this.find = find;    // 查找元素
  this.remove = remove;  // 删除元素
  this.count = count;   // 字典中元素个数
  this.showAll = showAll; // 显示字典元素
  this.clear = clear;   // 清空字典
}

add：向字典添加一个元素

由于字典采用键值对存储，add 方法需接收键和值两个参数，其中键作为字典中的索引。具体实现如下。


//向字典添加元素

function add( key , value ){
  this.dataStore[key] = value;
}

实现过程简洁明了，接下来介绍 find 方法。

find：查找字典中的元素

基于键值对存储机制，只需传入待查找的键，即可直接获取对应值。在 JavaScript 数组操作中，这一过程同样简单。


//查找字典中的元素

function find( key ){
  return this.dataStore[key];
}

完成添加与查找后，接下来实现删除功能。

remove：删除字典中的一个元素

删除元素即移除一个键值对，需借助 JavaScript 内置的 delete 函数。该函数可同时删除键及其对应的值，因此 remove 方法的定义较为简单。


//删除一个元素

function remove( key ){
  if( this.dataStore[key] ) delete this.dataStore[key];
  else return 'Not Found';
}

此外，为了展示字典中所有键值对，需实现 showAll 方法。

showAll：显示字典中所以键值对


//显示字典元素

function showAll () {
  for( var key in this.dataStore ){
    console.log( key + '->' + this.dataStore[key] );
  }
}

基本操作完成后，进行小测试验证。


//实例化字典类

var directory = new Dictionary();

//添加元素

directory.add( 'Jack' , '138****5505' );
directory.add( 'Alice' , '156****6606');
directory.add( 'Tom' , '180****8808');

//显示字典

directory.showAll();     // Jack->138****5505
               // Alice->156****6606
               // Tom->180****8808
            
directory.remove( 'Tom' );
directory.showAll();     // Jack->138****5505
               // Alice->156****6606

回顾定义过程，发现 count 和 clear 两个方法尚未实现，下面补充实现。

count：查看字典中元素的个数

该方法实用性强，但实现方式可能出乎意料。先查看具体实现。


//查看字典中元素的个数

function count(){
  var n = 0 ;
  for ( var key in this.dataStore ){
    ++n;
  }
  return n;
}

为何不直接使用 length 属性？这涉及一个常见误区：当键为字符串时，数组的 length 属性失效。示例如下。


var nums = [ 0 , 1 , 2 ] ;

console.log(nums.length)    // 3

var directory = [];
directory['Jack'] = '138****5505';
directory['Alice'] = '156****6606';
directory['Tom'] = '180****8808';

console.log(directory.length)  // 0

这揭示了一个潜在陷阱。接下来实现最后一个 clear 方法。

clear：清空字典


//清空字典

function clear(){
  for( var key in this.dataStore ){
    delete this.dataStore[key];
  }
}

至此，字典主要功能基本完成，利用上述代码继续测试。


console.log(directory.count());   // 2
directory.clear();
console.log(directory.count());   // 0

字典通常通过键取值，无需关心实际存储顺序，但显示时希望内容有序。只需对 showAll 方法稍作改造即可实现。


//改造后的showAll

function showAll(){
  var sortKeys = Object.keys(this.dataStore).sort();
  for( var key in sortKeys ){
    console.log( sortKeys[key] + '->' + this.dataStore[sortKeys[key]] );
  }
}

新方法获取键后进行了 sort 排序，新方法的输出效果如下。


// 重新打印上述字典

directory.showAll();    // Alice->156****6606
              // Jack->138****5505
              // Tom->180****8808

需注意，showAll 方法中 Object.keys().sort() 排序后返回的是新数组，形式如下。


//sortKeys

["Alice", "Jack", "Tom"]

此时数组的 key 为 0、1、2，逻辑更加清晰。

至此，已基本了解字典相关内容，并可使用 JavaScript 自行实现字典，效果显著。

感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

作者最新文章

什么时候该用JS构造器：与工厂模式、字面量的选择对比

2026-11-05 16:18:22

推荐几款轻量级JS照片墙开源库及对比

2026-11-05 15:56:19

JavaScript递归写法有哪些常见陷阱及避免方法

2026-11-05 14:53:38

JS数组浅拷贝与深拷贝怎么选？场景与方法总结

2026-11-05 14:41:02

p5.js 中 setup() 和 draw() 函数的执行机制详解

2026-11-05 12:32:38