текст перекладу
Масиви (Arrays) та Об'єкти (Objects) — це два основні інструменти, які розробники використовують для організації та маніпуляції даними в JavaScript. Масиви — це справжні командні гравці, що тримають все в строгому порядку, тоді як Об'єкти — це мудрі бібліотекарі, які позначають все для швидкого доступу.
У цій статті ми розглянемо основні відмінності між цими двома структурами — як вони зберігають дані, як їх обробляють і для яких типових випадків використання вони підходять.
Фото від Fotis Fotopoulos на Unsplash
Що таке Масиви?
Масив — це колекція впорядкованих елементів, кожен з яких ідентифікується своєю позицією або індексом. Подумайте про це як про список справ, де кожен елемент має свою позицію (індекс), починаючи з 0.
Що таке Об'єкти?
Об'єкт — це колекція пар ключ-значення, яка зберігає різні пов'язані дані. Уявіть, що ви заходите в бібліотеку, де полиці організовані з мітками (ключами), такими як "Художня література", "Наукова література" і "Наука". Кожна мітка допомагає вам швидко знайти тип книги, яку ви шукаєте, без безцільного пошуку.
Об'єкти працюють так само:
- Ключ — це мітка на полиці.
- Значення — це колекція книг у категорії.
Основні відмінності між Масивами та Об'єктами
Структура
Масив організовує дані у строгій послідовності, де кожен елемент має індекс (числову позицію), починаючи з 0. Позиція елемента має значення, і саме це дозволяє Масивам добре працювати з даними, що мають певний порядок.
Наприклад, якщо ви слідуєте крокам рецепту, порядок є вирішальним:
let recipeSteps = [
'Розігріти духовку',
'Змішати інгредієнти',
'Випікати 30 хвилин'
];
Об'єкт — це як Шафа з Маркованими Шухлядами.
Уявіть, що у вас є шафа з кількома шухлядами, і кожна шухляда має мітку, яка описує її вміст. Наприклад:
• Одна шухляда має мітку "Шкарпетки" і містить всі ваші шкарпетки.
• Інша шухляда має мітку "Спідниці" і містить ваші спідниці.
• Третя шухляда має мітку "Кепки" і містить ваші кепки.
Вам не потрібно пам'ятати позицію шухляд (як у випадку з Масивами); ви просто дивитесь на мітку (ключ), щоб знайти те, що вам потрібно.
Замість того, щоб покладатися на порядок, Об'єкти використовують ключі для ідентифікації та доступу до даних.
let closet = {
socks: ["Червоні шкарпетки", "Сині шкарпетки", "Чорні шкарпетки"],
tShirts: ["Проста біла", "Графічна футболка", "Поло"],
hats: ["Бейсбольна кепка", "Федора"]
};
Доступ
У Масивах дані доступні за допомогою числового індексу. Індекс вказує точне місце елемента в колекції, що робить Масиви дуже ефективними для впорядкованих даних. Номер індексу починається з 0.
let recipeSteps = [
'Розігріти духовку',
'Змішати інгредієнти',
'Випікати 30 хвилин'
];
console.log(recipeSteps[0])
//Цей код виведе елемент на позиції 0 (Розігріти духовку)
У Об'єктах дані доступні за допомогою ключів, які є описовими мітками. Це робить Об'єкти ідеальними для зберігання пов'язаних даних, які не залежать від порядку, а від контексту або значення. Подумайте про ключі як про мітки на банках. Щоб дізнатися, що в банці, ви дивитесь на її мітку: "Джем", "Мед" чи "Арахісова паста".
let user = {
name: "Аліса",
age: 25,
country: "Франція"
};
console.log(user.name);
// Виведеться "Аліса", бо це значення ключа "name"
Зберігання
Масиви призначені для зберігання колекції окремих, незалежних елементів. Кожен елемент у Масиві зазвичай розглядається як окрема одиниця, навіть якщо вони пов'язані контекстом. Масиви чудово підходять для списків, послідовностей або колекцій подібних елементів.
Приклад: Уявіть, що ви складаєте список покупок. Кожен елемент у списку є незалежним.
текст перекладу
Кожен елемент — це окремий фрагмент даних, збережений у певній позиції.
let groceryList = [
'Хліб',
'Молоко',
'Масло',
'Арахісова паста',
'Чай з ромашки'
];
Об'єкти призначені для групування пов'язаних фрагментів даних як властивостей єдиного елементу. Кожна властивість (пара ключ-значення) описує атрибут цього елементу. Об'єкти ідеально підходять, коли потрібно представити складний об'єкт з кількома характеристиками.
Приклад: Уявіть, що ви описуєте окремий продукт, наприклад, автомобіль. Автомобіль — це не просто один елемент, а комбінація пов'язаних частин і атрибутів, які описують його як цілісну одиницю. Наприклад:
- Бренд: Toyota
- Модель: Corolla
- Рік: 2020
- Колір: Червоний
- Тип пального: Гібрид
let car = {
brand: 'Toyota',
model: 'Corolla',
year: 2020,
color: 'Червоний',
fuelType: 'Гібрид'
};
Використання
Масиви (Arrays) використовуються для списків або черг. Вони найкраще підходять, коли потрібно зберігати список елементів або коли потрібно працювати з колекцією подібних елементів (наприклад, іменами, числами), як от:
- Список покупок
- Послідовність чисел
- Плейлист пісень
let travelItems = [
'Ліки',
'Зубна щітка',
'Мило для купання',
'Олія для тіла',
'Продукти для догляду за шкірою'
];
Об'єкти (Objects) використовуються для опису об'єктів. Вони ідеальні для представлення речей з багатьма атрибутами, як от:
- Продукт з деталями (назва, ціна, бренд)
- Людина з особистою інформацією (ім'я, вік, місце перебування, професія)
const myLaptop = {
name: 'MacBook Pro',
chip: 'Apple M1 chip',
memory: '16 GB',
macOS: 'Sequoia 15.1.1',
storage: '512GB SSD'
};
Модифікація структур даних
Масиви та Об'єкти в JavaScript є змінними, тобто ви можете змінювати їх вміст після створення. Це включає додавання, оновлення або видалення елементів/властивостей.
Модифікація Масивів
- Метод push( ): Додає один або кілька елементів в кінець масиву.
let citrusFruits = [
"Апельсин",
"Лимон",
"Лайм",
"Грейпфрут",
"Мандарин",
"Мандарин",
"Помело",
"Клементин"
];
citrusFruits.push("Яблуко");
console.log(citrusFruits);
// Виведе оригінальний список цитрусових фруктів плюс Яблуко в кінці списку
- Метод unshift( ): Додає один або кілька елементів у початок масиву.
citrusFruits.unshift("Банан");
console.log(citrusFruits);
// Виведе оригінальний список цитрусових фруктів плюс Банан вгорі списку
- Метод pop( ): Видаляє останній елемент з масиву.
citrusFruits.pop();
console.log(citrusFruits);
// Виведе цитрусові фрукти без останнього елемента з оригінального списку
- Метод shift( ): Видаляє перший елемент з масиву.
citrusFruits.shift();
console.log();
// Виведе цитрусові фрукти без першого елемента з оновленого списку
- Ви можете безпосередньо змінювати елемент, звертаючись до нього за індексом.
citrusFruits[2] = "Судачі";
// Це змінить елемент з індексом 2 "Лайм" на "Судачі"
- Метод slice: Використовується для створення поверхневої копії частини масиву в новий масив. Це не змінює оригінальний масив, а повертає новий, що містить вибрані елементи.
array.slice(start, end);
start: (Необов'язково) Індекс, з якого починається вилучення. Якщо опущено, слайс починається з початку (індекс 0).
end: (Необов'язково) Індекс, до якого завершується вилучення. Елемент за цим індексом не включається. Якщо опущено, слайс продовжується до кінця масиву.
let fruits = ["Яблуко", "Апельсин", "Банан", "Виноград"];
let slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits);
// Виведе: ["Апельсин", "Банан"]
console.log(fruits);
// Виведе: ["Яблуко", "Апельсин", "Банан", "Виноград"] (незмінений)
- Метод splice: Використовується для додавання, видалення або заміни елементів в масиві, все в одному кроці.
текст перекладу
На відміну від методу slice(), метод splice() модифікує оригінальний масив і повертає видалені елементи у вигляді нового масиву.
// Видалення елементів
const fruits = ["Яблуко", "Апельсин", "Банан", "Виноград"];
const removed = fruits.splice(1, 2);
console.log(fruits); // Виведе: ["Яблуко", "Виноград"]
console.log(removed); // Виведе: ["Апельсин", "Банан"]
// Оновлення елементів
const fruits = ["Яблуко", "Апельсин", "Банан", "Виноград"];
fruits.splice(1, 2, "Персик", "Вишня");
console.log(fruits); // Виведе: ["Яблуко", "Персик", "Вишня", "Виноград"]
// Додавання елементів
const fruits = ["Яблуко", "Виноград"];
fruits.splice(1, 0, "Апельсин", "Банан");
console.log(fruits); // Виведе: ["Яблуко", "Апельсин", "Банан", "Виноград"]
// Видалення всіх елементів після певного індексу
const fruits = ["Яблуко", "Апельсин", "Банан", "Виноград"];
const removed = fruits.splice(2);
console.log(fruits); // Виведе: ["Яблуко", "Апельсин"]
console.log(removed); // Виведе: ["Банан", "Виноград"]
// Очищення масиву
const fruits = ["Яблуко", "Апельсин", "Банан", "Виноград"];
fruits.splice(0, fruits.length);
console.log(fruits); // Виведе: []
Модифікація об'єктів
- Додавання властивостей: Ви можете динамічно додавати властивості до об'єкта, використовуючи нотацію через крапку або квадратні дужки.
let car = { brand: "Toyota", model: "Corolla" };
car.year = 2020;
console.log(car);
// Виведе: { brand: "Toyota", model: "Corolla", year: 2020 }
- Оновлення властивостей: Ви можете змінювати значення існуючих властивостей, звертаючись до їх ключів.
let car = { brand: "Toyota", model: "Corolla", year: 2020 };
car.year = 2022;
console.log(car);
// Виведе: { brand: "Toyota", model: "Corolla", year: 2022 }
- Видалення властивостей: Оператор delete використовується для видалення властивості з об'єкта.
let car = { brand: "Toyota", model: "Corolla", year: 2020 };
delete car.year;
console.log(car);
// Виведе: { brand: "Toyota", model: "Corolla" }
Висновок: вибір правильного інструменту для завдання
Масиви (Arrays) та Об'єкти (Objects) в JavaScript — це як дві сторони однієї монети: обидва є необхідними, але кожен має свої переваги для різних завдань. Масиви — ваш вибір для впорядкованих списків та послідовностей, тоді як Об'єкти підходять, коли потрібно позначати та організовувати пов'язані деталі. Чи ви записуєте список покупок, чи описуєте характеристики свого ідеального автомобіля, ці інструменти роблять ваш код чистішим та ефективнішим.
Розуміння їхніх відмінностей — як вони зберігають, доступаються та змінюють дані — дає змогу робити більш обґрунтовані вибори у ваших проєктах. Тож наступного разу, коли ви зіткнетеся з викликом організації даних, пам'ятайте, що:
Масиви чудово підходять для порядку, а Об'єкти ідеальні для контексту або опису.
Перекладено з: Understanding the Core Differences Between Arrays and Objects in JavaScript