首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS模拟实现哈希表及应用详解

Posted in Javascript onMay 04, 2018

本文实例讲述了JS模拟实现哈希表及应用。分享给大家供大家参考，具体如下：

在算法中，尤其是有关数组的算法中，哈希表的使用可以很好的解决问题，所以这篇文章会记录一些有关js实现哈希表并给出解决实际问题的例子。

说明： 这篇文章所写并不是真正意义的哈希表，只是与哈希表的使用有相似之处。

第一部分：相关知识点

属性的枚举:

var person = {
  name: "zzw",
  sex: "Male",
  age: 21
};
for (var prop in person) {
  console.log(prop + " ",person[prop]);
}

输出：

JS模拟实现哈希表及应用详解

即对于对象而言，我们可以使用for in来枚举对象的属性。

属性的删除：

var person = {
  name: "zzw",
  sex: "Male",
  age: 21
};
var ifRemove = delete person.name;
for (var prop in person) {
  console.log(prop + " ",person[prop]);
}
console.log(ifRemove);

对象的属性可以通过 delete 来删除，并且会有一个返回值。 如下：

JS模拟实现哈希表及应用详解

注意： 一般只有对象的属性才可以删除，而变量是不能删除的，如：

var x = 1;
console.log(delete x);

这时打印台输出false，因为变量是不可被删除的。

检测属性是否存在：

var person = {
  name: "zzw",
  sex: "Male",
  age: 21
};
console.log("age" in person);
console.log("someOther" in person);

前者返回true，后者返回false。 即我们可以使用in来确定一个对象是否含有该属性。

属性的添加：

var person = {
  name: "zzw",
  sex: "Male",
  age: 21
};
person["school"] = "XJTU";
console.log(person);

属性的添加非常简单，如上所示，最终打印出来的对象是包含 school 属性的。

第二部分: 使用js实现哈希表

下面是通过构造函数得到一个哈希表，在使用时只需实例化即可，且下面的功能较为丰富，在实际问题中，我们可以选择性的使用 。

// 创建构造函数HashTable
function HashTable() {
    // 初始化哈希表的记录条数size
    var size = 0;
    // 创建对象用于接受键值对
    var res = {};
    // 添加关键字，无返回值
    this.add = function (key, value) {
      //判断哈希表中是否存在key，若不存在，则size加1，且赋值
      if (!this.containKey(key)) {
        size++;
      }
      // 如果之前不存在，赋值； 如果之前存在，覆盖。
      res[key] = value;
    };
    // 删除关键字, 如果哈希表中包含key，并且delete返回true则删除，并使得size减1
    this.remove = function (key) {
      if (this.containKey(key) && (delete res[key])) {
        size--;
      }
    };
    // 哈希表中是否包含key，返回一个布尔值
    this.containKey = function (key) {
      return (key in res);
    };
    // 哈希表中是否包含value，返回一个布尔值
    this.containValue = function (value) {
      // 遍历对象中的属性值，判断是否和给定value相等
      for (var prop in res) {
        if (res[prop] === value) {
          return true;
        }
      }
      return false;
    };
    // 根据键获取value,如果不存在就返回null
    this.getValue = function (key) {
      return this.containKey(key) ? res[key] : null;
    };
    // 获取哈希表中的所有value, 返回一个数组
    this.getAllValues = function () {
      var values = [];
      for (var prop in res) {
        values.push(res[prop]);
      }
      return values;
    };
    // 根据值获取哈希表中的key，如果不存在就返回null
    this.getKey = function (value) {
      for (var prop in res) {
        if (res[prop] === value) {
          return prop;
        }
      }
      // 遍历结束没有return，就返回null
      return null;
    };
    // 获取哈希表中所有的key,返回一个数组
    this.getAllKeys = function () {
      var keys = [];
      for (var prop in res) {
        keys.push(prop);
      }
      return keys;
    };
    // 获取哈希表中记录的条数，返回一个数值
    this.getSize = function () {
      return size;
    };
    // 清空哈希表，无返回值
    this.clear = function () {
      size = 0;
      res = {};
    };
}

第三部分： 应用实例

问题：给定一个整型的数组（无序），找出其中的两个数使得其和为某个指定的值，并返回这两个数的下标（数组下标从0开始），假设数组元素的值各不相同。

