脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript中Hash Map的实现

详解JavaScript中Hash Map映射结构的实现

 更新时间：2016年05月21日 16:03:19   作者：kittyjie  
Hash Map通常在JavaScript中作为一个简单的来存储键值对的地方,不过哈希对象Object并不是一个真正的哈希映射,没Java中的Hash Map来的那么强大,well,接下来带大家详解JavaScript中Hash Map映射结构的实现

Hash Map通常在JavaScript中作为一个简单的来存储键值对的地方。然而，Object并不是一个真正的哈希映射，如果使用不当可能会带来潜在的问题。而且JavaScript可能不提供本地哈希映射（至少不是跨浏览器兼容的），有一个更好的声明对象属性的方法。

Hash Map的简单实现：

var hashMap = { 
  Set : function(key,value){this[key] = value}, 
  Get : function(key){return this[key]}, 
  Contains : function(key){return this.Get(key) == null?false:true}, 
  Remove : function(key){delete this[key]} 
}

使用方法示例：

hashMap.Set("name","John Smith"); 
hashMap.Set("age",24); 
hashMap.Get("name");//John Smith 
hashMap.Contains("title");//false 
hashMap.Contains("name");//true 
hashMap.Remove("age");

在Object声明成员的问题

该问题可能缘于对象原型链的继承机制。就拿toString方法来说，如果使用in操作符来判断对象是否存在的话：

var map = {};
'toString' in map; // true

因为in操作符会从所有原型继续对象查找该对象是否存在。要解决这个问题，可使用hasOwnProperty方法检测该对象是否存在：

var map = {};
map.hasOwnProperty('toString'); // false

这个方法可以工作地很正常，不过如果你定义了一个hasOwnProperty属性那可能就麻烦了：

var map = {};
map.hasOwnProperty = 'foo';
map.hasOwnProperty('hasOwnproperty'); // TypeError

快速修复这个的方法是使用原生对象的方法。

var map = {};
map.hasOwnProperty = 'foo';
{}.hasOwnProperty.call(map, 'hasOwnproperty'); // true


这种方法不会引起任何问题，每次你判断对象中的属性是否存在时都要过滤掉原型链中的方法：

var map = {};
var has = {}.hasOwnProperty;

for(var key in map){
 if(has.call(map, key)){
  // do something
 }
}

裸对象

创建一个真正的Hash Map的诀窍是解藕所有的原型对象。我们可以通过 Object.create 来实现这个效果

var obj = {};
// is equivalent to:
var obj = Object.create(Object.prototype);



另外，这种方法可以让你完全放弃原型，直接使用 null 来继承。

var map = Object.create(null);

map instanceof Object; // false
Object.prototype.isPrototypeOf(map); // false
Object.getPrototypeOf(map); // null


这些裸对象（或字典）是作为Hasp Map的理想选择。因为不会有任何冲突，它会抵制任何类型转换，比如这样就会产生错误。

var map = Object.create(null);
map + ""; // TypeError: Cannot convert object to primitive value

这里没有任何保留字，它就是为Hash Map设计的，比如。

var map = Object.create(null);
'toString' in map; // false
更进一步，for ... in 循环变得更加简单了，我们只需要把循环写成这样。
var map = Object.create(null);

for(var key in map){
 // do something
}

除了这些区别，它使用起来跟一般的Object键值存储没有任何区别。该对象可以被序列化，可以声明原型和被继承，上下文变量的使用也是一样的。

var map = Object.create(null);

Object.defineProperties(map, {
 'foo': {
  value: 1,
  enumerable: true
 },
 'bar': {
  value: 2,
  enumerable: false
 }
});

map.foo; // 1
map['bar']; // 2

JSON.stringify(map); // {"foo":1}

{}.hasOwnProperty.call(map, 'foo'); // true
{}.propertyIsEnumerable.call(map, 'bar'); // false

甚至上面提到的那些变量检测方法同样适用。

var map = Object.create(null);

typeof map; // object
{}.toString.call(map); // [object Object]
{}.valueOf.call(map); // Object {}

您可能感兴趣的文章:

相关文章

  • JavaScript替换当前页面的方法

    JavaScript替换当前页面的方法

    这篇文章主要介绍了JavaScript替换当前页面的方法,涉及javascript中replace方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • JavaScript的六种继承方式(推荐)

    JavaScript的六种继承方式(推荐)

    继承是面向对象编程中又一非常重要的概念，JavaScript支持实现继承，不支持接口继承，实现继承主要依靠原型链来实现的
    2017-06-06
  • JS去除字符串中空格的方法

    JS去除字符串中空格的方法

    这篇文章主要介绍了JS去除字符串中空格的方法,涉及javascript字符串的正则、遍历、运算等相关操作技巧,需要的朋友可以参考下
    2017-02-02
  • JavaScript设计模式策略模式案例分享

    JavaScript设计模式策略模式案例分享

    这篇文章主要介绍了JavaScript设计模式策略模式案例分享，策略设计模式就是指一个问题匹配多个解决方法，不一定要用到哪一个，而且有可能随时增加多个方案
    2022-06-06
  • js 绑定键盘鼠标事件示例代码

    js 绑定键盘鼠标事件示例代码

    用jq提交时想同时按回车键可以提交，此时就不要用form,需要的朋友可以参考下
    2014-02-02
  • js实现内容显示并使用json传输数据

    js实现内容显示并使用json传输数据

    这篇文章主要为大家详细介绍了js实现内容显示并使用json传输数据的方法，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 探析浏览器执行JavaScript脚本加载与代码执行顺序

    探析浏览器执行JavaScript脚本加载与代码执行顺序

    本文主要基于向HTML页面引入JavaScript的几种方式，分析HTML中JavaScript脚本的执行顺序问题，通过本文给大家分享浏览器执行JavaScript脚本加载与代码执行顺序，对浏览器执行javascript及执行顺序相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • JavaScript获取function所有参数名的方法

    JavaScript获取function所有参数名的方法

    本文使用javascript获取function所有参数名的方法，对js获取function所有参数名感兴趣的朋友一起学习吧
    2015-10-10
  • JavaScript重定向URL参数的两种方法小结

    JavaScript重定向URL参数的两种方法小结

    关于JavaScript重定向URL参数的实现方法网站有很多，这篇文章的主要内容是从网上查找，并进行了修改，简单粗暴的实现使用JavaScript重置url参数，文中给出了详细的示例代码和调用代码，对大家的理解和学习很有帮助，感兴趣的朋友们下面来一起看看吧。
    2016-10-10
  • Javascript的表单与验证-非空验证

    Javascript的表单与验证-非空验证

    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。本文给大家介绍javascript的表单与验证-非空验证，对javascript表单验证相关知识感兴趣的朋友一起学习吧
    2016-03-03

最新评论