Получить ключ и значение объекта в JavaScript?

Учитывая массив объектов 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 для каждой записи в массиве?

Ответ 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}, потому что теперь значения не только в предсказуемых местах, но и имеют значимые имена. Технически это то же самое, что и выше, но теперь человек также понимает, что означают значения.

Ответ 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

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

Btw, обратите внимание, что Object.keys и forEach недоступны в старых браузерах, но вы все равно должны использовать некоторые polyfill.

Ответ 6

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