Як створювати об'єкти в js?

JavaScript надає низку методів для керування елементами на веб-сторінці. Зокрема, ми можемо створювати та додавати нові елементи або замінювати та видаляти вже наявні. Розглянемо ці способи.

Створення елементів

Для створення елементів об'єкт document має такі методи:

• createElement(elementName) : створює елемент html, тег якого передається як параметр. Повертає створений елемент
• createTextNode(text) : створює та повертає текстовий вузол. Як параметр передається текст вузла.

Створимо елемент за допомогою createElement :

const header = document.createElement("h1"); // створюємо заголовок console.log(header); //

Таким чином, змінна header зберігатиме посилання на елемент h1 .

Створимо текстовий вузол за допомогою createTextNode :

const headerText = document.createTextNode("Hello World"); // створюємо текстовий вузол console.log(headerText); // "Hello World"

Додавання елементів

Проте створення елементів недостатньо, їх ще треба додати на веб-сторінку.

Для додавання елементів ми можемо використовувати один із методів об'єкта Node:

• appendChild(newNode) : додає новий вузол newNode до кінця колекції дочірніх вузлів
• insertBefore(newNode, referenceNode) : додає новий вузол newNode перед вузлом referenceNode

appendChild

Використовуємо метод appendChild() :

const header = document.createElement("h1"); // створюємо заголовок 
const headerText = document.createTextNode("Hello World"); // створюємо текстовий вузол header.appendChild(headerText); // Додаємо в елемент h1 текстовий вузол console.log (header); // 
Hello World

І щоб додати створений елемент на сторінку, його треба додати до елемента, що вже є на сторінці:

Спочатку створюємо звичайний елемент заголовка h2 та текстовий вузол. Потім текстовий вузол додаємо елемент заголовка. Потім заголовок додаємо в елемент body:

Варто зазначити, що нам необов'язково для визначення тексту всередині елемента створювати додатковий текстовий вузол, тому що ми можемо скористатися властивістю textContent і безпосередньо привласнити текст:

const header = document.createElement("h1"); // створюємо заголовок header.textContent = "Hello World"; // Визначаємо текст елемента

У цьому випадку текстовий вузол буде створений неявно під час встановлення тексту.

insertBefore

Метод appendChild() додає елемент до кінця контейнера. Щоб конкретизувати місце для додавання, можна використовувати інший метод - insertBefore() , який додає один елемент перед іншим елементом. Наприклад, у нас є наступна сторінка:

Text 1
Text 2

Припустимо, нам треба додати елемент body перед першим параграфом заголовок. Ми можемо це зробити так:

Text 1
Text 2

Якщо нам потрібно вставити новий вузол на друге, третє або будь-яке інше місце, то нам треба знайти вузол, перед яким треба вставляти, за допомогою комбінацій властивостей firstElementChild/lastElementChild та nextSibling/previousSibling.

Копіювання елемента

Іноді елементи бувають досить складними за складом, і набагато простіше їх скопіювати, ніж за допомогою окремих викликів створювати вміст. Для копіювання вже наявних вузлів об'єкта Node можна використовувати метод cloneNode() :

Home Page
Text 1
Text 2

У метод cloneNode() як параметр передається логічне значення: якщо передається true, то елемент копіюватиметься з усіма дочірніми вузлами; якщо передається false – то копіюється без дочірніх вузлів. Тобто в даному випадку ми копіюємо вузол з усім вмістом і потім додаємо в кінець елемента c .

Заміна елемента

Для заміни елемента застосовується метод replaceChild(newNode, oldNode) об'єкта Node. Цей метод як перший параметр приймає новий елемент, який замінює старий елемент oldNode, що передається як другий параметр.

Home Page
Text 1
Text 2

У цьому випадку замінюємо перший елемент - перший параграф заголовком h2:

Видалення елемента

Для видалення елемента викликається метод removeChild() об'єкта Node. Цей метод видаляє один із дочірніх вузлів:

Home Page
Text 1
Text 2

У цьому випадку видаляється перший параграф із блоку div

Видалення всіх елементів

Іноді виникає потреба видалити всі елементи. Для цього перебираємо всі елементи контейнера та видаляємо їх:

Об'єкти в JavaScript

