专栏首页前端鼓励师从 0 开始学习 JavaScript 数据结构与算法(九)字典

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

字典

字典特点

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

字典和映射的关系

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

字典常见的操作

  • 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 数据结构与算法(七)双向链表

从 0 开始学习 JavaScript 数据结构与算法(八)集合

本文分享自微信公众号 - 前端鼓励师(FE-Cheerleaders),作者:XPoet

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-04-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从 0 开始学习 JavaScript 数据结构与算法(三)栈

    数组是一个线性结构,并且可以在数组的任意位置插入和删除元素。但是有时候,我们为了实现某些功能,必须对这种任意性加以限制。栈和队列就是比较常见的受限的线性结构。

    XPoet
  • 从 0 开始学习 JavaScript 数据结构与算法(十一)树

    如图,树结构的组成方式类似于链表,都是由一个个节点连接构成。不过,根据每个父节点子节点数量的不同,每一个父节点需要的引用数量也不同。比如节点 A 需要 3 个引...

    XPoet
  • 从 0 开始学习 JavaScript 数据结构与算法(十二)图

    在计算机程序设计中,图也是一种非常常见的数据结构,图论其实是一个非常大的话题,在数学上起源于哥尼斯堡七桥问题。

    XPoet
  • 从 0 开始学习 JavaScript 数据结构与算法(八)集合

    几乎每种编程语言中,都有集合结构。集合比较常见的实现方式是哈希表,这里使用 JavaScript 的 Object 进行封装。

    XPoet
  • 从 0 开始学习 JavaScript 数据结构与算法(四)队列

    队列(Queue)是一种运算受限的线性表,特点:先进先出。(FIFO:First In First Out)

    XPoet
  • 从 0 开始学习 JavaScript 数据结构与算法(十)哈希表

    哈希表是一种非常重要的数据结构,几乎所有的编程语言都直接或者间接应用这种数据结构。

    XPoet
  • 从 0 开始学习 JavaScript 数据结构与算法(五)优先队列

    XPoet
  • 从 0 开始学习 JavaScript 数据结构与算法(六)单向链表

    单向链表类似于火车,有一个火车头,火车头会连接一个节点,节点上有乘客,并且这个节点会连接下一个节点,以此类推。

    XPoet
  • 从 0 开始学习 JavaScript 数据结构与算法(七)双向链表

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

    XPoet
  • 从0开始的Python学习012数据结构&对象与类

    在Python中三种内建的数据结构--列表、元组和字典。学会了使用它们会使编程变得的简单。

    Happy、Liu
  • 数据结构与算法学习笔记之 从0编号的数组

    数组看似简单,但掌握精髓的却没有多少;他既是编程语言中的数据类型,又是最基础的数据结构;

    Dawnzhang
  • Python学习路线

    标签: 无 ...

    KEVINGUO_CN
  • awesome-programming-books

    100+ 经典技术书籍,涵盖:计算机系统与网络、系统架构、算法与数据结构、前端开发、后端开发、移动开发、测试、项目与团队、程序员职业修炼、求职面试 和 编程相关...

    guanguans
  • 从Go语言开始,彻底学懂数据结构与算法 -- 线性表

    用一个定长数组data[]存储数据,最大空间为Maxsize,用length记录实际的元素个数,即数组的长度。

    宇宙之一粟
  • 数据结构与算法学习笔记之先进先出的队列 数据结构与算法学习笔记之写链表代码的正确姿势(下)数据结构与算法学习笔记之 提高读取性能的链表(上)数据结构与算法学习笔记之 从0编号的数组数据结构与算法学

      队列是一种非常实用的数据结构,类似于生活中发排队,可应用于生活,开发中各个方面,比如共享打印机(先请求先打印),消息队列。你想知道他们是怎么工作的么。那就来...

    Dawnzhang
  • Google Earth Engine谷歌地球引擎JavaScript代码基础规则与语句

      本文主要对GEE中的JavaScript代码基础规则与语句、函数等加以介绍。本文是谷歌地球引擎(Google Earth Engine,GEE)系列教学文章...

    疯狂学习GIS
  • 全栈开发自学日志(持续更新)

    筑梦师winston
  • 力扣 (LeetCode)-合并两个有序数组,字典,散列表

    Github来源:力扣 (LeetCode)|刷题打卡 | 求星星 ✨ | 给个❤️关注,❤️点赞,❤️鼓励一下作者

    达达前端
  • 十本学习前端必看书籍,让你效率提升10倍

    自学最苦的莫过于自己一个人摸索没有人带路,本人现在推荐几套适合自学的书籍,希望能帮到大家。 第一本,入门 《Head first HTML&CSS》 最好的入门...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券