Масив у JavaScript — це структура даних, яка використовується для зберігання кількох значень в одній змінній. Він може зберігати різні типи даних і дозволяє динамічно змінювати розмір. Доступ до елементів здійснюється за їх індексом, починаючи з 0.

Масив JavaScript

У вас є два способи створення масивів JavaScript: за допомогою конструктора Array або скорочений синтаксис літералів масиву , що є просто квадратними дужками. Масиви є гнучкими за розміром, тому вони можуть збільшуватися або зменшуватися, коли ви додаєте або видаляєте елементи.

Зміст

• Що таке масив у JavaScript?
• Основні термінології масиву JavaScript
• Оголошення масиву
• Основні операції над масивами JavaScript
• Різниця між масивами та об’єктами JavaScript
• Коли використовувати масиви та об’єкти JavaScript?
• Розпізнавання масиву JavaScript
• Повний довідник щодо масиву JavaScript
• Приклади масивів JavaScript
• JavaScript CheatSheet

Основні термінології масиву JavaScript

• Масив: Структура даних у JavaScript, яка дозволяє зберігати кілька значень в одній змінній.
• Елемент масиву: Кожне значення в масиві називається елементом. Доступ до елементів здійснюється за їх індексом.
• Індекс масиву: Числове представлення, що вказує позицію елемента в масиві. Масиви JavaScript мають нульовий індекс, тобто перший елемент має індекс 0.
• Довжина масиву: Кількість елементів у масиві. Його можна отримати за допомогою властивості length.

Оголошення масиву

В основному є два способи оголошення масиву, тобто літерали масиву та конструктор масиву.

1. Створення масиву за допомогою літералу масиву

Створення масиву за допомогою літералу масиву передбачає використання квадратних дужок [] для визначення та ініціалізації масиву. Цей метод є лаконічним і популярним через його простоту.

Синтаксис:

let arrayName = [value1, value2, ...];>

приклад:

// Creating an Empty Array let names = []; console.log(names); // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses);>

[] [ 'HTML', 'CSS', 'Javascript', 'React' ]>

2. Створення масиву за допомогою конструктора масиву (нове ключове слово JavaScript)

Конструктор масиву відноситься до методу створення масивів шляхом виклику функції конструктора масиву. Цей підхід дозволяє динамічну ініціалізацію та може використовуватися для створення масивів із заданою довжиною або елементами.

Синтаксис:

let arrayName = new Array();>

приклад:

arraylist відсортований

// Declaration of an empty array  // using Array constructor let names = new Array(); console.log(names); // Creating and Initializing an array with values let courses = new Array('HTML', 'CSS', 'Javascript', 'React'); console.log(courses); // Initializing Array while declaring let arr = new Array(3); arr[0] = 10; arr[1] = 20; arr[2] = 30; console.log(arr);>

[] [ 'HTML', 'CSS', 'Javascript', 'React' ] [ 10, 20, 30 ]>

Примітка: Обидва вищевказані методи роблять однаково. Використовуйте метод літералів масиву для ефективності, читабельності та швидкості.

Основні операції над масивами JavaScript

1. Доступ до елементів масиву

До будь-якого елемента масиву можна отримати доступ за допомогою номера індексу. Індекс у масивах починається з 0.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Accessing Array Elements console.log(courses[0]); console.log(courses[1]); console.log(courses[2]); console.log(courses[3]);>

HTML CSS Javascript React>

2. Доступ до першого елемента масиву

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

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing First Array Elements let firstItem = courses[0]; console.log('First Item: ', firstItem);>

First Item: HTML>

3. Доступ до останнього елемента масиву

Ми можемо отримати доступ до останнього елемента масиву, використовуючи номер індексу [array.length – 1].

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing Last Array Elements let lastItem = courses[courses.length - 1]; console.log('First Item: ', lastItem);>

First Item: React>

4. Зміна елементів масиву

Елементи в масиві можна змінити, присвоївши нове значення їхньому відповідному індексу.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses); courses[1]= 'Bootstrap'; console.log(courses);>

[ 'HTML', 'CSS', 'Javascript', 'React' ] [ 'HTML', 'Bootstrap', 'Javascript', 'React' ]>

5. Додавання елементів до масиву

Елементи можна додавати до масиву за допомогою таких методів, як push() і unshift().

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Add Element to the end of Array courses.push('Node.js'); // Add Element to the beginning courses.unshift('Web Development'); console.log(courses);>

[ 'Web Development', 'HTML', 'CSS', 'Javascript', 'React', 'Node.js' ]>

6. Видалення елементів з масиву