У цій статті ми розглянемо, що таке об'єкти, які у них властивості та методи, як створювати нові об'єкти, як успадковувати їх від інших об'єктів, як працювати з індексами, гетерами та сеттерами, а також як порівнювати та видаляти об'єкти.

Об'єкти JavaScript дозволяють зберігати та обробляти різні дані та функції, пов'язані з ними. Об'єкт – це колекція з ключа та його значення, де ключ – це рядок, а значення – це будь-який тип даних, наприклад:

У цьому прикладі ми створили об'єкт person, який має чотири властивості: name, age, hobbies і sayHello. Перші три властивості зберігають прості дані (рядок, число та масив), а четверта властивість зберігає функцію, яку ми можемо викликати як метод об'єкта. Для доступу до властивостей та методів об'єкта ми можемо використовувати точкову нотацію або квадратні дужки:

console.log(person.name); // "Alice" console.log(person["age"]); // 25 console.log(person.hobbies[0]); // "reading" console.log(person.sayHello()); // "Hello, I'm Alice"

Об'єкти та їх властивості

Властивості об'єкта – це змінні, що належать об'єкту. Вони можуть бути додані, змінені або видалені у будь-який час:

person.height = 170; // Додаємо нову властивість person.age = 26; // Змінюємо існуючу властивість delete person.hobbies; // Видаляємо властивість

Індекси властивостей об'єкту

Індекс властивості об'єкта — це рядок, який використовується для доступу до значення властивості.Індекси можуть бути будь-якими допустимими рядками JavaScript, включаючи порожні рядки. Однак не всі рядки є допустимими ідентифікаторами (іменами змінних), тому для них потрібно використовувати квадратні дужки замість точкової нотації, наприклад:

const obj = <>; obj.number = 477; obj[''] = 'empty'; // Порожній рядок obj['1'] = 'one'; // Рядок із цифри obj['hello world'] = 'greeting'; // Рядок із пробілом console.log(obj) // // Використання квадратних дужок console.log(obj['']); // empty console.log(obj['1']); // one console.log(obj['hello world']); // Greeting // Використання точкової нотації призводить до синтаксичної помилки console.log (obj.1); // SyntaxError console.log(obj.hello world); // SyntaxError

Як бачимо, щоб отримати доступ до властивостей з індексами, які не є допустимими ідентифікаторами, ми маємо використовувати квадратні дужки.

Як визначити існує потрібна властивість в об'єкті чи ні

Щоб визначити, чи існує властивість, використовуйте оператор in. Він повертає true, якщо об'єкт має властивість із заданим ім'ям, та false в іншому випадку. Також перевіряється, чи є властивість прототипу об'єкта.

const person = <name: 'Igor', age: 30, >; console.log('name' in person); // true console.log('height' in person); // false console.log('toString' in person); // true - успадковується від Object.prototype

Як перебрати властивості об'єкту

Цикл for ... in - це спосіб перебрати всі властивості об'єкта і виконати деяку дію для кожного з них:

for (var key in person) < console.log(key + ": " + person[key]); >// name: Alice // age: 26 // sayHello: function () < // console.log("Hello, I'm" + this.name); //>// height: 170

Упорядкування властивостей об'єкту

Властивості об'єкта JavaScript не мають певного порядку. Однак, при переборі властивостей об'єкта за допомогою циклу for…in або методу Object.keys, вони зазвичай виводяться в такому порядку: спочатку йдуть властивості з цілими індексами у зростаючому порядку, потім йдуть інші властивості в порядку їх створення.

const obj = <>; obj[2] = 'two'; obj[1] = 'one'; obj['name'] = 'Sveta'; obj[3] = 'tree'; obj['age'] = 23; for (var key in obj) < console.log(key + ':' + obj[key]); >// 1:one // 2:two // 3:tree // name:Sveta // age:23

Видалення властивостей

Щоб видалити властивості об'єкта або сам об'єкт, використовуйте оператор delete. Він видаляє властивість та його значення з об'єкта ↓

const person = <name: "Alice", age: 25, hobbies: ["reading", "dancing"] >; delete person.age; // Видаляємо властивість age console.log(person.age); // undefined delete person.hobbies[0]; // Видаляємо елемент масиву console.log(person.hobbies); //[undefined, “dancing”] delete person; // Видаляємо об'єкт console.log(person); // ReferenceError: person is not defined

