Итерация по свойствам объекта

Question

Итерация по свойствам объекта

 var obj = {
  name: "Simon",
  age: "20",
  clothing: {
   style: "simple",
   hipster: false
  }
 }

 for(var propt in obj){
  alert(propt + ': ' + obj[propt]);
 }

Как работает переменная propt представлять свойства объекта? Это не встроенный метод или свойство. Тогда почему он подходит к каждому свойству объекта?

2363

javascript loops object

Источник

user1048252 29 ноя '11 в 14:30

33 ответа

Другие вопросы по тегам javascript loops object

user2417527 24 май '13 в 12:38 2013-05-24 12:38 · Answer 1 · 2013-05-24 12:38

Перебор свойств требует этого дополнительного hasOwnProperty проверять:

for (var property in object) {
    if (object.hasOwnProperty(property)) {
        // do stuff
    }
}

Это необходимо, потому что прототип объекта содержит дополнительные свойства для объекта, которые являются технически частью объекта. Эти дополнительные свойства унаследованы от базового класса объекта, но все еще являются свойствами object,

hasOwnProperty просто проверяет, является ли это свойство специфичным для этого класса, а не наследуемым от базового класса.

user1351261 13 авг '13 в 07:19 2013-08-13 07:19 · Answer 2 · 2013-08-13 07:19

Начиная с JavaScript 1.8.5 вы можете использовать Object.keys(obj) получить массив свойств, определенных для самого объекта (те, которые возвращают true для obj.hasOwnProperty(key)).

Object.keys(obj).forEach(function(key,index) {
    // key: the name of the object key
    // index: the ordinal position of the key within the object 
});

Это лучше (и более читабельно), чем использование цикла for-in.

Поддерживается в следующих браузерах:

Firefox (Gecko): 4 (2,0)
Хром: 5
Internet Explorer: 9

Дополнительную информацию смотрите в справочнике Mozilla Developer Network Object.keys ().

user1073330 22 ноя '16 в 08:47 2016-11-22 08:47 · Answer 3 · 2016-11-22 08:47

Девочки и парни, мы находимся в 2017 году, и у нас не так много времени для набора текста... Итак, давайте сделаем этот крутой новый модный ECMAScript 2016:

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));

383

Источник

user1073330 22 ноя '16 в 08:47

13 сен '16 в 06:41 2016-09-13 06:41 · Answer 4 · 2016-09-13 06:41

В следующих версиях ES вы можете использовать Object.entries:

for (const [key, value] of Object.entries(obj)) { }

или же

Object.entries(obj).forEach(([key, value]) => ...)

Если вы просто хотите перебрать значения, используйте Object.values:

for (const value of Object.values(obj)) { }

или же

Object.values(obj).forEach(value => ...)

265

Источник

13 сен '16 в 06:41

user118068 29 ноя '11 в 14:32 2011-11-29 14:32 · Answer 5 · 2011-11-29 14:32

Это for...in statement ( MDN, спецификация ECMAScript).

Вы можете прочитать это как " ДЛЯ каждого свойства в obj объект, присвойте каждое свойство переменной PROPT по очереди ".

230

Источник

user118068 29 ноя '11 в 14:32

user139010 29 ноя '11 в 14:33 2011-11-29 14:33 · Answer 6 · 2011-11-29 14:33

Это просто for...in петля. Проверьте документацию в Mozilla.

44

Источник

user139010 29 ноя '11 в 14:33

user7594095 12 ноя '19 в 19:43 2019-11-12 19:43 · Answer 7 · 2019-11-12 19:43

if(Object.keys(obj).length) {
    Object.keys(obj).forEach(key => {
        console.log("\n" + key + ": " + obj[key]);
    });
}

// *** Explanation line by line ***

