НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

JS Підручник

JS Старт JS Інтро JS Установка JS Виведення JS Інструкції JS Синтаксис JS Коментарі JS Змінні JS Ключове слово Let JS Ключове слово Const JS Оператори JS Арифметичні JS Присвоєння JS Типи даних JS Функції JS Об’єкти JS Події JS Рядки JS Рядкові методи JS Рядковий пошук JS Рядкові шаблони JS Числа JS Числові методи JS Масиви JS Методи масиву JS Сортування масиву JS Ітерація масиву JS Масив Const JS Дати JS Формати дат JS Методи отримання дат JS Методи встановлення дат JS Математичні JS Рандомні JS Булеві JS Порівняння JS Умови JS Switch JS Цикл For JS Цикл For In JS Цикл For Of JS Цикл While JS Break & Continue JS Ітерації JS Сети (Набори) JS Мапи JS Typeof JS Перетворення типів JS Побітові JS Регулярні вирази JS Помилки JS Область дії JS Хостинг JS Use Strict JS Ключове слово this JS Функція стрілки JS Класи JS Модулі JS JSON JS Відладка JS Гід по стилю JS Кращі практики JS Поширені помилки JS Продуктивність JS Зарезервовані слова

JS Версії

JS Версії JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/Edge JS Історія

JS Об’єкти

Визначення об’єктів Властивості об’єкта Методи об’єкта Відображення об’єкта Доступ до об’єктів Конструктори об’єктів Прототипи об’єктів Ітеровані об’єкти Сети (Набори) об’єктів Мапи (Карти) об’єктів Довідник об’єктів

JS Функції

Визначення функції Параметри функції Виклик функції Функція call() Функція apply() Функція bind() Закриття функції

JS Класи

Класи. Інтро Успадкування класу Статичні методи

JS Асинхроний

Зворотні виклики Асинхроний Проміси Async/Await

JS HTML DOM

DOM Вступ DOM Методи DOM Документ DOM Елементи DOM HTML DOM Форми DOM CSS DOM Анімація DOM Події DOM Слухач подій DOM Навігація DOM Вузли DOM HTMLCollection DOM NodeList

JS Браузер BOM

JS Вікно JS Скрін JS Локація JS Історія JS Навігатор JS Виринаюче сповіщення JS Таймінг JS Куки

JS Веб API

Веб API Вступ Веб-форми API Веб-історія API Веб-сховище API Веб-воркер API Веб-виборка API Веб-геолокація API

JS AJAX

AJAX Вступ AJAX XMLHttp AJAX Запит AJAX Відповідь сервера AJAX XML Файл AJAX PHP AJAX ASP AJAX База даних AJAX Додатки AJAX Приклади

JS JSON

JSON Вступ JSON Синтаксис JSON та XML JSON Типи даних JSON Аналіз JSON Stringify JSON Об’єкти JSON Масиви JSON Сервер JSON PHP JSON HTML JSON JSONP

JS та jQuery

jQuery Селектори jQuery HTML jQuery CSS jQuery DOM

JS Графіка

JS Графіка JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

JS Приклади

JS Приклади JS HTML DOM JS HTML Input JS HTML Об’єкти JS HTML Події JS Браузер JS Редактор JS Вправи JS Вікторина JS Сертифікат

JS Довідники

JavaScript Об’єкти HTML DOM Об’єкти

JavaScript. Уроки W3Schools для початківців українською мовою

En

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


Перетворення (конвертація) масивів в рядки

JavaScript метод toString() конвертує масив в рядок (розділених комами) значень масиву.

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Результат:

Banana,Orange,Apple,Mango
Спробуйте самі »

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

Він поводить себе так само, як toString(), але, крім того, ви можете вказати роздільник:

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

Результат:

Banana * Orange * Apple * Mango
Спробуйте самі »

Popping та Pushing

Коли ви працюєте з масивами, легко видаляти елементи та додавати нові елементи.

Ось що таке popping (витягування) та pushing (виштовхування):

Витягування (popping) елементів із масиву, або виштовхування (pushing) елементів в масив.


JavaScript Array pop()

Метод pop() видаляє останній елемент із масиву:

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
Спробуйте самі »

Метод pop() повертає значення, яке було "витягнуто":

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();
Спробуйте самі »

JavaScript Array push()

Метод push() додає новий елемент в масив (в кінці):

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
Спробуйте самі »

Метод push() повертає нову довжину масиву:

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");
Спробуйте самі »

Здвиг (шифтинг) елементів

Здвиг (шифтинг) еквівалентний popping (виштовхуванню), працюючи з першим елементом замість останнього.