Однак, якщо властивість має атрибут configurable: false, то воно не може бути видалено:

const obj = Object.create(<>, < x: < value: 10, writable: true, enumerable: true, configurable: false >>); console.log(obj.x); //10 delete obj.x; // не видаляє властивість x console.log(obj.x); // 10

Визначення властивостей типу об'єкта

Тип об'єкта - це класифікація об'єктів за їхньою внутрішньою структурою та поведінкою. JavaScript має вбудовані типи об'єктів, такі як Array, Date, Function, Math та інші, а також типи об'єктів, які ми можемо створювати за допомогою функцій конструкторів або методу Object.create. Кожен тип об'єкта має власні властивості та методи, які доступні для всіх його екземплярів, наприклад:

const arr = [1, 2, 3]; // Створюємо масив - екземпляр типу Array console.log(arr.length); // 3 - властивість length визначено типу Array console.log(arr.push(4)); // 4 - метод push визначений типу Array const date = new Date(); // Створюємо дату - екземпляр типу Date console.log(date.getFullYear()); // 2023 - метод getFullYear визначений типу Date console.log(date.getTimezoneOffset()); // -180 - метод getTimezoneOffset визначено типу Date const func = function () < >; // Створюємо функцію – екземпляр типу Function console.log(func.name); // "" - властивість name визначено типу Function console.log(func.call()); // undefined - метод call визначений типу Function

Щоб визначити властивості об'єкта, можна використовувати його прототип. Властивості прототипу є спільними для кожного екземпляра даного типу. Властивість prototype характерно для кожного типу об'єкта:

function Animal(name, type) < this.name = name; this.type = type; >Animal.prototype.makeSound = function () < console.log(this.name + "says" + this.type); >; const dog = new Animal("Rex", "woof"); const cat = new Animal("Tom", "meow"); dog.makeSound(); // Rex says woof cat.makeSound(); // Tom says meow

Ми визначили метод makeSound для Animal через його зразок. Тепер усі екземпляри цього можуть застосовувати цей метод. Це заощаджує пам'ять і уникає дублювання коду.

Створення нових об'єктів

Існує кілька способів створення нових об'єктів у JavaScript ↓

• Використання ініціалізаторів об'єкту. Ініціалізатором називається літерал, який визначає властивості та методи об'єкта. Це найпростіший і найзручніший метод створення об'єктів. Наприклад:

• Застосування функції архітектора. Функція конструктора – це спеціальна функція, яка створює новий об'єкт під час виклику з оператором new. Вона має ім'я з великої літери та приймає параметри для ініціалізації властивостей об'єкта. Всередині функції конструктора ми маємо право використовувати слово this для посилання на об'єкт, що ініціалізується:

function Animal(name, type) < this.name = name; this.type = type; this.makeSound = function () < console.log(this.name + 'says' + this.type); >; > const dog = new Animal('Rex', 'woof'); const cat = new Animal('Tom', 'meow');

• Використання методу Object.create. Метод Object.create - Це сучасний спосіб створення об'єктів, який дозволяє успадковувати їх від інших об'єктів. Він приймає два параметри: прототип об'єкта, від якого ми хочемо успадкувати, та дескриптори властивостей, які ми хочемо додати або перевизначити:

const person = < name: 'Alice', age: 25, sayHello: function () < console.log("Hello, I'm " + this.name); >, >; const student = Object.create(person, < grade: < value: 10, writable: true, enumerable: true, configurable: true >, study: < value: function () < console.log(this.name + ' is studying '); >, writable: true, enumerable: true, configurable: true, >, >);

У цьому прикладі ми створили об'єкт student, який успадковує всі властивості та методи від об'єкта person, а також додали дві нові властивості: grade і study. Дескриптори властивостей дозволяють встановити різні атрибути властивостей, такі як можливість запису, перерахування та конфігурації.

Порівняння об'єктів

• Для порівняння об'єктів ми можемо використовувати оператори == та ===. Однак вони не порівнюють об'єкти за їх змістом, а лише за їх посиланнями. Тобто, два об'єкти рівні лише тоді, коли вони посилаються на той самий об'єкт у пам'яті:

