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

Согласно стандарта ECMAScript, есть три способа перечислить все свойства объекта т.е. получить их список:

  • for...in – перечисление будет включать в себя все свойства, в том числе функции и свойства прототипов;
  • Object.keys() – возвращает массив имен собственных перечисляемых свойств объекта (свойства из цепочки прототипов, не войдут в массив);
  • Object.getOwnPropertyNames() – возвращает массив содержащий все имена собственных (перечисляемых и неперечисляемых) свойств объекта.

Цикл for...in используется для перебора всех свойств из объекта в случайном порядке и имеет следующий синтаксис:

for (variable in object) {
  инструкция /* ... делать что-то с object[variable] ... */
}

В качестве nеременной (variable) можно подставить имя переменной или инструкцию var, объявляющую одну переменную. Переменной перед началом каждой итерации цикла присваивается в виде строки имя одного из свойств объекта. Как и в цикле for, оператор var здесь не обязателен, но его рекомендуется использовать, чтобы переменная была локальной. Справа от ключевого слова in указывается объект, свойства которого будут перебираться циклом. Если переменная, представляющая объект, будет иметь значение null или undefined цикл не выполнится ни разу. И как обычно, инструкция – это инструкция или блок инструкций, образующих тело цикла.

Пример итерации по свойствам объекта:

Выполнить код »

Перечисление будет включать в себя все свойства, в том числе функции и свойства прототипов, которые не всегда важны:

Выполнить код »

Иногда необходимо посмотреть, что находится именно в самом объекте, а не в прототипе. Свойства, не принадлежащие непосредственно объекту можно отфильтровать. Наиболее распространенные фильтры – метод hasOwnProperty и функция TypeOf.

Например, отфильтруем функции:

Выполнить код »

Метод hasOwnProperty возвращает значение true, если объект object имеет свойство с указанным именем, и значение false в противном случае. Данный метод не проверяет свойства в цепочке прототипов объекта; свойство должно непосредственно принадлежать самому объекту:

Выполнить код »

Свойства объектов в JavaScript не упорядочены, поэтому порядок возврата их имен в цикле for...in предсказать сложно. Все перечислимые свойства будут возвращены, но порядок их вывода может зависеть от браузера.

Согласно стандарта ECMAScript, если имя свойства – нечисловая строка, то такие свойства всегда перебираются в том же порядке, в каком присваивались. С другой стороны, если в качестве имени свойства выступает число или строка, которая может быть преобразована в числовой фомат, то браузеры осуществлят сортировку таких свойств в целях внутренней оптимизации. Вывод таких имен свойств объекта не будет соответствовать их оригинальному расположению.

Если вы хотите, чтобы порядок вывода свойств соответствовал их расположению, то лучше избегать объявления объекта целиком и вместо этого создать массив, в котором сохранить имена свойств в нужном порядке:

Выполнить код »

Метод Object.keys(obj) возвращает массив из собственных перечисляемых свойств объекта obj. В отличие от цикла for...in свойства и из цепочки прототипов не учитываются.

После того, как желаемый массив имен будет получен, его можно перебрать, например, с помощью метода forEach:

Выполнить код »

Метод Object.getOwnPropertyNames(obj) возвращает массив со всеми собственными свойствами и методами объекта obj. Собственными свойствами объекта являются те, которые определены непосредственно на этом объекте и не наследуются от прототипа объекта.

В следующем примере метод getOwnPropertyNames выводит имена собственных свойств (включая метод) объекта:

