Основні відмінності між масивами та літералами об’єктів

Перше, давайте поговоримо про Літерали Об'єктів

Що таке Літерали Об'єктів

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

пара ключ-значення

Вкладені Літерали Об'єктів

Це просто дані, збережені всередині інших даних, літерал об'єкта, що зберігається всередині іншого літерала об'єкта. Наприклад

Вкладений Літерал Об'єкта

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

Масив

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

Наприклад:

let listOfNoiseMakers=[   
"Chris",  
"Victor",  
"Bola",  
"Ayokunle"  
]  

Щоб побачити цей список у консолі, можна викликати масив за допомогою  

console.log(listOfNoiseMakers)

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

Доступ до елементів масиву або їх вилучення

Щоб отримати дані з масиву, ви можете викликати ім'я масиву та символ масиву [] і потім додати індекс або позицію всередині масиву, наприклад shoppingList[0], shoppingList[2]... Дивіться більш детальний приклад нижче:

let fruits = ["Apple", "Banana", "Cherry"];  
console.log(fruits[0]); // Вивід: Apple  
console.log(fruits[2]); // Вивід: Cherry

Щоб дізнатися довжину масиву, ми використовуємо…

let long = fruits.length  
console.log(long)

Методи масивів

1. Додавання елемента до списку фруктів
   let fruits = [“Apple”, “Banana”, “Cherry”];

• Щоб додати елемент в кінець списку, використовуємо push
  fruits.push(“Mango”)

fruits.push("Mango")  

Вивід:  
['Apple', 'Banana', 'Cherry', 'Mango']  
Метод push в JavaScript додає елемент в кінець масиву

• Щоб додати елемент на початок списку, використовуємо unshift
  fruits.unshift(“Orange”)

fruits.unshift("Orange")  

Вивід:  
['Orange', 'Apple', 'Banana', 'Cherry']  
Метод unshift в JavaScript додає елемент на початок масиву

1. Видалення елемента зі списку фруктів

• Щоб видалити елемент з початку списку, використовуємо shift

fruits.shift()  

Вивід:  
Цей метод автоматично видалить перший елемент зі списку

• Щоб видалити елемент з кінця списку, використовуємо pop

fruits.pop()  

Вивід:  
Цей метод автоматично видалить останній елемент зі списку

Редагування елемента масиву

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

Що таке Літерали Об'єктів

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

пара ключ-значення

Вкладені Літерали Об'єктів

Це просто дані, збережені всередині інших даних, літерал об'єкта, який міститься всередині іншого літерала об'єкта. Наприклад:

Вкладений Літерал Об'єкта

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

Масив

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

let listOfNoiseMakers=[   
"Chris",  
"Victor",  
"Bola",  
"Ayokunle"  
]  

Щоб побачити цей список у консолі, можна викликати масив таким чином:  

console.log(listOfNoiseMakers)

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

Доступ до елементів масиву або їх вилучення

Щоб витягти дані з масиву, ви можете викликати ім'я масиву та символ масиву [] і потім додати індекс або позицію всередині масиву, наприклад shoppingList[0], shoppingList[2]… Дивіться більш детальний приклад нижче:

let fruits = ["Apple", "Banana", "Cherry"];  
console.log(fruits[0]); // Вивід: Apple  
console.log(fruits[2]); // Вивід: Cherry

Щоб дізнатися довжину масиву, ми використовуємо…

let long = fruits.length  
console.log(long)

Методи масивів

1. Додавання елемента до списку фруктів
   let fruits = [“Apple”, “Banana”, “Cherry”];

• Щоб додати елемент в кінець списку, використовуємо push
  fruits.push(“Mango”)

fruits.push("Mango")  

Вивід:  
['Apple', 'Banana', 'Cherry', 'Mango']  
Метод push в JavaScript додає елемент в кінець масиву

• Щоб додати елемент на початок списку, використовуємо unshift
  fruits.unshift(“Orange”)

fruits.unshift("Orange")  

Вивід:  
['Orange', 'Apple', 'Banana', 'Cherry']  
Метод unshift в JavaScript додає елемент на початок масиву

1. Видалення елемента зі списку фруктів

• Щоб видалити елемент з початку списку, використовуємо shift

fruits.shift()  

Вивід:  
Цей метод автоматично видалить перший елемент зі списку

• Щоб видалити елемент з кінця списку, використовуємо pop

fruits.pop()  

Вивід:  
Цей метод автоматично видалить останній елемент зі списку

Редагування елемента масиву

Редагування елемента масиву означає процес зміни значення існуючого елемента в масиві. Це робиться шляхом доступу до елемента за допомогою його індексу та присвоєння йому нового значення.
наприклад