var person1 =; var person2 =; var person3 = person1; console.log(person1 == person2); // false console.log(person1 === person2); // false console.log(person1 == person3); // true console.log(person1 === person3); // true

Об'єкти person1 і person2, хоча мають однакові властивості, не рівні одне одному, оскільки вони є різними об'єктами у пам'яті. А об'єкт person3 дорівнює об'єкту person1тому що він посилається на нього.

• Для порівняння об'єктів за їх змістом ми можемо застосовувати спеціальні функції, які рекурсивно перевіряють всі властивості об'єктів на рівність, наприклад:

function isEqual(obj1, obj2) < if (obj1 === obj2) return true; // якщо посилання дорівнюють, то об'єкти дорівнюють if (typeof obj1 !== 'object' || typeof obj2 !== 'object') return false; // якщо один із аргументів не об'єкт, то об'єкти не рівні const keys1 = Object.keys(obj1); // Отримуємо масив ключів першого об'єкта const keys2 = Object.keys(obj2); // Отримуємо масив ключів другого об'єкта if (keys1.length !== keys2.length) return false; // якщо довжини масивів ключів не дорівнюють, то об'єкти не дорівнюють for (var key of keys1) < // перебираємо всі ключі першого об'єкта if (!obj2.hasOwnProperty(key)) return false; // якщо другий об'єкт немає такого ключа, то об'єкти не рівні if (!isEqual(obj1[key], obj2[key])) return false; // якщо значення ключа не рівні, то об'єкти не рівні (рекурсивний виклик) >return true; // якщо всі перевірки пройдені, об'єкти рівні > var person1 = < name: 'Alice', age: 25, hobbies: ['reading', 'dancing'] >; var person2 = < name: 'Alice', age: 25, hobbies: ['reading', 'dancing'] >; var person3 = person1; console.log(isEqual(person1, person2)); // true console.log(isEqual(person1, person3)); // true

У цій функції ми порівнюємо два об'єкти за їх ключами та значеннями, використовуючи рекурсію для вкладених об'єктів.

успадкування

Спадкування – це механізм, який дозволяє одному об'єкту отримувати властивості та методи від іншого об'єкта. Це потрібно для того, щоб використовувати код ще раз і при цьому максимально уникнути дублювання. У JavaScript успадкування ґрунтується на прототипах, тобто на спеціальних об'єктах, які є прабатьками інших об'єктів. Всі об'єкти мають властивість [[Prototype]], що посилається на його прототип. Коли ми намагаємося отримати доступ до властивості або методу об'єкта, який у нього немає, JavaScript шукає його в прототипі.Якщо його там не знайдено, то пошук триває ланцюжком прототипів до найвищого рівня — до об'єкта Object.prototypeщо є прототипом всіх об'єктів. Давайте розглянемо на прикладі:

const person = < name: 'Alice', age: 25, sayHello: function () < console.log("Hello, I'm " + this.name); >, >; const student = Object.create(person); student.grade = 10; student.study = function() < console.log(this.name + 'is studying'); >; student.sayHello(); // Hello, I'm Alice student.study(); // Alice is studying console.log(student.age); // 25 console.log(student.hasOwnProperty('name')); // false console.log(student.hasOwnProperty('grade')); // true

Об'єкт student успадковує властивості та методи від об'єкта person через його прототип. Він також має власні властивості grade і Студія. Метод hasOwnProperty дозволяє перевірити, чи є властивість власною або успадкованою.

Визначення методів

Метод – це функція, яка належить об'єкту і може використовувати його дані через ключове слово this. Методи можуть бути визначені як:

const person = < name: "Alice", age: 25, sayHello: function () < console.log("Hello, I'm " + this.name); >>; person.sayHello(); // Hello, I'm Alice

function Animal(name, type) < this.name = name; this.type = type; >Animal.prototype.makeSound = function () < console.log(this.name + "says" + this.type); >; const dog = new Animal("Rex", "woof"); dog.makeSound(); // Rex says woof

У цих прикладах бачимо два способи визначення методів: як властивість об'єкта person і як властивість прототипу типу Animal.

Використання цього посилання на об'єкт

Ключове слово this JavaScript використовується для посилання на поточний об'єкт, у контексті якого виконується код. Значення this залежить від того, як і де викликається функція:

• Якщо функція викликається як метод об'єкта, то this посилається на цей об'єкт:

