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

Масиви в JavaScript мають ряд вбудованих методів, які спрощують роботу з ними, дозволяючи виконувати різноманітні операції з елементами масиву.

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

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

Методи split() і join() - недеструктивні

Методи split(delimiter) і join(delimiter) використовуються для роботи з рядками та масивами розбиваючи рядок на масив, або навпаки обʼєднуючи масив у рядок.

Метод split() - недеструктивний

Метод split() розділяє рядок на масив підрядків, використовуючи розділювач (delimiter), який вказується як параметр методу, і повертає новий масив.

let myString = "Це рядок, який потрібно розділити";
let myArray = myString.split(" "); // Розділяє рядок по пробілу
console.log(myArray); // Виведе: ["Це", "рядок,", "який", "потрібно", "розділити"]

Можна вказати будь-який символ або рядок як розділювач. При вказанні пустого рядка у ролі аргументу split() розділить рядок на окремі символи.

let myString = "JavaScript";
let myArray = myString.split(""); // Розділяє рядок на масив символів
console.log(myArray); // Виведе: ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']

Метод join() - недеструктивний

Метод join() об'єднує всі елементи масиву в рядок і повертає отриманий рядок.

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.

array.indexOf(wanted_item);

Приклад:

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 в залежності від того, чи знайдено елемент у масиві.

array.includes(wanted_item);

Приклад:

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()

Припустимо у нас є бренди різних компаній. І нам треба перевірити чи запитуваний бренд є виробником автомобілів. Якщо в умові перевірки перераховувати всі компанії, то код стане громіздким і нечитабельним.

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().

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() - метод, який додає один або кілька елементів в кінець масиву і повертає нову довжину масиву.

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.

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() - метод, який видаляє перший елемент з масиву і повертає його значення. Всі наступні елементи зсуваються на одну позицію до початку масиву.

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() - метод, який додає один або кілька елементів на початок масиву і повертає нову довжину масиву.

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 - індекси елементів вихідного масиву.

array.slice(start_index, finish_index);

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 є необов'язковими. Якщо їх не вказати, то буде створена копія масиву.

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 до кінця масиву.

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 не зазначено - в новий масив будуть скопійовані така кількість останніх елементів вихідного масиву.

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() використовують для зміни вмісту масиву шляхом видалення, додавання або заміни елементів. Він може видаляти елементи, вставляти нові елементи або одночасно видаляти та додавати їх навіть всередині масиву.

array.splice(start_index, 
             number_of_items_to_delete, 
             element1, element2, ...);

start_index: Індекс, з якого треба почати зміни у масиві.

number_of_items_to_delete (необов'язковий): Кількість елементів, які потрібно видалити з масиву починаючи з start_index.

element1, element2, ... (необов'язковий): Елементи, які потрібно додати до масиву починаючи з start_index.

Видалення

Щоб видалити елементи в масиві, передаються два аргументи.

array.splice(start_index, number_of_items_to_delete);

start_index - індекс першого елемента для видалення

number_of_items_to_delete - кількість елементів, для видалення

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);

Цей метод змінює вихідний масив. А результат його відпрацювання - масив видалених елементів. На практиці масив видалених елементів використовують рідко. Переважно, необхідно просто видалити елементи з масиву. Тому можна не присвоювати його жодній змінній.

myArray.splice(1, 2); 

Додавання

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

array.splice(position, 0, element1, element2, ...);

position - початкова позиція в масиві, куди будуть вставлені нові елементи.

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

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

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); // Видеде: порожній масив []

Цей метод змінює вихідний масив. А результат його відпрацювання - порожній масив (бо ніяких елементів не видалено). На практиці цей метод використовують без присвоєння його жодній змінній.

myArray.splice(1, 0, "X", "Y");

Заміна

Заміна поєднує в собі видалення одного або більше елементів і одночасне додавання одного або більше елементів.

Для заміни необхідно передати щонайменше три аргументи. Кількість елементів, які видаляються і додаються, може не збігатися.

array.splice(position, 
             number_of_items_to_delete, 
             element1, element2, ...);

position - індекс першого елемента для видалення

number_of_items_to_delete - кількість елементів, що видаляються

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

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);

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

myArray.splice(1, 2, "X", "Y", "Z");

Метод concat() - недеструктивний

Метод concat() використовують для об'єднання двох чи більше масивів у новий масив. Він не змінює вихідні масиви, а повертає новий масив, який складається з об'єднаних елементів.

array.concat(element1, element2, ..., elementN);

Метод concat() приймає один або більше аргументів - масивів або значень, які треба об'єднати.

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()