如何获取 JavaScript 字典中的键集合？ [复制]答案

【问题标题】：How can I get a collection of keys in a JavaScript dictionary? [duplicate]如何获取 JavaScript 字典中的键集合？ [复制]
【发布时间】：2012-05-26 04:01:07
【问题描述】：

我有一本字典：

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

现在，我需要在下拉列表中显示它。如何获取字典中的键集合？

【问题讨论】：

stackoverflow.com/questions/8763125/get-array-of-objects-keys

标签： javascript dictionary

【解决方案1】：

在旧版浏览器中使用 Object.keys() 或 shim...

const keys = Object.keys(driversCounter);

如果你想要values，有Object.values()，如果你想要key 和 value，你可以使用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);
}

【讨论】：

dict.hasOwnProperty(key)

【解决方案2】：

一个选项是使用Object.keys()：

Object.keys(driversCounter)

它适用于现代浏览器（但是，Internet Explorer 仅从 version 9 开始支持它）。

要添加兼容支持，您可以复制 MDN 中提供的代码 sn-p。

【讨论】：

【解决方案3】：

要遍历“字典”（我们在 JavaScript 中将其称为对象），请使用 for in 循环：

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

【讨论】：

【解决方案4】：

这适用于所有 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);
            }
        }
    }
}

【讨论】：

【解决方案5】：

只需使用Object.keys():

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

【讨论】：

这与之前的答案有何不同？

【解决方案6】：

借助现代 JavaScript 引擎，您可以使用 Object.keys(driversCounter)。

【讨论】：

【解决方案7】：

对于新浏览器：Object.keys( MY_DICTIONARY ) 将返回一个键数组。否则你可能想走老路：

var keys = []
for(var key in dic) keys.push( key );

【讨论】：

由于可能的原型设计不完整。

【解决方案8】：

正如其他人所说，您可以使用Object.keys()，但谁在乎旧浏览器，对吧？

嗯，我愿意。

试试this。 array_keys 来自 PHPJS ports PHP 的方便的 array_keys 函数，所以它可以在 JavaScript 中使用。

乍一看，它使用Object.keys（如果支持），但它处理不太容易的情况。它甚至包括根据您可能正在寻找的值过滤键（可选）和切换是否使用严格比较=== 与类型转换比较==（可选）。

【讨论】：

【解决方案9】：

如果你可以使用jQuery，那么

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

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

答案如下：

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

这样你就不用担心浏览器是否支持Object.keys方法。

【讨论】：

【解决方案10】：

另一种方法是使用多维数组：

var driversCounter = [
    ["one", 1], 
    ["two", 2], 
    ["three", 3], 
    ["four", 4], 
    ["five", 5]
]

并通过 driverCounter[k][j] 访问该值，其中 j=0,1 在这种情况下。
通过以下方式将其添加到下拉列表中：

var dd = document.getElementById('your_dropdown_element');
for(i=0;i<driversCounter.length-1;i++)
{
    dd.options.add(opt);
    opt.text = driversCounter[i][0];
    opt.value = driversCounter[i][1];
}

【讨论】：