Видаляйте елементи за допомогою таких методів, як pop(), shift() або splice().

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; console.log('Original Array: ' + courses); // Removes and returns the last element let lastElement = courses.pop(); console.log('After Removed the last elements: ' + courses); // Removes and returns the first element let firstElement = courses.shift(); console.log('After Removed the First elements: ' + courses); // Removes 2 elements starting from index 1 courses.splice(1, 2); console.log('After Removed 2 elements starting from index 1: ' + courses);>

Вихід

Original Array: HTML,CSS,Javascript,React,Node.js After Removed the last elements: HTML,CSS,Javascript,React After Removed the First elements: CSS,Javascript,React After Removed 2 elements starting from index 1: CSS>

7. Довжина масиву

Отримайте довжину масиву за допомогою властивості length.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; let len = courses.length; console.log('Array Length: ' + len);>

Array Length: 5>

8. Збільште та зменшіть довжину масиву

Ми можемо збільшувати та зменшувати довжину масиву за допомогою властивості JavaScript length.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; // Increase the array length to 7 courses.length = 7; console.log('Array After Increase the Length: ', courses); // Decrease the array length to 2 courses.length = 2; console.log('Array After Decrease the Length: ', courses)>

Array After Increase the Length: [ 'HTML', 'CSS', 'Javascript', 'React', 'Node.js', ] Array After Decrease the Length: [ 'HTML', 'CSS' ]>

9. Ітерація елементів масиву

Ми можемо повторювати масив і отримувати доступ до елементів масиву за допомогою циклу for і forEach.

приклад: Це приклад циклу for.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through for loop for (let i = 0; i < courses.length; i++) {  console.log(courses[i]) }>

HTML CSS JavaScript React>

приклад: Це приклад Array.forEach() петля.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through forEach loop courses.forEach(function myfunc(elements) {  console.log(elements); });>

HTML CSS JavaScript React>

10. Конкатенація масиву

Об’єднайте два або більше масивів за допомогою методу concat(). Ir повертає новий масив, що містить об’єднані елементи масивів.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; let otherCourses = ['Node.js', 'Expess.js']; // Concatenate both arrays let concateArray = courses.concat(otherCourses); console.log('Concatenated Array: ', concateArray);>

Concatenated Array: [ 'HTML', 'CSS', 'JavaScript', 'React', 'Node.js', 'Expess.js' ]>

11. Перетворення масиву в рядок

У нас є вбудований метод toString() to перетворює масив на рядок.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Convert array ot String console.log(courses.toString());>

HTML,CSS,JavaScript,React>

12. Перевірте тип масиву

JavaScript тип оператор використовується для перевірки типу масиву. Він повертає об’єкт для масивів.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Check type of array console.log(typeof courses);>

object>

Різниця між масивами та об’єктами JavaScript

• Масиви JavaScript використовують індекси як числа.
• об'єкти використовують індекси як імена..

Коли використовувати масиви та об’єкти JavaScript?

• Масиви використовуються, коли ми хочемо, щоб імена елементів були числовими.
• Об’єкти використовуються, коли ми хочемо, щоб імена елементів були рядками.

Розпізнавання масиву JavaScript

Є два методи, за допомогою яких ми можемо розпізнати масив JavaScript:

• З допомогою Array.isArray() метод
• З допомогою екземпляр метод

Нижче наведено приклад обох підходів:

const courses = ['HTML', 'CSS', 'Javascript']; console.log('Using Array.isArray() method: ', Array.isArray(courses)) console.log('Using instanceof method: ', courses instanceof Array)>

Using Array.isArray() method: true Using instanceof method: true>

Примітка: Поширена помилка виникає під час запису масивів:

const numbers = [5] // and const numbers = new Array(5)>

const numbers = [5] console.log(numbers)>

Наведені вище два твердження не збігаються.

Вихід: Цей оператор створює масив з елементом [5] .

[5]>

const numbers = new Array(5)  console.log(numbers)>

[ ]>

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

У нас є повний список Javascript Array, щоб перевірити його, перегляньте його Довідка про масив JavaScript стаття. Він містить детальний опис і приклади всіх властивостей і методів масиву.

Приклади масивів JavaScript

Приклади JavaScript Array містять перелік питань, які найчастіше ставлять під час співбесід. Перегляньте цю статтю Приклади масивів JavaScript для більш детальної інформації.

JavaScript CheatSheet

У нас є шпаргалка про Javascript, де ми охопили всі важливі теми Javascript, щоб перевірити їх, будь ласка, прочитайте Javascript Cheat Sheet - Основний посібник з JavaScript .