JavaScriptにkey => value配列を格納する最良の方法は？

key=>valueJavaScriptで配列を格納するための最良の方法は何ですか？それをどのようにループできますか？

各要素のキーのような、タグでなければならない{id}ばかりか、idその値は、IDの数値でなければなりません。

これは、既存のJavaScriptクラスの要素であるか、クラスを通じて簡単に参照できるグローバル変数である必要があります。

jQueryを使用できます。

これがJavaScriptオブジェクトです。

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

loopを使用してfor..inループすることができます：

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

参照：オブジェクトの操作（MDN）。

ECMAScript6には次のものもありますMap（ブラウザの互換性表を参照してください）。

• オブジェクトにはプロトタイプがあるため、マップにはデフォルトのキーがあります。これはES5以降、map = Object.create（null）を使用して回避できましたが、ほとんど行われていませんでした。

• オブジェクトのキーは文字列とシンボルであり、マップの任意の値にすることができます。

• オブジェクトのサイズを手動で追跡する必要がある場合でも、マップのサイズを簡単に取得できます。

私があなたを正しく理解した場合：

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

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

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 }

キーを使用してマップの値を取得します

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

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のプログラマーです

名前ジェームズ

職業プログラマー

高さオブジェクト{フィート：6、インチ：1}

phpのような言語では、これはキーと値のペアを持つ多次元配列、または配列内の配列と見なされます。キー値の配列をループする方法について質問したので、上記のpersonオブジェクトのようなオブジェクト（key => value配列）を取得する方法を知りたいと思っているとしましょう。たとえば、複数の人がいるとします。

さて、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 ft 11のCEOです

私の名前はジェームズです。私は6フィート1のプログラマーです

私の名前はピーターで、4 ft 10のデザイナーです

私の名前はジョシュアで、私は5 ft 11のCEOです

ループの外側では数値キーを使用して角かっこ構文を使用する必要があることに注意してください。これは、数値でインデックス付けされたオブジェクトの配列であり、もちろんループの内側では数値キーが暗示されているためです。

配列内のオブジェクト：

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

単にこれを行う

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

私は遅いことを知っていますが、他の方法が欲しい人には役立つかもしれません。配列key => valuesを格納できる別の方法は、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;  

    });  

    

本日、laravel-blade-javascriptという新しいパッケージをリリースしました。PHP変数をJavaScriptにエクスポートするためのjavascript Bladeディレクティブを提供します。したがって、基本的には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変数が存在する必要がある名前空間を設定することもできます。