# Методи масиву
Масиви в JavaScript мають ряд вбудованих методів, які спрощують роботу з ними, дозволяючи виконувати різноманітні операції з елементами масиву.
{% hint style="info" %}
Методи бувають деструктивні, тобто такі, що змінюють вихідний масив, обʼєкт тощо і не деструктивні, які повертають нову сутність не змінюючи при цьому вихідну сутність.
Далі по конспекту буде вказано цю особливість біля певних методів, де на це потрібно звернути особливу увагу.
{% endhint %}
## Методи split() і join() - недеструктивні
Методи split(delimiter) і join(delimiter) використовуються для роботи з рядками та масивами розбиваючи рядок на масив, або навпаки обʼєднуючи масив у рядок.
### **Метод** split() - недеструктивний
Метод split() розділяє рядок на масив підрядків, використовуючи розділювач (delimiter), який вказується як параметр методу, і повертає новий масив.
```javascript
let myString = "Це рядок, який потрібно розділити";
let myArray = myString.split(" "); // Розділяє рядок по пробілу
console.log(myArray); // Виведе: ["Це", "рядок,", "який", "потрібно", "розділити"]
```
Можна вказати будь-який символ або рядок як розділювач. При вказанні пустого рядка у ролі аргументу split() розділить рядок на окремі символи.
```javascript
let myString = "JavaScript";
let myArray = myString.split(""); // Розділяє рядок на масив символів
console.log(myArray); // Виведе: ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']
```
### **Метод** join() - недеструктивний
Метод join() об'єднує всі елементи масиву в рядок і повертає отриманий рядок.
```javascript
let myArray = ["Це", "рядок,", "який", "потрібно", "з'єднати"];
let myString1 = myArray.join(" "); // Об'єднує елементи масиву з пробілом
let myString2 = myArray.join("-"); // Об'єднує елементи масиву з тире
let myString3 = myArray.join(""); // Об'єднує елементи масиву
console.log(myString1); // Виведе: "Це рядок, який потрібно з'єднати"
console.log(myString2); // Виведе: "Це-рядок,-який-потрібно-з'єднати"
console.log(myString3); // Виведе: "Церядок,якийпотрібноз'єднати"
```
Метод join() приймає розділювач, який потрібно вставити між кожними елементами масиву. При порожньому рядку в ролі аргументу, елементи просто з'єднуються без розділювача.
## Метод indexOf() - недеструктивний
Метод indexOf() використовують для пошуку заданого елемента в масиві. Метод повертає індекс елемента. Якщо елемент не знайдено, метод повертає -1.
```javascript
array.indexOf(wanted_item);
```
Приклад:
```javascript
let myArray = [10, 20, 30, 40, 50];
let elIndex1 = myArray.indexOf(30);
let elIndex2 = myArray.indexOf(60);
console.log(elIndex1); // Виведе: 2 (індекс елемента 30 у масиві)
console.log(elIndex2); // Виведе: -1 (такого елемента в масиві немає)
```
## Метод includes() - недеструктивний
Метод includes() використовують для перевірки того, чи містить масив певний елемент. Метод повертає true або false в залежності від того, чи знайдено елемент у масиві.
```javascript
array.includes(wanted_item);
```
Приклад:
```javascript
let myArray = [10, 20, 30, 40, 50];
let result1 = myArray.includes(30);
let result2 = myArray.includes(60);
console.log(result1); // Виведе: true (елемент 30 знайдено у масиві)
console.log(result2); // Виведе: false (елемент 60 не знайдено у масиві)
```
## Перевірка багатьох умов з includes()
Припустимо у нас є бренди різних компаній. І нам треба перевірити чи запитуваний бренд є виробником автомобілів. Якщо в умові перевірки перераховувати всі компанії, то код стане громіздким і нечитабельним.
```javascript
const firm = "Audi";
if (
firm === "Ford" ||
firm === "Audi" ||
firm === "Toyota" ||
firm === "BMW" ||
firm === "Opel"
) {
console.log("This is a car!");
} else {
console.log("This isn't a car!");
}
```
Як видно ми в умові перевіряємо тільки 5 фірм, а їх існують сотні. І прописувати перевірку кожної моделі в розгалуженні - погана ідея. Краще створити один масив із назвами автомобільних компаній і просто використати метод includes().
```javascript
const cars = ["Ford", "Audi", "Toyota", "BMW", "Opel"];
const firm = "Audi";
if (cars.includes(firm)) {
console.log("This is a car!");
} else {
console.log("This isn't a car!");
}
```
## Методи push(), pop(), shift() і unshift() - деструктивні
Ці методи призначені для **зміни** масиву, додаючи, видаляючи та повертаючи його елементи. Працюють тільки з крайнім лівим і крайнім правим елементом, і не можуть вставити або видалити елемент з довільної позиції.
### Метод push() - деструктивний
push() - метод, який додає один або кілька елементів в кінець масиву і повертає нову довжину масиву.
```javascript
let myArray = [1, 2, 3];
myArray.push(4); // [1, 2, 3, 4]
let resultOfPush = myArray.push(5, 6); // [1, 2, 3, 4, 5, 6]
console.log(myArray); // Виведе: [1, 2, 3, 4, 5, 6]
console.log(resultOfPush); // Виведе: 6 (Довжина масиву після додавання нових елементів)
```
### Метод pop() - деструктивний
pop() - метод, який видаляє останній елемент з масиву і повертає його значення. Якщо масив порожній, метод повертає undefined.
```javascript
let myArray = ["Red", "Green", "Blue"];
let resultOfPop = myArray.pop(); // resultOfPop = "Blue", myArray = ["Red", "Green"]
console.log(myArray); // ["Red", "Green"]
console.log(resultOfPop); // "Blue"
```
### Метод shift() - деструктивний
shift() - метод, який видаляє перший елемент з масиву і повертає його значення. Всі наступні елементи зсуваються на одну позицію до початку масиву.
```javascript
let myArray = ["Red", "Green", "Blue"];
let resultOfShift = myArray.shift(); // resultOfShift = "Red", myArray = ["Green", "Blue"]
console.log(myArray); // ["Green", "Blue"]
console.log(resultOfShift); // "Red"
```
### Метод unshift() - деструктивний
unshift() - метод, який додає один або кілька елементів на початок масиву і повертає нову довжину масиву.
```javascript
let myArray = ["Red", "Green", "Blue"];
myArray.unshift("Orange");
let resultOfUnshift = myArray.unshift("Magenta", "Brown");
console.log(myArray); // ["Magenta", "Brown", "Orange", "Red", "Green", "Blue"]
console.log(resultOfUnshift); // resultOfUnshift = 6 - довжина масиву після додавання елементів
```
## Метод slice() - недеструктивний
Метод slice() використовують для створення нового масиву, що містить копію частини вихідного масиву. Він не змінює вихідний масив, а лише повертає новий масив з вибраними елементами. Копія створюється з **start\_index** і до, але не включно, **finish\_index** - індекси елементів вихідного масиву.
```javascript
array.slice(start_index, finish_index);
```
```javascript
let myArray = [1, 2, 3, 4, 5];
console.log(myArray); // Виведе: [1, 2, 3, 4, 5]
let newArray = myArray.slice(1, 4); // Витягає елементи з індексами від 1 до 3: [2, 3, 4]
console.log(newArray); // Виведе: [2, 3, 4]
console.log(myArray); // Виведе: [1, 2, 3, 4, 5] - вихідний масив не змінився
```
Параметри **start\_index** та **finish\_index** є необов'язковими. Якщо їх не вказати, то буде створена копія масиву.
```javascript
let myArray = [1, 2, 3, 4, 5];
console.log(myArray); // Виведе: [1, 2, 3, 4, 5]
let newArray = myArray.slice(); // Створиться копія вихідного масива
console.log(newArray); // Виведе: [1, 2, 3, 4, 5]
console.log(myArray); // Виведе: [1, 2, 3, 4, 5] - вихідний масив не змінився
```
Якщо **finish\_index** не вказано, slice() витягне всі елементи починаючи з **start\_index** до кінця масиву.
```javascript
let myArray = [1, 2, 3, 4, 5];
console.log(myArray); // Виведе: [1, 2, 3, 4, 5]
let newArray = myArray.slice(1); // Витягає елементи з індексами від 1 до кінця: [2, 3, 4, 5]
console.log(newArray); // Виведе: [2, 3, 4, 5]
console.log(myArray); // Виведе: [1, 2, 3, 4, 5] - вихідний масив не змінився
```
Якщо значення **start\_index** від'ємне, а **finish\_index** не зазначено - в новий масив будуть скопійовані така кількість останніх елементів вихідного масиву.
```javascript
let myArray = [1, 2, 3, 4, 5];
console.log(myArray); // Виведе: [1, 2, 3, 4, 5]
let newArray = myArray.slice(-2); // Витягає два останні елементи [4, 5]
console.log(newArray); // Виведе: [4, 5]
console.log(myArray); // Виведе: [1, 2, 3, 4, 5] - вихідний масив не змінився
```
## Метод splice() - деструктивний
Метод splice() використовують для зміни вмісту масиву шляхом видалення, додавання або заміни елементів. Він може видаляти елементи, вставляти нові елементи або одночасно видаляти та додавати їх навіть всередині масиву.
```javascript
array.splice(start_index,
number_of_items_to_delete,
element1, element2, ...);
```
**start\_index**: Індекс, з якого треба почати зміни у масиві.
**number\_of\_items\_to\_delete** (необов'язковий): Кількість елементів, які потрібно видалити з масиву починаючи з **start\_index**.
**element1, element2, ...** (необов'язковий): Елементи, які потрібно додати до масиву починаючи з **start\_index**.
### Видалення
Щоб видалити елементи в масиві, передаються два аргументи.
```javascript
array.splice(start_index, number_of_items_to_delete);
```
**start\_index** - індекс першого елемента для видалення
**number\_of\_items\_to\_delete** - кількість елементів, для видалення
```javascript
const myArray = ["A", "B", "C", "D", "E", "F"];
// Видеде: ["A", "B", "C", "D", "E", "F"]
console.log(myArray);
// У вихідному масиві видаляє 2 елементи починаючи з елемента з індексом 1
const newArray = myArray.splice(1, 2);
// Видеде змінений вихідний масив: ["A", "D", "E", "F"]
console.log(myArray);
// Видеде fмсив видалених елементів: ["B", "C"]
console.log(newArray);
```
Цей метод змінює вихідний масив. А результат його відпрацювання - масив видалених елементів. На практиці масив видалених елементів використовують рідко. Переважно, необхідно просто видалити елементи з масиву. Тому можна не присвоювати його жодній змінній.
```javascript
myArray.splice(1, 2);
```
### Додавання
Щоб додати один або декілька елементів в масив, необхідно передати три або більше аргументів. Оскільки видаляти елементи непотрібно, то другий аргумент буде дорівнювати нулю.
```javascript
array.splice(position, 0, element1, element2, ...);
```
**position** - початкова позиція в масиві, куди будуть вставлені нові елементи.
**Другий аргумент** - це нуль, вказує, що непотрібно видаляти елементи в місці додавання нових.
**Третій, четвертий і всі наступні аргументи** - це нові елементи, які додаються в масив.
```javascript
const myArray = ["A", "B", "C", "D"];
console.log(myArray); // Видеде: ["A", "B", "C", "D"]
// У вихідний масив додається 2 елементи починаючи з елемента з індексом 1
// елементи, які йдуть далі - зсуваються
const newArray = myArray.splice(1, 0, "X", "Y");
console.log(myArray); // Видеде: ["A", "X", "Y", "D", "E", "F"]
console.log(newArray); // Видеде: порожній масив []
```
Цей метод змінює вихідний масив. А результат його відпрацювання - порожній масив (бо ніяких елементів не видалено). На практиці цей метод використовують без присвоєння його жодній змінній.
```javascript
myArray.splice(1, 0, "X", "Y");
```
### Заміна
Заміна поєднує в собі видалення одного або більше елементів і одночасне додавання одного або більше елементів.
Для заміни необхідно передати щонайменше три аргументи. Кількість елементів, які видаляються і додаються, може не збігатися.
```javascript
array.splice(position,
number_of_items_to_delete,
element1, element2, ...);
```
**position** - індекс першого елемента для видалення
**number\_of\_items\_to\_delete** - кількість елементів, що видаляються
**Третій, четвертий і всі наступні аргументи** - це нові елементи, які додаються в масив.
```javascript
const myArray = ["A", "B", "C", "D", "E"];
console.log(myArray); // Видеде: ["A", "B", "C", "D", "E"]
// У вихідному масиві видаляється 2 елементи починаючи від індексу 1
// і на це місце додаються три нові, елементи, які йдуть далі - зсуваються
const newArray = myArray.splice(1, 2, "X", "Y", "Z");
// Видеде: ["A", "X", "Y", "Z", "D", "E"]
console.log(myArray);
// Видеде: масив видалених елементів ["B", "C"]
console.log(newArray);
```
Так само на практиці зазвичай непотрібні видалені елементи, тому достатньо просто застосувати метод, без присвоєння результату його роботи змінній.
```javascript
myArray.splice(1, 2, "X", "Y", "Z");
```
## Метод concat() - недеструктивний
Метод concat() використовують для об'єднання двох чи більше масивів у новий масив. Він не змінює вихідні масиви, а повертає новий масив, який складається з об'єднаних елементів.
```javascript
array.concat(element1, element2, ..., elementN);
```
Метод concat() приймає один або більше аргументів - масивів або значень, які треба об'єднати.
```javascript
const colors = ["Red", "Green", "Blue"];
const animals = ["Cat", "Dog"];
console.log(colors); // Виведе: ["Red", "Green", "Blue"]
console.log(animals); // Виведе: ["Cat", "Dog"]
const newArray1 = colors.concat(animals);
console.log(newArray1); // Виведе: ["Red", "Green", "Blue", "Cat", "Dog"]
const newArray2 = animals.concat(colors);
console.log(newArray2); // Виведе: ["Cat", "Dog", "Red", "Green", "Blue"]
//Вихідні масиви не змінились
console.log(colors); // Виведе: ["Red", "Green", "Blue"]
console.log(animals); // Виведе: ["Cat", "Dog"]
```
**Покликання:**
[Більше про можливості методу slice() ](https://webtechparadise.com/article/understanding-slice-method-javascript-basics-negative-indexing-and-concept-shallow-copy/17)
