Як отримати доступ до властивостей об’єкта javascript, якщо я не знаю імен?


124

Скажіть, у вас є такий об'єкт javascript:

var data = { foo: 'bar', baz: 'quux' };

Ви можете отримати доступ до властивостей за назвою властивості:

var foo = data.foo;
var baz = data["baz"];

Але чи можна отримати ці значення, якщо ви не знаєте назву властивостей? Невпорядкованість цих властивостей унеможливлює їх розрізнення?

У моєму випадку я конкретно думаю про ситуацію, коли функції потрібно прийняти ряд пар імен-значень, але назви властивостей можуть змінюватися.

Мої думки про те, як це зробити поки що, - передавати назви властивостей функції разом із даними, але це відчувається як хак. Я вважаю за краще зробити це з інтроспекцією, якщо це можливо.

Відповіді:


144

Ви можете переглядати такі клавіші:

for (var key in data) {
  console.log(key);
}

Це журнали "Ім'я" та "Значення".

Якщо у вас є більш складний тип об'єкта (не просто звичайний хеш-об'єкт, як у первісному запитанні), вам потрібно буде провести циклічну передачу лише через ключі, що належать до самого об'єкта, на відміну від ключів у прототипі об'єкта :

for (var key in data) {
  if (data.hasOwnProperty(key)) {
    console.log(key);
  }
}

Як ви зазначили, ключі не гарантуються в певному порядку. Зверніть увагу, чим це відрізняється від наступного:

for each (var value in data) {
  console.log(value);
}

Цей приклад проходить цикл через значення, щоб він увійшов Property Nameі 0. Примітка: for eachсинтаксис здебільшого підтримується лише у Firefox, але не в інших браузерах.

Якщо ваші цільові браузери підтримують ES5 або ваш веб-сайт включає es5-shim.js(рекомендовано), ви також можете використовувати Object.keys:

var data = { Name: 'Property Name', Value: '0' };
console.log(Object.keys(data)); // => ["Name", "Value"]

і петлю Array.prototype.forEach:

Object.keys(data).forEach(function (key) {
  console.log(data[key]);
});
// => Logs "Property Name", 0

Ви щойно зробили цей останній і фактично пішли з нього? Молодці ... =)
nickl-

Це існує в Firefox ( docs ), але справедливо, що це не універсально. Я оновлю відповідь, щоб згадати про це.
Рон ДеВера

28
Попередження btw - це поганий спосіб налагодження речей, спробуйте console.log
StackOverflowed

Це було найкращою відповіддю на запитання, але я знімаю галочку, оскільки пізніші версії JS надали кращі інструменти.
Адам Лассек

65

Старі версії JavaScript (<ES5) вимагають використання for..inциклу:

for (var key in data) {
  if (data.hasOwnProperty(key)) {
    // do something with key
  }
}

ES5 представляє Object.keys та Array # forEach, що робить це трохи простіше:

var data = { foo: 'bar', baz: 'quux' };

Object.keys(data); // ['foo', 'baz']
Object.keys(data).map(function(key){ return data[key] }) // ['bar', 'quux']
Object.keys(data).forEach(function (key) {
  // do something with data[key]
});

ES2017 представляє Object.valuesта Object.entries.

Object.values(data) // ['bar', 'quux']
Object.entries(data) // [['foo', 'bar'], ['baz', 'quux']]

1
Тепер це насправді відповідає на питання, молодець @Adam Lassek, дуже добре зроблено.
nickl-

Вводити в оманні ключі як ім’я, так і значення. Ця функція повертає лише ключі у списку, а не значення. {name1: 'value1', name2: 'value2'} уникне плутанини для початківців. Object.keys (дані); // ['name1', 'name2']
Джеймс Нікольсон

2
@JamesNicholson Я погоджуюсь, відредагований як менш заплутаний.
Адам Лассек


4

Вам часто захочеться вивчити конкретні властивості примірника об'єкта без усіх методів та властивостей спільного прототипу:

 Obj.prototype.toString= function(){
        var A= [];
        for(var p in this){
            if(this.hasOwnProperty(p)){
                A[A.length]= p+'='+this[p];
            }
        }

    return A.join(', ');
}

3
function getDetailedObject(inputObject) {
    var detailedObject = {}, properties;

    do {
        properties = Object.getOwnPropertyNames( inputObject );
        for (var o in properties) {
            detailedObject[properties[o]] = inputObject[properties[o]];
        }
    } while ( inputObject = Object.getPrototypeOf( inputObject ) );

    return detailedObject;
}

Це отримає всі властивості та їх значення (успадковані чи власні, перелічені чи ні) у новому об’єкті. оригінальний об’єкт недоторканий. Тепер новий об’єкт можна пройти за допомогою

var obj = { 'b': '4' }; //example object
var detailedObject = getDetailedObject(obj);
for(var o in detailedObject) {
    console.log('key: ' + o + '   value: ' + detailedObject[o]);
}

1
var obj = {
 a: [1, 3, 4],
 b: 2,
 c: ['hi', 'there']
 }
for(let r in obj){  //for in loop iterates all properties in an object
 console.log(r) ;  //print all properties in sequence
 console.log(obj[r]);//print all properties values
}

де ця відповідь надає те, що вимагає ОП, але невеликий опис того, що ви робите, і чому ОП повинна використовувати це було б непогано, також не забувайте, .hasOwnProperty()коли використовуєте для переробки об'єкта.
Мухаммед Омер Аслам

Дякую, я погоджуюся з тим, що .hasOwnProperty () ітералює об'єкт, але він повторює перевірку стану, проте, використовуючи його, ми не можемо надрукувати всі властивості об'єкта. Виправте мене, якщо я помиляюся.
Mayank_VK

У hasOwnProperty()повертає метод A , booleanякий вказує , чи має об'єкт вказане властивість в якості свого власного майна (на відміну від спадкування його) . дивись цей приклад
Мухаммед Омер Аслам

1

Ви можете використовувати Object.keys () , "який повертає масив власних перелічених імен властивостей даного об'єкта в тому ж порядку, який ми отримуємо із звичайним циклом."

Ви можете використовувати будь-який об’єкт замість stats:

var stats = {
  a: 3,
  b: 6,
  d: 7,
  erijgolekngo: 35
}
/*  this is the answer here  */
for (var key in Object.keys(stats)) {
  var t = Object.keys(stats)[key];
  console.log(t + " value =: " + stats[t]);
}


Чи можете ви додати більше пояснень?
Кіт Пінсон

Object.keys( stats )[key]немає сенсу, завжди буде undefined.
Адам Лассек

-2
var attr, object_information='';

for(attr in object){

      //Get names and values of propertys with style (name : value)
      object_information += attr + ' : ' + object[attr] + '\n'; 

   }


alert(object_information); //Show all Object

Це нічого не додає до прийнятої відповіді і подає інформацію якнайменше корисним способом. І це не враховує успадковані властивості.
Адам Лассек
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.