在JavaScript中存储key =>值数组的最佳方法?

时间:2009-07-17 17:36:15

标签: javascript jquery

在javascript中存储key=>value数组的最佳方法是什么?如何循环使用?

每个元素的键应该是一个标记,例如{id}id,该值应该是id的数值。

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

可以使用jQuery。

8 个答案:

答案 0 :(得分:355)

这就是JavaScript对象:

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

您可以使用for..in loop

循环播放它
for (var key in myArray) {
  console.log("key " + key + " has value " + myArray[key]);
}

另见:Working with objects(MDN)。

在ECMAScript6中还有Map(参见那里的浏览器兼容性表):

  
      
  • 对象有一个原型,因此地图中有默认键。这可以通过使用自ES5以来的map = Object.create(null)来绕过,但很少完成。

  •   
  • 对象的键是字符串和符号,它们可以是地图的任何值。

  •   
  • 当您必须手动跟踪对象的大小时,您可以轻松获取地图的大小。

  •   

答案 1 :(得分:90)

如果我理解正确的话:

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

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

答案 2 :(得分:12)

您可以使用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

获取地图的大小

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

地图

中存在检查键
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 }

获取地图的元素

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

仅打印地图的按键

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

// Output:
// name
// id

仅打印地图的值

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

// Output:
// John
// 11

答案 3 :(得分:9)

在javascript中,键值数组存储为对象。在javascript中有像数组这样的东西,但它们在某种程度上也被认为是对象,请检查这些人的答案 - Why can I add named properties to an array as if it were an object?

通常使用方括号语法和使用大括号语法的对象(“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);
    });

});

输出 -

我的名字是詹姆斯,我是一名6英尺1的程序员

詹姆斯名字

职业程序员

height Object {feet:6,inches:1}

在像php这样的语言中,这将被视为具有键值对的多维数组,或者数组中的数组。我假设是因为你询问了如何循环键值数组,你想知道如何获得一个对象(key => value数组),就像上面的person对象一样,让我们​​说,不止一个人。

好吧,既然我们知道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的首席执行官

我的名字是詹姆斯,我是一名6英尺1的程序员

我的名字是Peter,我是一名4英尺10的设计师

我的名字是约书亚,我是一名5英尺11的首席执行官

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

答案 4 :(得分:1)

数组内的对象:

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

答案 5 :(得分:0)

我知道它已经很晚了但对那些想要其他方式的人来说可能会有所帮助。另一种可以存储数组key =>值的方法是使用一个名为map()的数组方法; (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)你也可以使用箭头功能     

 
    var countries = ['Canada','Us','France','Italy'];  
// Arrow Function
countries.map((value, key) => key+ ' : ' + value );
// Anonomous Function
countries.map(function(value, key){
return key + " : " + value;
});

答案 6 :(得分:0)

只需执行

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

答案 7 :(得分:-3)

今天,我们发布了名为laravel-blade-javascript的新软件包。它为您提供了一个JavaScript Blade指令,可将PHP变量导出到JavaScript。因此,它基本上与Jeffrey Way流行的PHP-Vars-To-Js-Transformer程序包相同,但是它不是在控制器中导出变量,而是由程序包提供视图。

下面是如何使用它的示例:

@javascript('key', 'value')

渲染的视图将输出:

<script type="text/javascript">window['key'] = 'value';</script>

因此,您现在可以在浏览器中访问键变量:

console.log(key); //outputs "value"

您还可以使用一个参数:

@javascript(['key' => 'value'])

将输出与第一个示例相同的结果。

您还可以使用配置文件来设置所有导出的JavaScript变量都应驻留在其中的命名空间。