// Explaining the bellow line
// It checks if obj has at least one property. Here is how:
// Object.keys(obj) will return an array with all keys in obj.
// Keys are just the regular incremental numbers starting from 0.
// If there is no keys in obj, it will return empty array = []
// Then it will get its length. At this point, it checks: 
// If it has at least one element, it means it's bigger than 0 
// which evaluates to true and the bellow code will be executed.
// Else means it's length = 0 which evaluates to false
// NOTE: you can use Object.hasOwnProperty() instead of Object.keys(obj).length
if(Object.keys(obj).length) {

    // Explaining the bellow line
    // Just like in the previous line, this returns an array with
    // all keys in obj (because if code execution got here, it means 
    // obj has keys.) 
    // Then just invoke built-in javascript forEach() to loop
    // over each key in returned array and calls a call back function 
    // on each array element (key), using ES6 arrow function (=>)
    // Or you can just use a normal function ((key) { blah blah }).
    Object.keys(obj).forEach(key => {

        // The bellow line prints out all keys with their 
        // respective value in obj.
        // key comes from the returned array in Object.keys(obj)
        // obj[key] returns the value of key in obj
        console.log("\n" + key + ": " + obj[key]);
    });
}

user1244127 07 окт '17 в 21:27 2017-10-07 21:27 · Answer 8 · 2017-10-07 21:27

