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

Question

如何从 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？

- flossfan

---

你正在寻找 for...in，但是你的循环语义不正确。 - Jon

如果这些是对象中唯一的值，我建议将结构更改为：var top_brands = {'Adidas': 100, 'Nike': 50}; - Felix Kling

可能是重复的问题：如何获取Javascript对象的所有属性值（不知道键名）？ - Felix Kling

Answer 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}中没有语义。什么是"Nike"？什么是50？

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

更好的方法是{vendor: 'Nike', itemsSold: 50}，因为现在值不仅位于可预测的位置，而且还具有有意义的名称。从技术上讲，这与上面的相同，但是现在人们也能理解这些值应该意味着什么。

- Tomalak

---

添加“key”和“value”是多余的（而且重复），特别是如果您需要通过网络传递大量数据。修改对象将使整个JSON blob的重量增加一倍以上。在这里，简单的“for key in object”就足够了。 - ekeyser

JSON字符串的大小是另一回事。具有可预测形式且不混淆结构和数据的对象在代码中处理起来要容易得多。{Nike: 50}可能较小，但它没有语义价值。此外，for..in不是迭代对象的安全方法，不应使用它。 - Tomalak

Answer 2

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

- thecodeparadox

Answer 3

如果这是对象将要存储的所有内容，那么最好的字面量(literal)就是：

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

接下来你只需要使用一个 for...in 循环即可。

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

- Graham

Answer 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方法：

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

- xdazz

Answer 5

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

- Harish

Answer 6

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

顺便提一下，注意在古老的浏览器中不支持Object.keys和forEach，但你应该使用一些polyfill。

- Jakob