web-dev-qa-db-ja.com

javascript辞書でキーのコレクションを取得する方法は？

辞書があります：

var driversCounter = {
 "one": 1, 
 "two": 2, 
 "three": 3, 
 "four": 4, 
 "five": 5
}

次に、ドロップダウンリストに表示する必要があります。辞書でキーのコレクションを取得する方法は？

javascriptdictionary
80
FreeVice

Object.keys() または shim 古いブラウザでは...

const keys = Object.keys(driversCounter);

valuesが必要な場合、 Object.values() があり、キーand値、 Object.entries() を使用できます。多くの場合、このようにArray.prototype.forEach()とペアになります...

Object.entries(driversCounter).forEach(([key, value]) => {
   console.log(key, value);
});

あるいは、ユースケースを考慮して、これでうまくいくかもしれません...

var selectBox, option, prop;

selectBox = document.getElementById("drivers");

for (prop in driversCounter) {
   option = document.createElement("option");
   option.textContent = prop;
   option.value = driversCounter[prop];
   selectBox.add(option);
}
124
alex

1つのオプションは Object.keys() を使用しています。

Object.keys(driversCounter)

最新のブラウザで問題なく動作します（ただし、IEはバージョン9以降でのみサポートしています）。

互換性のあるサポートを追加するには、MDNで提供されているコードスニペットをコピーできます。

54
VisioN

「辞書」（JSではオブジェクトと呼びます）をループするには、for inループを使用します。

for(var key in driversCounter) {
    if(driversCounter.hasOwnProperty(key)) {
        //key                 = keys,  left of the ":"
        //driversCounter[key] = value, right of the ":"
    }
}
19
Joseph

これはすべてのJavaScript実装で機能します。

var keys = [];

for (var key in driversCounter) {
    if (driversCounter.hasOwnProperty(key)) {
        keys.Push(key);
    }
}

Object.keysを使用する前に言及した他の人と同様に、古いエンジンでは機能しない場合があります。したがって、次のモンキーパッチを使用できます。

if (!Object.keys) {
    Object.keys = function (object) {
        var keys = [];

        for (var key in object) {
            if (object.hasOwnProperty(key)) {
                keys.Push(key);
            }
        }
    }
}
9
Aadit M Shah

Object.Keys()を使用します

var driversCounter = {
                      "one": 1,
                      "two": 2,
                      "three": 3,
                      "four": 4,
                      "five": 5
                     }
console.log(Object.keys(driversCounter));
5
Amil Sajeev

最新のJSエンジンでは、Object.keys(driversCounter)を使用できます

3
ThiefMaster

新しいブラウザの場合：Object.keys( MY_DICTIONARY )はキーの配列を返します。それ以外の場合は、旧式の方法を使用することをお勧めします。

var keys = []
for(var key in dic) keys.Push( key );
3
Parth Thakkar

他の人が言ったように、あなたはできましたObject.keys()を使用しますが、古いブラウザを気にする人はいますか？

まあ、私は。

this を試してください。 PHPJSからのarray_keysは、JSで使用できるようにPHPの便利なarray_keys関数を移植します。一見、サポートされている場合はObject.keysを使用しますが、非常に簡単でない場合は処理します。探している値に基づいてキーをフィルタリングする（オプション）と、厳密な比較===と型キャスト比較==（オプション）を使用するかどうかを切り替えることも含まれます。

1
Niet the Dark Absol

jQueryを使用できる場合

var keys = []; 
$.each(driversCounter, function(key, value) { 
    keys.Push(key); 
}); 

console.log(JSON.stringify(keys));

答えは次のとおりです。

["one","two","three","four","five"]

このようにすると、ブラウザがObject.keysメソッドをサポートしているかどうかを心配する必要がなくなります。

1
Darius Kucinskas