Если ваша среда поддерживает ES2017, я бы порекомендовал Object.entries:

Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`);
});

Как показано в документации Mozillas Object.entries():

Метод Object.entries () возвращает массив пар перечислимого свойства [key, value] собственного объекта данного объекта в том же порядке, что и в цикле for... in (отличие состоит в том, что цикл for-in перечисляет свойства в цепи прототипа).

По сути, с Object.entries мы можем отказаться от следующего дополнительного шага, который необходим для старшего цикла for... in:

// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
  // do stuff
}

user330867 19 янв '18 в 11:03 2018-01-19 11:03 · Answer 9 · 2018-01-19 11:03

Ответ Доминика идеален, я просто предпочитаю делать так, потому что читать чище:

for (var property in object) {
    if (!object.hasOwnProperty(property)) continue;

    // Do stuff...
}

26

Источник

user330867 19 янв '18 в 11:03

user1033684 29 мар '16 в 15:19 2016-03-29 15:19 · Answer 10 · 2016-03-29 15:19

jquery позволяет вам сделать это сейчас:

$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

22

Источник

user1033684 29 мар '16 в 15:19

user5832000 24 янв '16 в 03:57 2016-01-24 03:57 · Answer 11 · 2016-01-24 03:57

Цикл for... in представляет каждое свойство объекта, поскольку оно похоже на цикл for. Вы определили propt в цикле for... in, выполнив:

    for(var propt in obj){
alert(propt + ': ' + obj[propt]);
}

Цикл for... in перебирает перечисляемые свойства объекта. Независимо от того, какую переменную вы определяете или помещаете в цикл for... in, она изменяется каждый раз, когда переходит к следующему свойству, которое она выполняет. Переменная в цикле for... in перебирает ключи, но ее значение является значением ключа. Например:

    for(var propt in obj) {
      console.log(propt);//logs name
      console.log(obj[propt]);//logs "Simon"
    }

Вы можете увидеть, как переменная отличается от значения переменной. Напротив, цикл for... делает противоположное.

Надеюсь, это поможет.

user789757 05 май '17 в 18:30 2017-05-05 18:30 · Answer 12 · 2017-05-05 18:30

let obj = {"a": 3, "b": 2, "6": "a"}

Object.keys(obj).map((item) => {console.log("item", obj[item])})

// a
// 3
// 2

20

Источник

user789757 05 май '17 в 18:30

user4625144 28 июн '18 в 12:49 2018-06-28 12:49 · Answer 13 · 2018-06-28 12:49

Чтобы добавить использование ES2015 Reflect.ownKeys(obj) а также перебирая свойства через итератор.

Например:

let obj = { a: 'Carrot', b: 'Potato', Car: { doors: 4 } };

может быть повторен

// logs each key
Reflect.ownKeys(obj).forEach(key => console.log(key));

Если вы хотите выполнить итерацию непосредственно над значениями ключей объекта, вы можете определить iteratorтак же, как итераторы JavaScipts по умолчанию для строк, массивов, типизированных массивов, Map и Set.

JS попытается выполнить итерацию через свойство итератора по умолчанию, которое должно быть определено как Symbol.iterator,

Если вы хотите иметь возможность перебирать все объекты, вы можете добавить его в качестве прототипа Object:

Object.prototype[Symbol.iterator] = function*() { 
    for(p of Reflect.ownKeys(this)){ yield this[p]; }
}

Это позволит вам перебирать значения объекта с помощью цикла for..., например:

for(val of obj) { console.log('Value is:' + val ) }

Внимание: на момент написания этого ответа (июнь 2018 г.) все другие браузеры, кроме IE, поддерживают генераторы и for...of итерация через Symbol.iterator

user6541639 28 окт '17 в 05:39 2017-10-28 05:39 · Answer 14 · 2017-10-28 05:39

Приведенные выше ответы немного раздражают, потому что они не объясняют, что вы делаете внутри цикла for после того, как убедитесь, что это объект: ВЫ НЕ ПОЛУЧАЕТЕ ЕГО ПРЯМО! На самом деле вы получили только КЛЮЧ, который вам нужен для подачи заявления в OBJ:

var obj = {
  a: "foo",
  b: "bar",
  c: "foobar"
};

// We need to iterate the string keys (not the objects)
for(var someKey in obj)
{
  // We check if this key exists in the obj
  if (obj.hasOwnProperty(someKey))
  {
    // someKey is only the KEY (string)! Use it to get the obj:
    var myActualPropFromObj = obj[someKey]; // Since dynamic, use [] since the key isn't literally named "someKey"

    // NOW you can treat it like an obj
    var shouldBeBar = myActualPropFromObj.b;
  }
}

Это все безопасно ECMA5. Даже работает в хромых версиях JS, таких как Rhino;)

user10336767 06 окт '20 в 08:27 2020-10-06 08:27 · Answer 15 · 2020-10-06 08:27

Вы можете получить доступ к вложенным свойствам объекта, используя for...in и forEach петля.

`for...in`:

for (const key in info) {
    consoled.log(info[key]);
}

`forEach`:

Object.keys(info).forEach(function(prop) {
    console.log(info[prop]);
    // cities: Array[3], continent: "North America", images: Array[3], name: "Canada"
    // "prop" is the property name
    // "data[prop]" is the property value
});

17

Источник

user10336767 06 окт '20 в 08:27

user2652540 04 ноя '16 в 16:51 2016-11-04 16:51 · Answer 16 · 2016-11-04 16:51

Вы можете использовать Lodash. Документация

var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
    ...
});

14

Источник

user2652540 04 ноя '16 в 16:51

user1417223 25 апр '18 в 11:02 2018-04-25 11:02 · Answer 17 · 2018-04-25 11:02

Object.keys(obj).forEach(key =>
  console.log(`key=${key} value=${obj[key]}`)
);

13

Источник

user1417223 25 апр '18 в 11:02

user4543207 09 авг '16 в 10:43 2016-08-09 10:43 · Answer 18 · 2016-08-09 10:43

В настоящее время вы можете преобразовать стандартный объект JS в итерируемый объект, просто добавив метод Symbol.iterator. Тогда вы можете использовать for of Цикл и принять его значения напрямую или даже может использовать оператор распространения на объекте тоже. Здорово. Давайте посмотрим, как мы можем это сделать:

var o = {a:1,b:2,c:3},
    a = [];
o[Symbol.iterator] = function*(){
                       var ok = Object.keys(this);
                            i = 0;
                       while (i < ok.length) yield this[ok[i++]];
                     };
for (var value of o) console.log(value);
// or you can even do like
a = [...o];
console.log(a);

user1011616 29 ноя '11 в 14:33 2011-11-29 14:33 · Answer 19 · 2011-11-29 14:33

Ваш for цикл перебирает все свойства объекта obj, propt определяется в первой строке вашего цикла for. Это строка, которая является именем свойства obj объект. На первой итерации цикла propt будет "имя".

11

Источник

user1011616 29 ноя '11 в 14:33

29 ноя '11 в 14:34 2011-11-29 14:34 · Answer 20 · 2011-11-29 14:34

Объекты в JavaScript являются коллекциями свойств и поэтому могут быть зациклены в каждом выражении.

Вы должны думать о obj в качестве коллекции значения ключа.

10

Источник

29 ноя '11 в 14:34

user425964 11 авг '17 в 04:37 2017-08-11 04:37 · Answer 21 · 2017-08-11 04:37

Если работает Node, я бы порекомендовал:

Object.keys(obj).forEach((key, index) => {
    console.log(key);
});

7

Источник

user425964 11 авг '17 в 04:37

user8701527 10 июн '19 в 13:55 2019-06-10 13:55 · Answer 22 · 2019-06-10 13:55

Хотя самый популярный ответ верен, вот альтернативный вариант использования, например, если вы выполняете итерацию по объекту и хотите в конце создать массив. Использовать.map вместо того forEach

const newObj = Object.keys(obj).map(el => {
    //ell will hold keys 
   // Getting the value of the keys should be as simple as obj[el]
})

user2701950 28 янв '16 в 20:41 2016-01-28 20:41 · Answer 23 · 2016-01-28 20:41

Я хочу добавить к ответам выше, потому что у вас могут быть другие намерения от Javascript. Объект JSON и объект Javascript - это разные вещи, и вы можете захотеть пройтись по свойствам объекта JSON, используя решения, предложенные выше, а затем удивиться.

Предположим, что у вас есть объект JSON, такой как:

var example = {
    "prop1": "value1",
    "prop2": [ "value2_0", value2_1"],
    "prop3": {
         "prop3_1": "value3_1"
    }
}

Неправильный способ перебора его "свойств":

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        recursivelyIterateProperties(jsonObject[prop]);
    }
}

Вы можете быть удивлены, увидев запись консоли 0, 1и т. д. при переборе свойств prop1 а также prop2 и из prop3_1, Эти объекты являются последовательностями, а индексы последовательности являются свойствами этого объекта в Javascript.

Лучший способ рекурсивно перебрать свойства объекта JSON - это сначала проверить, является ли этот объект последовательностью или нет:

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        if (!(typeof(jsonObject[prop]) === 'string')
            && !(jsonObject[prop] instanceof Array)) {
                recursivelyIterateProperties(jsonObject[prop]);

            }

     }
}

user2392596 21 фев '16 в 16:40 2016-02-21 16:40 · Answer 24 · 2016-02-21 16:40

Здесь я перебираю каждый узел и создаю значимые имена узлов. Если вы заметили, instanceOf Array и instanceOf Object в основном делают одно и то же (хотя в моем приложении я даю другую логику)

function iterate(obj,parent_node) {
    parent_node = parent_node || '';
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            var node = parent_node + "/" + property;
            if(obj[property] instanceof Array) {
                //console.log('array: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            } else if(obj[property] instanceof Object){
                //console.log('Object: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            }
            else {
                console.log(node + ":" + obj[property]);
            }
        }
    }
}

примечание - меня вдохновляет ответ Ондрея Свейдара. Но это решение имеет лучшую производительность и менее неоднозначно

user2440262 11 фев '16 в 15:09 2016-02-11 15:09 · Answer 25 · 2016-02-11 15:09

Также добавляем рекурсивный способ:

function iterate(obj) {
    // watch for objects we've already iterated so we won't end in endless cycle
    // for cases like var foo = {}; foo.bar = foo; iterate(foo);
    var walked = [];
    var stack = [{obj: obj, stack: ''}];
    while(stack.length > 0)
    {
        var item = stack.pop();
        var obj = item.obj;
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (typeof obj[property] == "object") {
                  // check if we haven't iterated through the reference yet
                  var alreadyFound = false;
                  for(var i = 0; i < walked.length; i++)
                  {
                    if (walked[i] === obj[property])
                    {
                      alreadyFound = true;
                      break;
                    }
                  }
                  // new object reference
                  if (!alreadyFound)
                  {
                    walked.push(obj[property]);
                    stack.push({obj: obj[property], stack: item.stack + '.' + property});
                  }
                }
                else
                {
                    console.log(item.stack + '.' + property + "=" + obj[property]);
                }
            }
        }
    }
}

Использование:

iterate({ foo: "foo", bar: { foo: "foo"} });

user5075227 23 июн '16 в 19:53 2016-06-23 19:53 · Answer 26 · 2016-06-23 19:53

По сути, вы хотите просмотреть каждое свойство объекта.

JSFiddle

var Dictionary = {
  If: {
    you: {
      can: '',
      make: ''
    },
    sense: ''
  },
  of: {
    the: {
      sentence: {
        it: '',
        worked: ''
      }
    }
  }
};

function Iterate(obj) {
  for (prop in obj) {
    if (obj.hasOwnProperty(prop) && isNaN(prop)) {
      console.log(prop + ': ' + obj[prop]);
      Iterate(obj[prop]);
    }
  }
}
Iterate(Dictionary);

user4725904 29 мар '15 в 08:48 2015-03-29 08:48 · Answer 27 · 2015-03-29 08:48

Цикл for..in заключается в том, что он создает новую переменную (var someVariable) и затем сохраняет каждое свойство данного объекта в этой новой переменной (someVariable) по одному. Поэтому, если вы используете block {}, вы можете выполнить итерацию. Рассмотрим следующий пример.

var obj = {
     name:'raman',
     hobby:'coding',
     planet:'earth'
     };

for(var someVariable in obj) {
  //do nothing..
}

console.log(someVariable); // outputs planet

user860099 26 июн '20 в 21:24 2020-06-26 21:24 · Answer 28 · 2020-06-26 21:24

Тип проверки

Вы можете проверить, как propt представляет свойства объекта,

typeof propt

чтобы обнаружить, что это всего лишь строка (имя свойства). Он связан с каждым свойством объекта из-за того, как for-in js работает "встроенный" цикл.

var obj = {
    name: "Simon",
    age: "20",
    clothing: {
        style: "simple",
        hipster: false
    }
}

for(var propt in obj){
    console.log(typeof propt,  propt + ': ' + obj[propt]);
}

user9082530 08 апр '20 в 14:49 2020-04-08 14:49 · Answer 29 · 2020-04-08 14:49

Проверьте эту ссылку, это поможет https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_state_forin

var person = {fname:"John", lname:"Doe", age:25}; 

  var text = "";
  var x;
  for (x in person) {
    text += person[x] + " "; // where x will be fname,lname,age
   }
Console.log(text);

1

Источник

user9082530 08 апр '20 в 14:49

user657892 29 авг '17 в 07:36 2017-08-29 07:36 · Answer 30 · 2017-08-29 07:36

Для дальнейшего уточнения принятого ответа стоит отметить, что если вы создаете экземпляр объекта с помощью var object = Object.create(null) затем object.hasOwnProperty(property) вызовет ошибку TypeError. Поэтому, чтобы быть в безопасности, вам нужно вызвать его из прототипа так:

for (var property in object) {
    if (Object.prototype.hasOwnProperty.call(object, property)) {
        // do stuff
    }
}

Итерация по свойствам объекта

33 ответа

for...in:

forEach:

Тип проверки

`for...in`:

`forEach`: