如何使用JavaScript/JQuery创建一个简单的地图

Mar*_*eon 188 javascript jquery hashmap

如何创建与此Java代码等效的JavaScript/JQuery:

Map map = new HashMap(); //Doesn't not have to be a hash map, any key/value map is fine
map.put(myKey1, myObj1);
map.put(myKey2, myObj2); //Repeat n times

function Object get(k) {
    return map.get(k);
}
Run Code Online (Sandbox Code Playgroud)

Sim*_*olt 285

编辑:过期答案,ECMAScript 2015(ES6)标准javascript有一个Map实现,请在此处阅读以获取更多信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

var map = new Object(); // or var map = {};
map[myKey1] = myObj1;
map[myKey2] = myObj2;

function get(k) {
    return map[k];
}

//map[myKey1] == get(myKey1);
Run Code Online (Sandbox Code Playgroud)

  • 更新了我的答案,使用`new Object()`而不是`new Array()`.见[本文](http://andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/) (11认同)
  • 该答案现在已经过时,因为Map现在确实存在(是!),请阅读以下内容:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map (3认同)

Sim*_*mon 75

只需使用普通对象:

var map = { key1: "value1", key2: "value2" }
function get(k){
  return map[k];
}
Run Code Online (Sandbox Code Playgroud)


小智 23

function Map() {
    this.keys = new Array();
    this.data = new Object();

    this.put = function (key, value) {
        if (this.data[key] == null) {
            this.keys.push(key);
        }
        this.data[key] = value;
    };

    this.get = function (key) {
        return this.data[key];
    };

    this.remove = function (key) {
        this.keys.remove(key);
        this.data[key] = null;
    };

    this.each = function (fn) {
        if (typeof fn != 'function') {
            return;
        }
        var len = this.keys.length;
        for (var i = 0; i < len; i++) {
            var k = this.keys[i];
            fn(k, this.data[k], i);
        }
    };

    this.entrys = function () {
        var len = this.keys.length;
        var entrys = new Array(len);
        for (var i = 0; i < len; i++) {
            entrys[i] = {
                key: this.keys[i],
                value: this.data[i]
            };
        }
        return entrys;
    };

    this.isEmpty = function () {
        return this.keys.length == 0;
    };

    this.size = function () {
        return this.keys.length;
    };
}
Run Code Online (Sandbox Code Playgroud)

  • 至少,将所有这些方法放在原型上. (4认同)
  • `this.data [key] = null`不会删除该属性; 它只是将其值设置为"null".你应该使用`delete this.data [key]`代替. (4认同)
  • @Adshi:[在Javascript中使用'原型'与'这个'?](/sf/ask/21760931/) (3认同)

Ric*_*ich 21

这是一个老问题,但由于现有的答案可能非常危险,我想留下这个答案给将来可能在这里绊倒的人们...

基于使用Object作为HashMap的答案被破坏,如果您使用除String之外的任何东西作为键,则会导致极其恶劣的后果.问题是使用.toString方法将对象属性强制转换为Strings.这可能导致以下肮脏:

function MyObject(name) {
  this.name = name;
};
var key1 = new MyObject("one");
var key2 = new MyObject("two");

var map = {};
map[key1] = 1;
map[key2] = 2;
Run Code Online (Sandbox Code Playgroud)

如果您期望Object的行为方式与此处的Java Map相同,那么您会发现map只包含一个带有String键的条目[object Object]:

> JSON.stringify(map);
{"[object Object]": 2}
Run Code Online (Sandbox Code Playgroud)

这显然不是 Java的HashMap的替代品.奇怪的是,鉴于它的年龄,Javascript目前没有通用的地图对象.尽管如此,仍然有希望:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map虽然浏览一下Browser Compatability表会显示这不是准备好在通用网络应用程序中使用.

与此同时,您可以做的最好的事情是:

  • 故意使用字符串作为键.即使用显式字符串作为键而不是依赖于您使用的键的隐式.toString-ing.
  • 确保您用作键的对象具有明确定义的.toString()方法,该方法适合您理解这些对象的唯一性.
  • 如果您不想/不想更改关键对象的.toString,则在存储和检索条目时,将对象转换为表示您对唯一性的理解的字符串.例如map[toUniqueString(key1)] = 1

但有时候,这是不可能的.如果要基于(例如File对象)映射数据,则没有可靠的方法来执行此操作,因为File对象公开的属性不足以确保其唯一性.(您可能有两个File对象代表磁盘上的不同文件,但在浏览器中无法区分它们).在这些情况下,不幸的是,您所能做的就是重构您的代码,以消除将这些存储在may中的需要; 也许,通过使用数组而仅通过索引引用它们.


Dav*_*vid 16

var map = {'myKey1':myObj1, 'mykey2':myObj2};
// You don't need any get function, just use
map['mykey1']
Run Code Online (Sandbox Code Playgroud)


小智 5

如果您不限于JQuery,则可以使用prototype.js框架.它有一个名为Hash的类:你甚至可以一起使用JQuery和prototype.js.只需输入jQuery.noConflict();

var h = new Hash();
h.set("key", "value");
h.get("key");
h.keys(); // returns an array of keys
h.values(); // returns an array of values
Run Code Online (Sandbox Code Playgroud)