在 JavaScript 中获取对象的键和值？答案

【问题标题】：Get key and value of object in JavaScript?在 JavaScript 中获取对象的键和值？
【发布时间】：2012-05-23 10:52:36
【问题描述】：

给定一个 JavaScript 对象数组，如何获取每个对象的键和值？

下面的代码显示了我想做的事情，但显然不起作用：

var top_brands = [ { 'Adidas' : 100 }, { 'Nike' : 50 }];
var brand_options = $("#top-brands");
$.each(top_brands, function() {
  brand_options.append($("<option />").val(this.key).text(this.key + " "  + this.value));
});

那么，如何为数组中的每个条目获取this.key 和this.value？

【问题讨论】：

您正在寻找for...in，但您的循环的语义是错误的。
如果这些是对象中唯一的值，我建议将结构更改为：var top_brands = {'Adidas': 100, 'Nike': 50};
How to get all properties values of a Javascript Object (without knowing the keys)?的可能重复

标签： javascript jquery

【解决方案1】：

改变你的对象。

var top_brands = [ 
  { key: 'Adidas', value: 100 }, 
  { key: 'Nike', value: 50 }
];

var $brand_options = $("#top-brands");

$.each(top_brands, function(brand) {
  $brand_options.append(
    $("<option />").val(brand.key).text(brand.key + " " + brand.value)
  );
});

根据经验：

一个对象有数据和结构。
'Adidas'、'Nike'、100 和 50 是数据。
对象键是结构。使用数据作为对象键在语义上是错误的。避免它。

{Nike: 50} 中没有语义。什么是“耐克”？ 50 是多少？

{key: 'Nike', value: 50} 稍微好一点，因为现在您可以迭代这些对象的数组，并且值位于可预测的位置。这使得编写处理它们的代码变得容易。

{vendor: 'Nike', itemsSold: 50} 更好，因为现在值不仅位于可预测的位置，而且还具有有意义的名称。从技术上讲，这与上述相同，但现在人们也会理解这些值的含义。

【讨论】：

添加“key”和“value”是无关紧要的（并且是重复的），尤其是当您需要通过网络传递大量此类信息时。修改 obj 比这里的总 json blob 的权重增加了一倍多。简单的“for key in object”在这里可以正常工作。
JSON 字符串的权重是另一回事。具有可预测形式且不会混淆结构和数据的对象方式更易于在代码中使用。 {Nike: 50} 可能更小，但它没有 semantic 值。此外，for.. in 不是迭代对象的安全方式，您不应该使用它。

【解决方案2】：

$.each(top_brands, function() {
  var key = Object.keys(this)[0];
  var value = this[key];
  brand_options.append($("<option />").val(key).text(key + " "  + value));
});

【讨论】：

【解决方案3】：

如果这是要存储的所有对象，那么最好的文字是

var top_brands = {
    'Adidas' : 100,
    'Nike'   : 50
    };

那么你只需要一个for...in 循环。

for (var key in top_brands){
    console.log(key, top_brands[key]);
    }

【讨论】：

【解决方案4】：

$.each(top_brands, function(index, el) {
  for (var key in el) {
    if (el.hasOwnProperty(key)) {
         brand_options.append($("<option />").val(key).text(key+ " "  + el[key]));
    }
  }
});

但是如果你的数据结构是var top_brands = {'Adidas': 100, 'Nike': 50};，那么事情就简单多了。

for (var key in top_brands) {
  if (top_brands.hasOwnProperty(key)) {
       brand_options.append($("<option />").val(key).text(key+ " "  + el[key]));
  }
}

或者分别使用jquery：

$.each(top_brands, function(key, value) {
    brand_options.append($("<option />").val(key).text(key + " "  + value));
});

【讨论】：

【解决方案5】：

for (var i in a) {
   console.log(a[i],i)
}

【讨论】：

【解决方案6】：

Object.keys(top_brands).forEach(function(key) {
  var value = top_brands[key];
  // use "key" and "value" here...
});

顺便说一句，请注意 Object.keys 和 forEach 在古代浏览器中不可用，但无论如何你应该使用一些 polyfill。

【讨论】：