在JavaScript中存儲key => value數組的最佳方法？

Question

在javascript中存儲key=>value數組的最佳方法是什么，以及如何循環？

每個元素的鍵應該是一個標記，例如{id}或只是id ，值應該是id的數值。

它應該是現有javascript類的元素，或者是可以通過類輕松引用的全局變量。

可以使用jQuery。

Answer 1

這就是JavaScript對象：

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

你可以使用for..in循環for..in它：

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

另請參閱： 使用對象 （MDN）。

在ECMAScript6中還有Map （參見那里的瀏覽器兼容性表）：

• Object有一個原型，因此地圖中有默認鍵。 這可以通過使用自ES5以來的map = Object.create（null）來繞過，但很少完成。

• Object的鍵是字符串和符號，它們可以是Map的任何值。

• 您必須手動跟蹤對象的大小，才能輕松獲得Map的大小。

Answer 2

如果我理解正確的話：

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

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

Answer 3

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

Answer 4

在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);
    });

});

輸出 -

我的名字是詹姆斯，我是一個6英尺1的程序員

詹姆斯

職業程序員

height Object {feet：6，inches：1}

在像php這樣的語言中，這將被認為是具有鍵值對的多維數組，或者是數組中的數組。 我假設是因為你問過如何循環鍵值數組你想知道如何獲得一個對象（key => value array），就像上面的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");
    });

});

輸出 -

我的名字是Joshua，我是一名5英尺11的CEO

我的名字是詹姆斯，我是一個6英尺1的程序員

我的名字是彼得，我是一個4英尺10的設計師

我的名字是Joshua，我是一名5英尺11的CEO

請注意，在循環外部我必須使用方括號語法和數字鍵，因為這現在是一個數字索引的對象數組，當然在循環內部隱含數字鍵。

Answer 5

只需這樣做

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

Answer 6

我知道它已經很晚了但對那些想要其他方式的人來說可能會有所幫助。 另一種可以存儲數組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;  

    });  

    

Answer 7

今天我們發布了名為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變量應駐留在其中的命名空間。