const person = < name: "Alice", age: 25, sayHello: function () < console.log("Hello, I'm " + this.name); >>; person.sayHello(); // Hello, I'm Alice

Тут ми викликаємо функцію sayHello як метод об'єкта personтому this всередині функції посилається на об'єкт person.

• Однак, стрілочна функція всередині об'єкта не працюватиме з цим, а посилатиметься відразу на глобальний об'єкт (window у браузері або global в Node.js):

var lastName = 'Іваненко'; const person = < lastName: 'Dubova', age: 25, sayHello: () =>< console.log("Hello, I'm " + this.lastName); >, >; person.sayHello(); //Hello, I'm Ivanenko - виведе ім'я із глобальної області видимості

Важливо! У глобальну область видимості потрапляють змінні, оголошені за допомогою var. Змінні, оголошені за допомогою let і const будуть видавати Hello, I'm undefined.

• Якщо функція викликається як звичайна функція, то this також буде посилатися на глобальний об'єкт:

function sayHello() < firstName: "Dima", console.log("Hello, I'm" + this.firstName); >var firstName = "Pasha"; // Змінна у світовій області видимості sayHello(); // Hello, I'm Pasha function sayBye() < console.log("Hello, I'm" + this.lastName); >const lastName = "Durov"; // Змінна у блочній області видимості sayBye(); // Hello, I'm undefined

Ми викликаємо функцію sayHello як звичайну функцію, тому this всередині функції посилається на глобальний об'єкт, який має властивість name зі значенням "Bob".

• Якщо функція викликається з оператором new, то this посилається на новий об'єкт, який створюється під час виклику функції:

function Animal(name, type) < this.name = name; this.type = type; >const dog = new Animal("Rex", "woof"); console.log(dog.name); // Rex console.log(dog.type); // woof

На цей раз ми викликаємо функцію Animal з оператором new, тому цявсередині функції посилається на новий об'єкт dog, який отримує властивості name і type.

• Якщо функція викликається з методами call або apply, то this посилається на об'єкт, який передається як перший аргумент цих методів:

function sayHello() < console.log("Hello, I'm" + this.name); >const person = <name: "Alice", age: 25>; sayHello.call(person); // Hello, I'm Alice sayHello.apply(person); // Hello, I'm Alice

У цих прикладах ми викликаємо функцію sayHello з методами call і apply, this всередині функції посилається на об'єкт person, який передається як перший аргумент цих методів.

Визначення гетерів та сеттерів

Геттери та сеттери – це спеціальні методи, які дозволяють отримувати та встановлювати значення властивостей об'єкта за допомогою додаткової логіки. Вони визначаються за допомогою ключових слів get і set всередині літералу об'єкта або дескриптора властивості ↓

const person = <name: "Alice", age: 25, get fullName() < return this.name + "Smith"; >, set fullName(value) < var parts = value.split(" "); this.name = parts[0]; this.lastName = parts[1]; >>; console.log(person.fullName); // Alice Smith person.fullName = "Bob Jones"; console.log(person.name); // Bob console.log(person.lastName); // Jones

Ми задали геттер та сетер для властивості fullName об'єкта person. Геттер повертає повне ім'я з імені та прізвища. Сеттер розбиває повне ім'я на частини та встановлює ім'я та прізвище.

* Як використовувати гетери та сектори в класах читайте тут.

Об'єкти в JavaScript

Об'єкт JavaScript - це тип даних, який може містити колекції різних властивостей та інших більш складних структур. Дані найчастіше об'єднані загальним змістом, що дозволяє оперувати об'єктом як єдиним цілим. Властивості у свою чергу мають ім'я та значення, що дозволяє змінювати їх, отримувати, видаляти чи створювати нові.

Для створення об'єкта використовують два варіанти синтаксису

let student = новий Object(); // конструктор об'єкта let student = <>; // літерал об'єкта чи літеральна нотація

Найчастіше застосовується другий варіант із фігурними дужками

Літеральний синтаксис

Літерал об'єкта - це список властивостей укладений у фігурні дужки та розділений комами.

let student – ​​змінна куди записується посилання на об'єкт.

name: "Семен" - необов'язковий параметр властивості у форматі ключ: значення , де перше це ім'я або іншими словами id властивості, а друге його значення.