Выполнить код »
  • Цикл for...in используется для перебора всех свойств объекта, в том числе функции и свойства прототипов.
  • При использовании цикла for...in свойства, не принадлежащие непосредственно объекту можно отфильтровать. Наиболее распространенные фильтры – метод hasOwnProperty и функция TypeOf.
  • Метод hasOwnProperty возвращает значение true, если объект object имеет свойство с указанным именем, и значение false в противном случае.
  • Object.keys() – возвращает массив имен собственных перечисляемых свойств объекта (свойства из цепочки прототипов, не войдут в массив).
  • Object.getOwnPropertyNames() – возвращает массив содержащий все имена собственных (перечисляемых и неперечисляемых) свойств объекта.

  • Удалить свойства с одинаковыми именами

    Перед вами два объекта obj_1 и obj_2. Напишите функцию, которая с помощью цикла for...in перебирает свойства объекта obj_2 и удаляет свойства объекта obj_1, имена которых свпадают с именами свойств объекта . Функция возвращает объект obj_1 (то, что от него осталось). Выведите свойства объекта obj_1 (Снова используйте цикл for...in).

    var obj_1 = { name_1: "a", name_2: "b", name_3: 2018, name_4: "js" };
    var obj_2 = { name_5: "ab", name_2: "bc", name_3: 2018 };
    };
    
    // Ваш код
    
    Показать решение

    Решение:

    Выполнить код »
  • Замена свойств с одинаковыми именами

    1. Напишите функцию, которая с помощью цикла for...in перебирает свойства объекта fiat и ко­пи­ру­ет­ свой­ст­ва­ из­ объ­ек­та­ fiat в­ объ­ект­ cadi.
    2. Ес­ли­ fiat и­ cadi име­ют­ свой­ст­ва­ с­ оди­на­ко­вы­ми­ име­на­ми,­ зна­че­ние­ свой­ст­ва­ ­в­ объ­ек­те­ cadi за­ти­ра­ет­ся­ зна­че­ни­ем­ свой­ст­ва­ из­ объ­ек­та­ fiat.
    3. В результате функция возвращает­ cadi.
    4. ­­
    5. Выведите свойства объекта cadi (Снова используйте цикл for...in).
    var cadi = { 
        make: "GM",
        model: "Cadillac",
        year: 1955, 
        color: "red",    
        convertible: false
    };
    
    var fiat = { 
        model: "500",
        year: 1957,
        color: "tan", 
        mileage: 88000
    };
    
    // ваш код
    
    Показать решение
    Выполнить код »
  • Замена свойств с одинаковыми именами

    1. Напишите функцию, которая с помощью цикла for...in перебирает свойства объекта fiat и ко­пи­ру­ет­ свой­ст­ва­ из­ объ­ек­та­ fiat в­ объ­ект­ cadi.
    2. Ес­ли­ fiat и­ cadi име­ют­ свой­ст­ва­ с­ оди­на­ко­вы­ми­ име­на­ми,­ ­зна­че­ние­ свой­ст­ва­ ­в­ объ­ек­те­ cadi ос­та­ет­ся­ не­из­мен­ным.
    3. В результате функция возвращает­ cadi.
    4. ­­
    5. Выведите свойства обновлённого объекта cadi.
    var cadi = { 
        make: "GM",
        model: "Cadillac",
        year: 1955, 
        color: "red",    
        convertible: false
    };
    
    var fiat = { 
        model: "500",
        year: 1957,
        color: "tan", 
        mileage: 88000
    };
    
    // ваш код
    
    Показать решение
    Выполнить код »
  • Удаление свойств с разными именами

    1. Напишите функцию, которая с помощью цикла for...in перебирает свойства объекта cady.
    2. ­Функция уда­ля­ет­ из­ объ­ек­та­ cady свой­ст­ва,­ от­сут­ст­вую­щие­ в­ объ­ек­те­ fiat.
    3. В результате функция возвращает­ cadi.
    4. ­­
    5. Выведите свойства обновлённого объекта cadi.
    var cadi = { 
        make: "GM",
        model: "Cadillac",
        year: 1955, 
        color: "red",    
        convertible: false
    };
    
    var fiat = { 
        model: "500",
        year: 1957,
        color: "tan", 
        mileage: 88000
    };
    
    // ваш код
    
    Показать решение
    Выполнить код »

Комментарии

пожелания к комментариям…
  • Приветствуются комментарии, соответствующие теме урока: вопросы, ответы, предложения.
  • Одну строчку кода оборачивайте в тег <code>, несколько строчек кода — в теги <pre><code>...ваш код...</code></pre>.
  • Допускаются ссылки на онлайн-песочницы (codepen, plnkr, JSBin и др.).