从 0 开始学习 JavaScript 数据结构与算法（九）字典

XPoet

发布于 2021-04-26 14:32:52

1.2K0

文章被收录于专栏：前端鼓励师前端鼓励师

字典

字典特点

字典存储的是键值对，主要特点是一一对应。
比如保存一个人的信息
- 数组形式：[19，"Tom", 1.65]，可通过下标值取出信息。
- 字典形式：{"age": 19, "name": "Tom", "height": 165}，可以通过 key 取出 value。
此外，在字典中 key 是不能重复且无序的，而 Value 可以重复。

字典和映射的关系

有些编程语言中称这种映射关系为字典，如 Swift 中的 Dictonary，Python 中的 dict。
有些编程语言中称这种映射关系为 Map，比如 Java 中的 HashMap 和 TreeMap 等。

字典常见的操作

set(key,value) 向字典中添加新元素。
remove(key) 通过使用键值来从字典中移除键值对应的数据值。
has(key) 如果某个键值存在于这个字典中，则返回 true，反之则返回 false。
get(key) 通过键值查找特定的数值并返回。
clear() 将这个字典中的所有元素全部删除。
size() 返回字典所包含元素的数量。与数组的 length 属性类似。
keys() 将字典所包含的所有键名以数组形式返回。
values() 将字典所包含的所有数值以数组形式返回。

字典封装

代码实现

// 字典结构的封装
export default class Map {
  constructor() {
    this.items = {};
  }

  // has(key) 判断字典中是否存在某个 key
  has(key) {
    return this.items.hasOwnProperty(key);
  }

  // set(key, value) 在字典中添加键值对
  set(key, value) {
    this.items[key] = value;
  }

  // remove(key) 在字典中删除指定的 key
  remove(key) {
    // 如果集合不存在该 key，返回 false
    if (!this.has(key)) return false;
    delete this.items[key];
  }

  // get(key) 获取指定 key 的 value，如果没有，返回 undefined
  get(key) {
    return this.has(key) ? this.items[key] : undefined;
  }

  // 获取所有的 key
  keys() {
    return Object.keys(this.items);
  }

  // 获取所有的 value
  values() {
    return Object.values(this.items);
  }

  // size() 获取字典中的键值对个数
  size() {
    return this.keys().length;
  }

  // clear() 清空字典中所有的键值对
  clear() {
    this.items = {};
  }
}

代码测试

const map = new Map();

// set() 测试
map.set("name", "XPoet");
map.set("age", 18);
map.set("email", "i@xpoet.cn");
console.log(map); // {items: {name: "XPoet", age: 18, email: "i@xpoet.cn"}}

// has() 测试
console.log(map.has("name")); //--> true
console.log(map.has("address")); //--> false

// remove() 测试
map.remove("name");
console.log(map); // {age: 18, email: "i@xpoet.cn"}

// get() 测试
console.log(map.get("age")); //--> 18

// keys() 测试
console.log(map.keys()); //--> ["age", "email"]

// values() 测试
console.log(map.values()); //--> [18, "i@xpoet.cn"]

// size() 测试
console.log(map.size()); //--> 2

本专辑所有文章&源码&测试环境均托管在 GitHub 仓库[1] 欢迎同学们 Star 和 Fork。

参考资料

[1]

GitHub 仓库: https://github.com/XPoet/js-data-structures-and-algorithms

专辑：

从 0 开始学习 JavaScript 数据结构与算法（一）前言

从 0 开始学习 JavaScript 数据结构与算法（二）数组结构

从 0 开始学习 JavaScript 数据结构与算法（三）栈

从 0 开始学习 JavaScript 数据结构与算法（四）队列

从 0 开始学习 JavaScript 数据结构与算法（五）优先队列

从 0 开始学习 JavaScript 数据结构与算法（六）单向链表

从 0 开始学习 JavaScript 数据结构与算法（七）双向链表