实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>哈希表的使用</title>
</head>
<body>
  <script>
  function queryIndex(arr, result) {
    var hashTable = new HashTable();
    var arrLength = arr.length;
    var sub = [];
    for (var i = 0; i < arrLength; i++) {
      // 扫描一遍，存储下标和值
      hashTable.add(i, arr[i]);
    }
    for (var j = 0; j < arrLength; j++) {
      if (hashTable.containValue(result - arr[j]) && result !== 2*arr[j]) {
        // 获取两个下标，跳出循环
        sub.push(j);
        var antherIndex = Number(hashTable.getKey(result - arr[j]));
        sub.push(antherIndex);
        break;
      }
    }
    if (sub.length !== 0) {
      return sub;
    } else {
      return -1;
    }
  }
  console.log(queryIndex([1,5,7,3,8], 15)); // 2, 4
  console.log(queryIndex([8,18,28,12,29,17], 46)); // 2, 4
  console.log(queryIndex([8,18,28,12,29,17], 2)); // -1
   // 创建构造函数HashTable
  function HashTable() {
    // 初始化哈希表的记录条数size
    var size = 0;
    // 创建对象用于接受键值对
    var res = {};
    // 添加关键字，无返回值
    this.add = function (key, value) {
      //判断哈希表中是否存在key，若不存在，则size加1，且赋值
      if (!this.containKey(key)) {
        size++;
      }
      // 如果之前不存在，赋值； 如果之前存在，覆盖。
      res[key] = value;
    };
    // 删除关键字, 如果哈希表中包含key，并且delete返回true则删除，并使得size减1
    this.remove = function (key) {
      if (this.containKey(key) && (delete res[key])) {
        size--;
      }
    };
    // 哈希表中是否包含key，返回一个布尔值
    this.containKey = function (key) {
      return (key in res);
    };
    // 哈希表中是否包含value，返回一个布尔值
    this.containValue = function (value) {
      // 遍历对象中的属性值，判断是否和给定value相等
      for (var prop in res) {
        if (res[prop] === value) {
          return true;
        }
      }
      return false;
    };
    // 根据键获取value,如果不存在就返回null
    this.getValue = function (key) {
      return this.containKey(key) ? res[key] : null;
    };
    // 获取哈希表中的所有value, 返回一个数组
    this.getAllValues = function () {
      var values = [];
      for (var prop in res) {
        values.push(res[prop]);
      }
      return values;
    };
    // 根据值获取哈希表中的key，如果不存在就返回null
    this.getKey = function (value) {
      for (var prop in res) {
        if (res[prop] === value) {
          return prop;
        }
      }
      // 遍历结束没有return，就返回null
      return null;
    };
    // 获取哈希表中所有的key,返回一个数组
    this.getAllKeys = function () {
      var keys = [];
      for (var prop in res) {
        keys.push(prop);
      }
      return keys;
    };
    // 获取哈希表中记录的条数，返回一个数值
    this.getSize = function () {
      return size;
    };
    // 清空哈希表，无返回值
    this.clear = function () {
      size = 0;
      res = {};
    };
  }
  </script>
</body>
</html>

在实际的使用过程中，我们可以先写出主要的功能，然后有需要再添加。

JS模拟实现哈希表及应用详解

- Author -

Wayne-Zhu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
Jquery Ajax学习实例3 向WebService发出请求，调用方法返回数据
Mar 16 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
微信小程序select下拉框实现源码
Nov 08 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 Javascript
vue地区选择组件教程详解
May 04 #Javascript
Vue 按键修饰符处理事件的方法
May 04 #Javascript
vue mint-ui tabbar变组件使用
May 04 #Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 #Javascript
原生javascript AJAX 三级联动的实现代码
May 04 #Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 #Javascript
vue裁切预览组件功能的实现步骤
May 04 #Javascript
后端(1) 限流(2) 递归(1) 内置模块(1) 限速(1) tokenizer(1) Parser(1) tcp/ip(1) 双人对弈(1) IP(1)
You might like
Zerg基本策略
2020/03/14 星际争霸
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
php调用c接口无错版介绍
2014/03/11 PHP
php实现文件下载实例分享
2014/06/02 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
jQuery中关于ScrollableGridPlugin.js（固定表头）插件的使用逐步解析
2014/07/17 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
js字符串倒序的实例代码
2018/11/30 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
python ansible服务及剧本编写
2017/12/29 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
Opodo英国旅游网站：预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
澳大利亚手袋、珠宝和在线时尚精品店：The Way
2019/12/21 全球购物
寒假实习自荐信
2014/01/26 职场文书
教学实验楼管理制度
2014/02/01 职场文书
个人实习生的自我评价
2014/02/16 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书