course: "JavaScript розробник", - остання кома називається «висячою», вона не обов'язкова, але такий запис спрощує заміну властивостей, додавання нових або видалення існуючих.

"student level": якщо ім'я властивості складається з двох слів, воно полягає в лапки. Значення властивості також полягає у лапки, але тільки якщо це рядок.

Об'єкти в JavaScript - це тип посилань, тому присвоюючи об'єкт змінної, ми записуємо туди не сам об'єкт, а тільки посилання, яке вказує на те місце в пам'яті, де він зберігається.

Як звернутися до об'єкта або його властивості

Для того, щоб отримати весь об'єкт, необхідно просто звернутися до змінної.

Звернутися до окремої властивості можна двома способами: через точку - об'єкт.

і за допомогою квадратних дужок об'єкт["властивість"]

alert (student["student level"]);

Якщо в ключі є пробіли, він починається з цифри або містить спеціальні символи, крім $ і _ звернутися до нього можна лише останнім способом.

Якщо звернутися до властивості, якої немає в об'єкті, програма поверне undefined і продовжить виконувати код. Така поведінка JavaScript з одного боку не заважає роботі програми, з іншого може призвести до помилок, які не просто відловити.

Також звернутися до властивості можна лише через дужки, якщо його ім'я зберігається у змінній.

let studentLevel = "student level" let student = < name: "Семен", age: 21, "student level": "junior", course: "JavaScript розробник", >; alert(student[studentLevel]);

У цьому випадку при зверненні ім'я змінної у квадратних дужках записується без лапок.

Можливий і такий запис

let studentLevel = "student level" let student = < name: "Семен", age: 21, [studentLevel]: "junior", course: "JavaScript розробник", >; alert(student["student level"]);

У цьому випадку [studentLevel] називається властивістю, що обчислюється, а звернутися до нього можна через значення, яке ми записали в змінну studentLevel .

Ім'я властивості - це символ або рядок та всі інші типи даних будуть наведені саме до рядка. Таким чином, навіть якщо ім'я ключа 0, Це саме рядок, а чи не число і звернутися до нього можна як object[0] , і object["0"] .

Після того, як ми навчилися звертатися до властивостей, розберемо, що з ними можна робити ще.

Додавання властивості

let student = < name: "Насіння", >; student.age = 21; student["student level"] = "junior"; student.course = "JavaScript розробник"; console.log(student);

Щоб додати нову властивість: спочатку пишемо ім'я змінної, де лежить потрібний нам об'єкт, далі ім'я нового ключа, знак і потрібне значення.

Видалення якості

let student = < name: "Семен", age: 21, "student level": "junior", course: "JavaScript розробник", >; delete student["student level"]; delete student.age; console.log(student);

Для видалення пари ключ: значення ми використовуємо оператор delete і відразу ж дивимося результат у console, де об'єкт student виводиться вже без age та "student level".

Зміна значення властивості

const student = < name: "Семен", age: 21, "student level": "junior", course: "JavaScript розробник", >; student.age = 29; student["student level"] = "middle"; console.log(student);

Зміна властивостей відбувається звичним нам способом, звертаємось до потрібного ключа і записуємо через нове значення.

При оголошенні об'єкта через const залишається можливість правити його: додавати, видаляти змінювати властивості. JavaScript видасть помилку тільки в тому випадку, якщо спробувати надати самій змінній інше значення.

Допустимі імена властивостей

На відміну від змінних імена властивостей можна називати як завгодно, навіть використовуючи зарезервовані слова, такі як let, var, const і так далі. Єдина назва, з якою виникнуть проблеми, це __proto__ , але швидше за все навряд чи вам захочеться називати властивість саме так.

Вкладені об'єкти

Об'єкти у свою чергу можуть містити ролі значення властивостей інші об'єкти.

let student = < name: "Насіння", age: 21, skills: < html: true, css: true, react: false, >, >; console.log(student.skills.html);

У таких випадках звернення до вкладених об'єктів відбувається ланцюжком.

Перевірка існування якості

Перевірити властивість існування в об'єкті можна двома способами.

let student = < name: "Семен", age: 21, "student level": "junior", course: "JavaScript розробник", >; if (student["work experience"] === undefined || "work experience" in student === false) < alert ('Студент не має досвіду роботи!'); >;

