Перебор свойств

← предыдущая следующая →

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

Способы перечисления свойств объекта

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

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

for...in

Цикл 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()

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

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

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

Object.getOwnPropertyNames()

Метод 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 };
};

// Ваш код
```
Показать решение

Решение:

<script> 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 }; function myFunction(o, p) { for (var prop in p) { // Для всех свойств в p delete o[prop]; // Удалить из o } return o; } var x = myFunction(obj_1, obj_2); for (var prop in x) { alert( prop + ": " + x[prop] ); } </script>

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

Замена свойств с одинаковыми именами
1. Напишите функцию, которая с помощью цикла for...in перебирает свойства объекта fiat и копирует свойства из объекта fiat в объект cadi.
2. Если fiat и cadi имеют свойства с одинаковыми именами, значение свойства в объекте cadi затирается значением свойства из объекта fiat.
3. В результате функция возвращает cadi.
4. Выведите свойства объекта 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
};

// ваш код
```
Показать решение

<script> var cadi = { make: "GM", model: "Cadillac", year: 1955, color: "red", convertible: false }; var fiat = { model: "500", year: 1957, color: "tan", mileage: 88000 }; function myFunction(x, y) { for (var key in y) { x[key] = y[key]; //Добавить свойство в x } return x; } var x = myFunction(cadi, fiat); for (var prop in x) { document.writeln( prop + ": " + x[prop] + "<br>" ); } </script>

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

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

var fiat = { 
    model: "500",
    year: 1957,
    color: "tan", 
    mileage: 88000
};

// ваш код
```
Показать решение

<script> var cadi = { make: "GM", model: "Cadillac", year: 1955, color: "red", convertible: false }; var fiat = { model: "500", year: 1957, color: "tan", mileage: 88000 }; function myFunction(x, y) { for (var key in y) { if (x.hasOwnProperty(key)) continue; //Кроме имеющихся в cady x[key] = y[key]; //Добавить свойство в x } return x; } var x = myFunction(cadi, fiat); for (var prop in x) { document.writeln( prop + ": " + x[prop] + "<br>" ); } </script>

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

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

var fiat = { 
    model: "500",
    year: 1957,
    color: "tan", 
    mileage: 88000
};

// ваш код
```
Показать решение

<script> var cadi = { make: "GM", model: "Cadillac", year: 1955, color: "red", convertible: false }; var fiat = { model: "500", year: 1957, color: "tan", mileage: 88000 }; function myFunction(x, y) { for (var key in x) { if (!(key in y)) delete x[key]; // Удалить, если отсутствует в fiat } return x; } var x = myFunction(cadi, fiat); for (var prop in x) { document.writeln( prop + ": " + x[prop] + "<br>" ); } // model: Cadillac // year: 1955 // color: red </script>

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

← предыдущая следующая →

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

Перебор свойств

Способы перечисления свойств объекта

for...in

Object.keys()

Object.getOwnPropertyNames()

Итоги

Задачи

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

Замена свойств с одинаковыми именами

Замена свойств с одинаковыми именами

Удаление свойств с разными именами

Комментарии