JavaScript中存储键值数组的最佳方式是什么？

Question

JavaScript中存储键值数组的最佳方式是什么？

javascriptjquery

353

什么是在Javascript中存储key=>value数组的最佳方法，以及如何遍历该数组？

每个元素的键应该是一个标签，例如{id}或仅仅是id，而值应该是该ID的数字值。

它应该是现有Javascript类的元素，或者是一个全局变量，可以通过类轻松地引用。

可以使用jQuery。

- Ali

用$.each迭代哈希表不行吗？这是非常标准的做法。 - kgiannakakis

31

为什么你想在这个简单的基本任务中使用jQuery，kgiannakakis？ - Artem Russakovskii

8

如果您已经使用jQuery，使用$.each迭代比简单的for循环更易于阅读。 - kgiannakakis

@kgiannakakis 这个推理非常简单，但对于每个人来说并不是那么显而易见，正如我们在这里看到的一样。;-) - sdlins

4

дҪ еҸҜд»ҘдҪҝз”ЁJavaScriptеҶ…зҪ®зҡ„Array.prototype.forEachжқҘд»ЈжӣҝдҪҝз”ЁjQueryйҒҚеҺҶж•°з»„зҡ„ж“ҚдҪңгҖӮиҝҷж ·еҒҡдёҚд»…жӣҙеҠ з®ҖжҙҒпјҢиҖҢдё”иғҪеӨҹжҸҗй«ҳжҖ§иғҪгҖӮ - jotch

7个回答

118

如果我理解你的意思正确：

var hash = {};
hash['bob'] = 123;
hash['joe'] = 456;

var sum = 0;
for (var name in hash) {
    sum += hash[name];
}
alert(sum); // 579

- Blixt

2

hash['length'] = 问题。 - Herbert Van-Vliet

80

你可以使用Map。

Map是 JavaScript ES6 中引入的一种新数据结构。

它可以替代 JavaScript 对象来存储键值对。

还有一些方便的方法用于迭代键值对。

var map = new Map();
map.set('name', 'John');
map.set('id', 11);

// Get the full content of the Map
console.log(map); // Map { 'name' => 'John', 'id' => 11 }

使用键获取Map的值

console.log(map.get('name')); // John 
console.log(map.get('id')); // 11

获取 Map 的大小

console.log(map.size); // 2

检查 Map 中是否存在指定的键

console.log(map.has('name')); // true
console.log(map.has('age')); // false

获取密钥

console.log(map.keys()); // MapIterator { 'name', 'id' }

获取值

console.log(map.values()); // MapIterator { 'John', 11 }

获取 Map 的元素

for (let element of map) {
  console.log(element);
}

// Output:
// [ 'name', 'John' ]
// [ 'id', 11 ]

打印键值对

for (let [key, value] of map) {
  console.log(key + " - " + value);
}

// Output: 
// name - John
// id - 11

打印 Map 的键(key)

for (let key of map.keys()) {
  console.log(key);
}

// Output:
// name
// id

仅打印Map的值

for (let value of map.values()) {
  console.log(value);
}

// Output:
// John
// 11

- Mukesh Chapagain

4

似乎它与JSON.stringify()不兼容。 - kenorb

2

@kenorb 这是 ES6，使用 JSON.stringify([...map]);。 - Robert

21

在JavaScript中，一个键值数组被存储为对象。虽然JavaScript中有数组，但它们也被认为是一种对象，可以查看此人的答案 - 为什么我可以像操作对象那样给数组添加命名属性？通常使用方括号语法来表示数组，而使用花括号语法表示对象（"key=>value"数组），但是您也可以像Alexey Romanov所示使用方括号语法访问和设置对象属性。

在JavaScript中，数组通常只使用数字、自动递增的键，但是JavaScript对象还可以保存命名键值对、函数甚至其他对象。

简单数组示例：

$(document).ready(function(){

    var countries = ['Canada','Us','France','Italy'];
    console.log('I am from '+countries[0]);
    $.each(countries, function(key, value) {
        console.log(key, value);
    });

});

输出 -

0 "加拿大"

1 "美国"

2 "法国"

3 "意大利"

