«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг. Создание сайтов Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Выбрать тему для сайта! Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Игра «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих



Об объектах, как о типе данных, речь шла здесь. А также о свойствах объекта: о том, как с ними работать.

На этой странице мы научимся работать с методами объектов.

Объекты в 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.keys(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

Сейчас на примере простого объекта нет возможности оценить всю пользу деструктуризации объектов. Но в дальнейшем, на практике, когда уровень вложенности будет выше, подобное разделение объектов на структуры будет очень удобным.

Читайте также...

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 2
Свойства и методы объектов - Деструктуризация объектов ES6
2879
Условия if else - Конструкция switch case - Тернарный оператор
720
Циклы while и for - Операторы break и continue
944
Практика часть 2 – Циклы и Условия
4579
Объявление функций – Стрелочные функции ES6
1152
Методы и свойства строк и чисел - Метод substr - Индекс строки
570
Практика часть 3 - Используем функции
1522
Что такое callback-функция - Аргумент другой функции
2222
Методы массивов - Перебор элементов массива - Псевдомассивы
2182
Передача данных по ссылке и по значению – Клонирование объекта
536
Метод assign() – Копирование исходных объектов в целевой объект
593
Копирование массивов - Оператор spread
2026
Прототипное Программирование - Прототип и Экземпляр Объекта
522
Свойство proto - Методы Object.create и Object.setPrototypeOf
725
Практика часть 4 - Используем функции как методы объекта
10989
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта
Популярные заметки
Последние заметки