let fruits = ["Apple", "Banana", "Mango", "Cherry"];  

//якщо я хочу змінити банан на щось інше, я використаю індекс   
банану і присвою нове значення, пам'ятайте, що індексація починається   
з нуля 0, тобто індекси 0,1,2,3.....//  

fruits[1]="Orange"  
Вивід буде:  
['Apple', 'Orange', 'Mango', 'Cherry', 'Mango']

Використання методу include

Метод includes() використовується для перевірки, чи містить масив (або рядок) певне значення. Він повертає логічне значення: true, якщо значення існує, і false, якщо його немає.

let fruits = ["Apple", "Banana", "Cherry"];  
console.log(fruits.includes("Banana")); // Вивід: true  
console.log(fruits.includes("Mango")); // Вивід: false

Щоб вирізати частину масиву

JavaScript надає кілька методів для вилучення або видалення частини масиву. Ось два найпоширеніші методи:

1. Метод Slice()
   Метод slice() використовується для вилучення частини масиву без зміни оригінального масиву. Вирізання за допомогою slice не змінює значення оригінального масиву, він залишається незмінним.

let fruits = ["Apple", "Banana", "Cherry", "Mango", "Orange"];  
let part = fruits.slice(1, 4);  

//slice почне вирізати з індексу 1 і зупиниться перед індексом 4  

console.log(part); // Вивід: ["Banana", "Cherry", "Mango"]  
console.log(fruits); // Вивід: ["Apple","Banana","Cherry","Mango","Orange"]

1. Метод Splice()
   Метод splice() використовується для видалення або заміни елементів масиву. Він змінює оригінальний масив. Splice є тим типом вирізання, який змінює оригінальний масив, коли ви вирізаєте за допомогою методу splice, це впливає на оригінальний список.

let fruits = ["Apple", "Banana", "Cherry", "Mango", "Orange"];  
let part = fruits.splice(1, 2);  
console.log(part); // Вивід: ["Banana", "Cherry"]  
console.log(fruits); // Вивід: ["Apple", "Mango", "Orange"]

Різниці між масивами та літералами об'єктів

Висновок

• Використовуйте масиви при роботі з впорядкованими колекціями або списками даних.
• Використовуйте літерали об'єктів коли потрібно представляти структуровані дані з описовими властивостями.
  наприклад

let fruits = ["Apple", "Banana", "Mango", "Cherry"];  

//якщо я хочу змінити банан на щось інше, я використаю індекс   
банану і присвою нове значення, пам'ятайте, що індексація починається   
з нуля 0, тобто індекси 0,1,2,3.....//  

fruits[1]="Orange"  
Вивід буде:  
['Apple', 'Orange', 'Mango', 'Cherry', 'Mango']

Використання методу include

Метод includes() використовується для визначення, чи містить масив (або рядок) певне значення. Він повертає логічне значення: true, якщо значення є, і false, якщо його немає.

let fruits = ["Apple", "Banana", "Cherry"];  
console.log(fruits.includes("Banana")); // Вивід: true  
console.log(fruits.includes("Mango")); // Вивід: false

Щоб вирізати частину масиву

JavaScript надає кілька методів для вилучення або видалення частин масиву. Ось два найбільш поширених методи:

1. Метод Slice()
   Метод slice() використовується для вилучення частини масиву без зміни оригінального масиву. Вирізання за допомогою slice не змінює значення оригінального масиву, він залишається незмінним.

let fruits = ["Apple", "Banana", "Cherry", "Mango", "Orange"];  
let part = fruits.slice(1, 4);  

//slice почне вирізати з індексу 1 і зупиниться перед індексом 4  

console.log(part); // Вивід: ["Banana", "Cherry", "Mango"]  
console.log(fruits); // Вивід: ["Apple","Banana","Cherry","Mango","Orange"]

1. Метод Splice()
   Метод splice() використовується для видалення або заміни елементів масиву. Він змінює оригінальний масив. Splice є тим типом вирізання, який змінює оригінальний масив. Коли ви використовуєте метод splice для вирізання, він впливає на оригінальний список.

let fruits = ["Apple", "Banana", "Cherry", "Mango", "Orange"];  
let part = fruits.splice(1, 2);  
console.log(part); // Вивід: ["Banana", "Cherry"]  
console.log(fruits); // Вивід: ["Apple", "Mango", "Orange"]

Різниці між масивами та літералами об'єктів

Висновок

• Використовуйте масиви (Arrays), коли працюєте з упорядкованими колекціями або списками даних.
• Використовуйте літерали об'єктів (Object Literals), коли потрібно представляти структуровані дані з описовими властивостями.

Перекладено з: The core differences between Arrays and Object literals