以上我们可以看到，使用jQuery.each函数可以循环遍历一个数字数组，并通过具有数值键的方括号访问循环外的信息。

简单对象（json）

$(document).ready(function(){

    var person = {
        name: "James",
        occupation: "programmer",
        height: {
            feet: 6,
            inches: 1
        },
    }

    console.log("My name is "+person.name+" and I am a "+person.height.feet+" ft "+person.height.inches+" "+person.occupation);

    $.each(person, function(key, value) {
        console.log(key, value);
    });

});

输出 -

我的名字是James，我是一位身高6英尺1英寸的程序员

名字 James

职业程序员

身高 Object {feet: 6, inches: 1}

在像php这样的语言中，这被认为是一个具有键值对的多维数组，或者说是一个数组中嵌套了另一个数组。我假设你问如何遍历键值数组是因为你想知道如何获取像上面那个人对象一样的对象（键=>值数组），让我们说，不止一个人。

既然我们现在知道javascript数组通常用于数值索引，而对象更灵活地用于关联索引，我们将它们结合起来创建一个对象数组，可以通过循环遍历，如下所示 -

JSON数组（对象数组） -

$(document).ready(function(){

    var people = [
        {
            name: "James",
            occupation: "programmer",
            height: {
                feet: 6,
                inches: 1
            }
        }, {
            name: "Peter",
            occupation: "designer",
            height: {
                feet: 4,
                inches: 10
            }
        }, {
            name: "Joshua",
            occupation: "CEO",
            height: {
                feet: 5,
                inches: 11
            }
        }
    ];

    console.log("My name is "+people[2].name+" and I am a "+people[2].height.feet+" ft "+people[2].height.inches+" "+people[2].occupation+"\n");

    $.each(people, function(key, person) {
        console.log("My name is "+person.name+" and I am a "+person.height.feet+" ft "+person.height.inches+" "+person.occupation+"\n");
    });

});

输出 -

我的名字是乔舒亚，身高5英尺11寸，是一位CEO。

我的名字是詹姆斯，身高6英尺1寸，是一名程序员。

我的名字是彼得，身高4英尺10寸，是一名设计师。

请注意，在循环外部，我必须使用方括号语法和数字键，因为这现在是一个按数字索引的对象数组，当然在循环内部数字键是隐含的。

- kiko carisse

讲解得很清楚，帮助我解决了一个问题，我正在构建一个捕捉高度的东西。 - pranay

12

数组中的对象:

var cars = [
        { "id": 1, brand: "Ferrari" }
        , { "id": 2, brand: "Lotus" }
        , { "id": 3, brand: "Lamborghini" }
    ];

- Tadej

10

只需这样做

var key = "keyOne";
var obj = {};
obj[key] = someValue;

- Faizan Qureshi

这就是帮助我的方法。简单地进行了一些调整，同样在我的 HTML 的 <script> 标签中进行了相同的操作，然后它就起作用了。我想知道为什么如果我不单独声明一个关键变量，HTML 就无法理解！ - Arjun Kalidas

1

I know its late but it might be helpful for those that want other ways. Another way array key=>values can be stored is by using an array method called map(); (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) you can use arrow function too

 
    var countries = ['Canada','Us','France','Italy'];  

    // Arrow Function  

    countries.map((value, key) => key+ ' : ' + value );  

    // Anonomous Function  

    countries.map(function(value, key){  

         return key + " : " + value;  

    });

- krialex21

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexey Romanov · Accepted Answer

这就是 JavaScript 对象的本质：

var myArray = {id1: 100, id2: 200, "tag with spaces": 300};
myArray.id3 = 400;
myArray["id4"] = 500;

你可以使用for..in循环遍历它：

for (var key in myArray) {
  console.log("key " + key + " has value " + myArray[key]);
}

另请参阅：使用对象 (MDN)。

在 ECMAScript6 中，还有一个Map（请参阅那里的浏览器兼容性表）：

对象具有原型，因此地图中有默认键。自 ES5 以来可以通过使用 map = Object.create(null) 来绕过这一点，但很少这样做。

对象的键是字符串和符号，而地图的键可以是任何值。

您可以轻松获取 Map 的大小，而必须手动跟踪 Object 的大小。