JS об'єкт Array


Масиви дозволяють зберігати великий обсяг інформації одному місці. У JavaScript можна знайти кілька основних типів масивів.

автор: NagarD

Одновимірний масив

Одновимірний масив складається з кількох елементів, об'єднаних під одним ім'ям. Щоб створити масив, необхідно створити змінну і присвоїти їй значення new Array(). Усередині ви можете через кому записувати різні значення, які і будуть елементами масиву.

У масивах відлік починається з 0, тому перший елемент індексу дорівнюватиме 0, другий - 1 і так далі.

Приклади створення масиву:

let array = new Array(); // Створюємо порожній масив
some[0] = 'Перший'; // Додаємо перший елемент з індексом 0
some[1] = 2; // Додаємо другий елемент з індексом 1
some[2] = 'Третій'; // Додаємо третій елемент з індексом 2
some[] = 'Четвертий'; // Додаємо четвертий елемент без індексу

console.log(some[0]); // Виведе 'Перший', це наш перший елемент масиву
console.log(some[3]); // Хоч ми не вказували такого індексу, втім js автоматично присвоїв останньму елементу індекс 3. Цей запис виведе значення 'Четвертий'


let array = new Array('Перший', 2, 'Третій', 'Четвертий'); // Ідентичний масив, але наповнений значеннями відразу при створенні

Працювати з елементами масиву можна як зі змінними. Ми можемо їх виводити або встановлювати для них нові значення.

Для масивів існує кілька додаткових методів та властивостей. Приклад використання властивості length, який дозволяє отримати довжину всього масиву.

Приклад використання властивості:

let elements = new Array(29, 7, 0, true, "Коняка");

console.log(elements.length); // Виведе число 5, адже в масиві 5 елементів

Спочатку масиви можуть здатися непотрібними, але насправді це не так. І з часом ви зрозумієте всю важливість масивів.

Багатовимірний масив

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

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

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

let x = new Array(new Array(0, 34, 2), new Array(3, 4, 5));
console.log(x[0][1]); // Виведе 34

// Або оголосити порожній масив і присвоїти значення потім ()
let symbols = [[],[]];
symbols[0][1] = 34;

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

x[0][1] = 1;

Нотатка

На високому рівні масиви - це просто спископодібні об'єкти.

автор: NagarD

Синтаксис

let arrayName = new Array();

//або

let arrayName = [];

методи

Метод Опис
copyWithin Копіює елементи масиву всередині масиву згідно з заданими позиціями
entries Повертає Array Iteration Object поточного масиву у вигляді пари ключ/значення
every Перевіряє, чи кожен елемент масиву задовільняє заданим вимогам
fill Заповнює елементи в масиві певним статичним значенням
filter Створює новий масив, але тільки з тих елементів, котрі пройшли перевірку
find Повертає значення першого знайденого елемента масиву, котрий пройшов перевірку
findIndex Повертає індекс першого знайденого елемента масиву, котрий пройшов перевірку
forEach Виконує функцію для кожного елемента масиву
includes Перевірте, чи містить масив вказаний елемент
isArray Перевіряє, чи є вказаний об’єкт масивом
join Об’єднує всі елементи масиву в рядок
keys Повертає Array Iteration Object, що містить ключі вихідного масиву
lastIndexOf Шукає, починаючи з кінця масиву, вказане значення в масиві та повертає його позицію
map Створює новий масив із результатом виклику функції для кожного елемента масиву
pop Вилучає останній елемент з масиву та повертає його значення
push Додає нові елементи в кінець масиву і повертає довжину утвореного масиву
reduce Зменшує значення масиву до одного значення (зліва направо)
reduceRight Зменшує значення масиву до одного значення (справо наліво)
reverse Змінює порядок елементів у масиві на протилежний
shift Видаляє нові елементи з початку масиву і повертає довжину утвореного масиву
slice Додає/Вилучає елементи з масиву
some Перевіряє, чи пройшов перевірку хоча б один елемент у масиві
sort Сортує елементи масиву
toString Перетворює масив на рядок
unshift Додає нові елементи на початок масиву і повертає довжину утвореного масиву
valueOf Просто повертає масив
flat Формує з багатовимірного масиву, масив з меншою кількістю вимірів
flatMap Виконує вказану функцію над кожним елементом масиву який вилазить за дозволену кількість вимірів
at Повертає елемент масиву за вказаним індексом
createAttribute Створює новий атрибут для елемента DOM.
concat Долучає до масиву ряд масивів або значень Об'єднує два чи більше масивів у один
from Створює масив з масивоподібного об’єкта
indexOf Шукає, починаючи з початку масиву, вказане значення в масиві та повертає його позицію
splice Видаляє елементи з масиву і при необхідності вставляє на їх місце нові елементи, повертаючи вилучені елементи.

властивості

Властивість Опис
constructor Повертає функцію, яка створила прототип об’єкта Array
length Встановлює або повертає кількість елементів у масиві
prototype Прототип конструктора поточного об'єкту
embeds Повертає колекцію всіх елементів <embed> у документі.
loadedmetadata Викликається, коли метадані медіафайлу (тривалість, розміри, тощо) завантажені.
submit Спрацьовує, коли користувач надсилає форму на сервер.
deltaY Визначає величину вертикального прокручування, здійсненого колесом миші.

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 1 4 12 4
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
1 18 4 1
Підтримка: серверні переглядачі
Переглядач Node.js Deno
0.10.0 1.0

Приклади

+ запропонувати свій приклад у пісочниці

Наочний приклад використання масивів.

const cars = ["Saab", "Volvo", "BMW"];

alert(cars[0]);
автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід