Про концепцію Масиви
У JavaScript масив - це структура, схожа на список, без фіксованої довжини, яка може містити будь-який тип примітивів або обʼєктів, навіть змішані типи.
Він має властивість length, а також безліч корисних методів для перебору та зміни масиву.
Щоб створити масив, додамо елементи між квадратними дужками [].
Щоб прочитати з масиву, поставимо індекс у квадратні дужки [] після назви масиву. Індекси масиву починаються з нуля.
Наприклад:
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names[1];
// => Laura
Масиви можна також створювати за допомогою синтаксису конструктора, але для більшості випадків радимо синтаксис літерала масиву.
const names = new Array();
names.push('Jack', 'Laura', 'Paul', 'Megan');
names[1];
// => Laura
Масиви не можуть використовувати strings як індекси елементів, а мусять використовувати цілі числа (number).
Встановлення або читання значення через нецілі індекси за допомогою дужкової нотації (або крапкової нотації) не встановлює й не повертає елемент із самого списку масиву, а встановлює або читає змінну, повʼязану з колекцією властивостей обʼєкта цього масиву.
Властивості обʼєкта масиву та список елементів масиву відокремлені одне від одного, і операції перебору та зміни масиву не можна застосувати до цих іменованих властивостей.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length;
// => 4
// Properties can be set on arrays using bracket ['property'] or
// dot .property notation, and this will affect the length, as
// shown below.
names.magician = 'Elyse';
names.length;
// => 4
// The property shows up when logging the array, making it seem
// that the property is somehow incorporated in the array.
names;
// => ["Jack", "Laura", "Paul", "Megan", magician: "Elyse"]
// However, be aware. Properties added via non-numeric keys are
// NOT part of the array's internal list, and are not traversed
// or mutated when using one of the traversal or mutation
// operations.
names.forEach((name) => console.log(name));
// => Jack
// => Laura
// => Paul
// => Megan
Видалення елементів з масиву
Масиви в JavaScript - це звичайні objects, і елементи можна видаляти за допомогою ключового слова delete.
Однак це не змінює довжину масиву й залишає дірку зі значенням empty.
В інших мовах це схоже на розріджений масив.
Дірки empty пропускаються під час операцій перебору чи зміни.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
delete names[1];
names;
// => ["Jack", empty, "Paul", "Megan"]
names.length;
// => 4
names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan
Якщо дірок бути не повинно і якщо length має відображати кількість елементів, які буде перебрано чи змінено, натомість скористаймося splice.
Метод splice() змінює вміст масиву, видаляючи або замінюючи наявні елементи та/або додаючи нові елементи на їхнє місце.
Наприклад:
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(1, 1);
names;
// => ["Jack", "Paul", "Megan"]
names.length;
// => 3
names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan
Довжину масиву можна змінювати
Властивість length масиву повʼязана зі списком елементів, які масив містить.
Її можна змінювати.
Коли довжину збільшують, створюються дірки empty, які не враховуються під час перебору чи зміни масиву.
Коли довжину зменшують, елементи в кінці масиву видаляються.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length = 6;
names;
// => ["Jack", "Laura", "Paul", "Megan", empty × 2]
names.length = 2;
// => ["Jack", "Laura"]
Перевірка, чи щось є масивом
Оскільки масиви - це objects, typeof names дає "object".
Щоб перевірити, чи щось є масивом, скористаймося Array.isArray:
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
typeof names;
// => "object"
Array.isArray(names);
// => true
const object = {};
Array.isArray(object);
// => false
Може виникнути спокуса використати names instanceof Array, і це може спрацювати, але не за всіх обставин.
Більше інформації можна знайти в цій статті.
Методи масиву
Деякі з методів, доступних у кожному обʼєкті Array, можна використати, щоб додати щось у масив або видалити з нього.
Ось кілька з них:
push
Метод push() додає один або кілька елементів у кінець масиву й повертає нову довжину масиву.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.push('Jill'); // => 5
names;
// => ['Jack', 'Laura', 'Paul', 'Megan', 'Jill']
pop
Метод pop() видаляє останній елемент із масиву й повертає цей елемент.
Цей метод змінює довжину масиву.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.pop(); // => 'Megan'
names;
// => ['Jack', 'Laura', 'Paul']
shift
Метод shift() видаляє перший елемент із масиву й повертає цей видалений елемент.
Цей метод змінює довжину масиву.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.shift(); // => 'Jack'
names;
// => ['Laura', 'Paul', 'Megan']
unshift
Метод unshift() додає один або кілька елементів на початок масиву й повертає нову довжину масиву.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.unshift('Jill'); // => 5
names;
// => ['Jill', 'Jack', 'Laura', 'Paul', 'Megan']
splice
Метод splice() змінює вміст масиву, видаляючи або замінюючи наявні елементи та/або додаючи нові елементи на їхнє місце.
Цей метод повертає масив, що містить видалені елементи.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(2, 1, 'Jill'); // => ['Paul']
names;
// => ['Jack', 'Laura', 'Jill', 'Megan']
49 вправ
Вивчити концепцію Масиви