student["work experience"] - у першому випадку ми користуємося тим, що якщо звернутися до властивості, якої немає в об'єкті, програма поверне undefined.

"work experience" in student - у другому випадку ми користуємося спеціальною конструкцією "key" in object. Якщо властивість є, отримаємо true, інакше false.

Ці два способи взаємозамінні, крім того випадку, коли значення ключа дорівнює undefined.

Цикл for…in для перебору властивостей об'єкту

 for (let key in object)

let key - оголошуємо змінну, яка міститиме імена властивостей. Назва змінної не обов'язково має бути саме key.

object – ім'я об'єкта з яким працюємо.

console.log(key) - виводимо на console ім'я властивості.

console.log(object[key]) - виводимо в console значення якості.

<. >- код укладений у фігурні дужки називається тілом циклу і виконується кожному за властивості об'єкта.

За допомогою for…in можна перебрати властивості та об'єкта в об'єкті.

 let student = < name: "Насіння", age: 21, skills: < html: true, css: true, react: false, >, >; for (property in student.skills)

У круглих дужках ми явно спілкуємося до потрібного об'єкту student.skills, також робимо і при отриманні значення ключа student.skills [property].

Порядок отримання властивостей

Якщо властивості "цілочисленні", тоді ключі сортуються за зростанням.

 let skills = < "30": "React", "1": "HTML", "3": "CSS", "10": "JavaScript", >; for (key in skills)

У цьому випадку в console можна буде побачити наступну записку

1: HTML 3: CSS 10: JavaScript 30: React

«Цілочисне властивість» – це властивість (рядок), яка може бути перетворена на число і назад.

"1", "4", "10", "38", "85" - цілочисленні.

"+1", "-4", "10.3" - не є цілим.

У всіх інших випадках, коли властивості не цілі, ключі будуть виводитися в порядку запису в об'єкті.

Копіювання об'єкта

let skills = < "4": "React", "1": "HTML", "2": "CSS", "3": "JavaScript", >; let skillList = skills; skillList["5"] = "NodeJS"; console.log(skills); console.log(skillList);

Поміщаючи об'єкт в іншу змінну, ми не створюємо новий об'єкт з такими ж параметрами, а записуємо в змінну посилання вже існуючий.

У прикладі ми записали посилання на об'єкт у змінну skillList, додали туди властивість з ім'ям "5" та значенням "NodeJS". Далі вивели в console skills і skillList і бачимо 5: "NodeJS", як у першому, так і другому варіанті.

Дублювання об'єкта - Object.assign

Продублювати об'єкт в іншу змінну можна двома способами, за допомогою методу Object.assign і циклу for ... in .

let skills = < "4": "React", "1": "HTML", "2": "CSS", "3": "JavaScript", "5": "NodeJS", >; let mySkills = Object.assign(<>, skills); delete mySkills["2"]; console.log(skills); console.log(mySkills);

У прикладі ми продублювали об'єкт skills в змінну mySkills.

<> - фігурні дужки в даному випадку говорять про те, що ми створюємо новий об'єкт.

skills - об'єкт, який копіюємо.

Використовуючи для дублювання цикл for…in, ми безпосередньо переписуємо всі властивості з об'єкта в об'єкт.

let skills = < "1": "HTML", "2": "CSS", "3": "JavaScript", >; let mySkills = <>; for (let key in skills) < mySkills[key] = skills[key]; >delete mySkills["3"]; console.log(mySkills); console.log(skills);

Разом

1. Об'єкти JavaScript - це важлива частина мови програмування, вони часто використовуються і потрібні для зберігання колекцій і складніших сутностей.

2. Інформацію з об'єкта можна отримувати, її можна міняти, видаляти чи додавати.

3. Сама змінна куди ми записуємо об'єкт, насправді містить посилання місце у пам'яті, де розміщений цей объект.

4. Для вибору властивостей об'єкта є спеціальний цикл for ... in .

5. Як властивості об'єкта, можуть бути інші об'єкти та функції.

6. У JavaScript є різні типи об'єктів:

• прості: розглянули у цій статті;
• масиви: зберігання упорядкованих колекцій елементів;
• data: зберігання інформації про дату;
• error; зберігання інформації про помилку;
• та інші.