Далее на странице...
Об объектах, как о типе данных, речь шла здесь. А также о свойствах объекта: о том, как с ними работать.
На этой странице мы научимся работать с методами объектов.
Объекты в JavaScript - это ассоциативные массивы, которые присутствуют в некоторых других языках, например, в PHP.
Добавление и удаление свойств из объекта
Для начала создадим объект. Известно, что сделать это можно через фигурные скобки. Есть и другой способ создания объекта - new Object, но он менее удобен и мало используется.
Пример 1.1
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: { // Вложенный объект
border: 'black',
bg: 'red'
}
};
console.log(options.name);
Результат
test
Здесь мы создали объект, внутри которого есть еще один объект. А также получили доступ к свойству объекта и вывели его значение. Аналогично (через точку) происходит добавление свойств в объект.
Как удалить свойство из объекта? Для этого используется оператор delete, который удаляет свойство из объекта.
Пример 1.2
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: {
border: 'black',
bg: 'red'
}
};
delete options.name; // Удаление свойства name
Перебор свойств объекта - Конструкция for in
Иногда возникает необходимость перебрать все свойства объекта. Как это сделать?
Для перебора свойств объекта используется конструкция for in. Рассмотрим ее синтаксис.
Пример 2.1
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: {
border: 'black',
bg: 'red'
}
};
for(let key in options){
console.log(`Свойство ${key} имеет значение ${options[key]}`);
}
Результат
Свойство name имеет значение test
Свойство width имеет значение 1024
Свойство height имеет значение 1024
Свойство colors имеет значение [object Object]
Конструкция for in работает как цикл.
1. Открывает конструкцию ключевое слово for, после которого в фигурных скобках создается переменная key и указывается объект, в котором будет проводится перебор свойств.
2. Имя переменной key (в переводе с английского - это ключ) условное, но это общепринятый стандарт. Известно, что свойства объекта записываются в формате ключ --> значение. Отсюда и берется это название key - в эту переменную будут поочередно записываться все свойства указанного объекта.
3. Затем указываются значения свойств выбранного объекта: options[key].
Следует знать: помимо конструкции for-in для перебора существует конструкция for-of, но для объектов она не работает.
Перебор свойств вложенного объекта
В рассмотренных примерах есть вложенный объект (объект внутри другого объекта).
Из примера 2.1 видно, что с помощью конструкции for in не удалось перебрать свойства вложенного объекта. И мы видим лишь [object Object] - это строковое представление объекта.
Итак, как перебрать свойства вложенного объекта? Для этого используется вложенная конструкция for in.
Пример 3.1
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: {
border: 'black',
bg: 'red'
}
};
for(let key in options){
if(typeof(options[key]) === 'object'){ // Если одно из свойств объекта options - это объект, то...
for(let i in options[key]){ // Выводим свойства вложенного объекта
console.log(`Свойство ${i} имеет значение ${options[key][i]}`);
}
}
else{
console.log(`Свойство ${key} имеет значение ${options[key]}`);
}
}
Результат
Свойство name имеет значение test
Свойство width имеет значение 1024
Свойство height имеет значение 1024
Свойство border имеет значение black
Свойство bg имеет значение red
Вот так происходит перебор всех свойств объекта.
Все свойства и методы у объектов
Если говорить о всех свойствах и методах, которые уже есть внутри объекта, то для этого можно перейти к документации об объектах, где есть возможность узнать, какие свойства и методы могут быть у объекта.
Эти методы встроены в JavaScript и применимы ко всем объектам. Перечислять их все не имеет смыла (их много и специально запоминать их не надо). Постепенно на практике большая часть из них будет освоена.
Сколько в объекте содержится свойств?
Если продолжить говорить о переборе всех свойств объекта стоит отметить, что у объекта нет свойства length (подобно тому, как оно работает для строк и массивов).
То есть при работе с объектами нет возможности узнать, сколько у него свойств (сколько в нем содержится пар ключ --> значение).
Но иногда эту задачу необходимо решить. Как это сделать? Как узнать, сколько в объекте содержится свойств?
Если продолжить работу с кодом из примера 3.1, то самый простой способ узнать, сколько в объекте содержится свойств - это создать переменную-счетчик и использовать ее при переборе свойств объекта.
Пример 4.1
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: {
border: 'black',
bg: 'red'
}
};
let counter = 0; // Счетчик
for(let key in options){
if(typeof(options[key]) === 'object'){
for(let i in options[key]){
console.log(`Свойство ${i} имеет значение ${options[key][i]}`);
counter++; // Инкремент счетчика
}
}
else{
console.log(`Свойство ${key} имеет значение ${options[key]}`);
counter++; // Инкремент счетчика
}
}
console.log(counter);
Результат
Свойство name имеет значение test
Свойство width имеет значение 1024
Свойство height имеет значение 1024
Свойство border имеет значение black
Свойство bg имеет значение red
5
И действительно, объект options содержит 5 свойств, 2 из которых являются свойствами вложенного объекта.
Если мы хотим узнать, сколько в объекте свойств на одном/верхнем уровне, то код из последнего примера будет иным.
Итак, классический способ узнать, какое количество свойств находится в объекте выглядит следующим образом.
Пример 4.2
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: {
border: 'black',
bg: 'red'
}
};
// Создается счетчик и запускается метод перебора...
let counter = 0; // Счетчик
for(let key in options){
counter++; // Инкремент счетчика
}
console.log(counter);
Результат
4
Все верно: в данном случае у объекта 4 свойства на одном/верхнем уровне.
Стоит отметить, что это не очень удобно. Ведь, чтобы узнать, какое количество свойств находится в объекте нужно: каждый раз создавать переменную-счетчик, запускать метод перебора for in, внутри которого увеличивать счетчик на единицу.
На этом моменте можно перейти к методам, которые часто используются в объектах.
Методы объектов - Метод keys()
Метод keys() в JavaScript возвращает массив ключей/свойств объекта.
Как это выглядит? Синтаксис метода keys().
Object.(obj);
obj - имя передаваемого объекта.
Пример 5.1
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: {
border: 'black',
bg: 'red'
}
};
// Передача объекта options в метод keys()
console.log(Object.keys(options));
Результат
[ 'name', 'width', 'height', 'colors' ]
В результате мы получили массив из свойств объекта options.
Имея массив, состоящий из свойств объекта, легко узнать, сколько в объекте содержится свойств? Это можно сделать при помощи свойства length.
Пример 5.2
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: {
border: 'black',
bg: 'red'
}
};
// Число свойств объекта options
console.log(Object.keys(options).length);
Результат
4
Все верно. Объект options содержит 4 свойства. В данном случае свойство length возвращает число элементов массива.
Создание методов объекта
Как уже упоминалось у объектов много методов.
Но помимо существующих, методы объекта можно создавать самостоятельно. Напомним, что методы - это действия, которые может совершать объект.
Пример 6.1
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: {
border: 'black',
bg: 'red'
},
// Создание метода
makeTest: function(){
console.log('Test');
}
};
// Обращение к методу объекта
options.makeTest();
Результат
Test
При обращении к методу объекта после имени метода ставятся круглые скобки.
Подведем итог
1. Объекты - это структуры для хранения данных, которые могут содержать любые типы данных в формате ключ -> значение.
2. У объектов есть встроенные методы и встроенные свойства, которые удобно использовать.
3. Чтобы объект мог что-то делать, можно внутри объекта записывать функции и, таким образом, создавать методы объекта.
Деструктуризация объектов - Стандарт ES6
В стандарте JavaScript ES6 к объектам добавилась так называемая деструктуризация объектов. Тоже самое относится и к массивам, но об этом далее.
До стандарта ES6, чтобы получить доступ к свойству вложенного объекта нужно прописать следующее:
Пример 7.1
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: {
border: 'black',
bg: 'red'
}
};
// Доступ к свойству вложенного объекта
console.log(options['colors']['bg']);
Результат
red
В результате мы вывели в консоль значение red свойства bg объекта colors, вложенного в объект options
Но такая запись options['colors']['bg'] не очень удобна. И новый стандарт ES6 не рекомендует ее использовать.
Поэтому в JavaScript стандарта ES6 существует деструктуризация объектов. Что это и как работает?
Деструктуризация объектов заключается в том, мы можем извлечь данные из объектов или массивов, используя специальный синтаксис.
Если говорить о объекте options из примера, то его деструктуризация будет заключаться в том, что мы будем вытаскивать свойства border и bg, относящиеся к вложенному объекту colors в отдельные переменные.
Пример 7.2
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: {
border: 'black',
bg: 'red'
}
};
// Деструктуризация объекта
const {border, bg} = options.colors;
console.log(border);
Результат
black
Сейчас на примере простого объекта нет возможности оценить всю пользу деструктуризации объектов. Но в дальнейшем, на практике, когда уровень вложенности будет выше, подобное разделение объектов на структуры будет очень удобным.
