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

javascript loops object

1125362 просмотра

26 ответа

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

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

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

Автор: Rafay Источник Размещён: 10.06.2019 01:56

Ответы (26)


2273 плюса

Для перебора свойств требуется дополнительная hasOwnPropertyпроверка:

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

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

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

Автор: Dominik Размещён: 24.05.2013 12:38

995 плюса

Начиная с 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 () .

Автор: Danny R Размещён: 13.08.2013 07:19

228 плюса

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

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));
Автор: Frank Roth Размещён: 22.11.2016 08:47

201 плюса

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

Вы можете прочитать его как « для каждого свойства IN на objобъект, присвоить каждое свойство к PROPT переменному , в своей очереди».

Автор: Marc B Размещён: 29.11.2011 02:32

85 плюса

В следующих версиях 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 => ...)
Автор: user663031 Размещён: 13.09.2016 06:41

37 плюса

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

Автор: Matt Ball Размещён: 29.11.2011 02:33

21 плюса

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

$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});
Автор: Rob Sedgwick Размещён: 29.03.2016 03:19

19 плюса

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

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

    // Do stuff...
}
Автор: Cyril N. Размещён: 19.01.2018 11:03

18 плюса

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

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

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

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

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

// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
  // do stuff
}
Автор: JSON C11 Размещён: 07.10.2017 09:27

18 плюса

Приведенные выше ответы немного раздражают, потому что они не объясняют, что вы делаете внутри цикла 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;)

Автор: dylanh724 Размещён: 28.10.2017 05:39

14 плюса

Добавить использование 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

Автор: Dimitar Nikovski Размещён: 28.06.2018 12:49

11 плюса

Цикл 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 ... делает противоположное.

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

Автор: Vappor Washmade Размещён: 24.01.2016 03:57

11 плюса

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

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

// a
// 3
// 2
Автор: Philll_t Размещён: 05.05.2017 06:30

10 плюса

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

var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
    ...
});
Автор: viktarpunko Размещён: 04.11.2016 04:51

9 плюса

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

Автор: arb Размещён: 29.11.2011 02:33

9 плюса

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

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

Автор: user920041 Размещён: 29.11.2011 02:34

9 плюса

Object.keys(obj).forEach(key =>
  console.log(`key=${key} value=${obj[key]}`)
);
Автор: Fellow Stranger Размещён: 25.04.2018 11:02

8 плюса

В настоящее время вы можете преобразовать стандартный объект 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);

Автор: Redu Размещён: 09.08.2016 10:43

4 плюса

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

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"} }); 
Автор: Ondrej Svejdar Размещён: 11.02.2016 03:09

4 плюса

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

Object.keys(obj).forEach((key, index) => {
    console.log(key);
});
Автор: Justin Размещён: 11.08.2017 04:37

3 плюса

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

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);
Автор: HovyTech Размещён: 23.06.2016 07:53

2 плюса

Цикл 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
Автор: Raman Sohi Размещён: 29.03.2015 08:48

2 плюса

Я хочу добавить к ответам выше, потому что у вас могут быть другие намерения от 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]);

            }

     }
}
Автор: Jadiel de Armas Размещён: 28.01.2016 08:41

2 плюса

Здесь я перебираю каждый узел и создаю значимые имена узлов. Если вы заметили, 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]);
            }
        }
    }
}

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

Автор: Faiz Mohamed Haneef Размещён: 21.02.2016 04:40

1 плюс

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

for (var property in object) {
    if (Object.prototype.hasOwnProperty.call(object, property)) {
        // do stuff
    }
}
Автор: Konrad Kiss Размещён: 29.08.2017 07:36

0 плюса

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

const newObj = Object.keys(obj).map(el => {
 //What ever you want to do
})
Автор: iRohitBhatia Размещён: 10.06.2019 10:55
Вопросы из категории :
32x32