JavaScript Array shift()

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

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
Спробуйте самі »

Метод shift() повертає значення, яке було "здвинуто":

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();
Спробуйте самі »

JavaScript Array unshift()

Метод unshift() додає новий елемент в масив (на початку) та "відміняє здвиг" старих елементів:

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
Спробуйте самі »

Метод unshift() повертає нову довжину масиву.

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
Спробуйте самі »

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

Доступ до елементів масиву здійснюється за їхніми числовими індексами (порядковими номерами):

Індекси масиву починаються з 0:

[0] - це перший елемент масиву
[1] - це другий елемент масиву
[2] - це третій елемент масиву і т.д.

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";
Спробуйте самі »

JavaScript Array length

Властивість length надає простий спосіб додати новий елемент в масив:

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";
Спробуйте самі »

JavaScript Array delete()

УВАГА!

Елементи масиву можуть бути видалені з використанням JavaScript оператору delete.

Використання delete залишає undefined прогалини в масиві.

Використовуйте pop() або shift() замість цього.

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];
Спробуйте самі »

Злиття (конкатенація) масивів

Метод concat() створює новий масив шляхом злиття (конкатенації, об’єднання) існуючих масивів:

Приклад (злиття двох масивів)

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];

const myChildren = myGirls.concat(myBoys);
Спробуйте самі »

Метод concat() не змінює існуючи масиви. Він завжди повертає новий масив.

Метод concat() може приймати будь-яку кількість аргументів масиву:

Приклад (злиття трьох масивів)

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);
Спробуйте самі »

Метод concat() також може приймати рядки як аргументи:

Приклад (злиття масиву зі значеннями)

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter"); 
Спробуйте самі »

Складання та вирізання масивів

Метод splice() додає нові елементи в масив.

Метод slice() вирізає частину масиву.


JavaScript Array splice()

Метод splice() може використовуватись для додавання нових елементів в масив:

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
Спробуйте самі »

Перший параметр (2) визначає позицію, куди мають бути додані (вставлені) нові елементи.

Другий параметр (0) визначає, скільки елементів мають бути видалені.

Інші параметри ("Lemon" , "Kiwi") визначають нові елементи, що будуть додані.

Метод splice() повертає масив із видаленими елементами:

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");
Спробуйте самі »

Використання splice() для видалення елементів

Завдяки розумному налаштуванню параметрів, ви можете використовувати splice() для видалення елементів без залишених "прогалин" в масиві:

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);
Спробуйте самі »

Перший параметр (0) визначає позицію, куди мають бути додані (вставлені) нові елементи.

Другий параметр (1) визначає, скільки елементів мають бути видалені.

Інші параметри опущені. Нові елементи додаватись не будуть.


JavaScript Array slice()

Метод slice() нарізає частину масиву в новий масив.

В цьому прикладі вирізується частина масиву, починаючи з елемента 1 масиву ("Orange"):

Приклад

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
Спробуйте самі »

Примітка

Метод slice() створює новий масив.

Метод slice() не видаляє які-небудь елементи із початкового масиву.

В цьому прикладі вирізується частина масиву, починаючи з елементу 3 масиву ("Apple"):

Приклад

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
Спробуйте самі »

Метод slice() може приймати два аргументи, наприклад slice(1, 3).

Потім метод обирає елементи із початкового аргумента і до кінцевого аргумента (але не включаючи його).

Приклад

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);
Спробуйте самі »

Якщо кінцевий аргумент опущений, як в перших прикладах, метод slice() вирізує іншу частину масиву.

Приклад

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
Спробуйте самі »

Автоматичний toString()

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

Це завжди так, коли ви намагаєтесь вивести масив.

Ці два приклади дадуть однаковий результат:

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Спробуйте самі »

Приклад

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
Спробуйте самі »

Примітка

Всі JavaScript об’єкти мають метод toString().


Пошук максимального та мінімального значень в масиві

Немає вбудованих функцій для пошуку найбільшого і найменшого значень в JavaScript масиві.

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


Сортування масивів

Сортування масивів розглядаються в наступному розділі цього підручника.

Повний довідник масиву

Для більш детального ознайомлення з масивами відвідайте:

Повний довідник JavaScript масиву на нашому сайті W3Schools українською.

Довідник містить описи та приклади всіх властивостей та методів масиву.

Перевірте себе за допомогою вправ

Вправа:

Використовуйте правильний метод масиву для видалення останнього елемента із масиву fruits.

const fruits = ["Banana", "Orange", "Apple"];
;