Масиви js: кілька способів їх створення та ініціалізації

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

Перелічимо основні можливості та застосування масивів:

Зберігання даних.
Ітерація.
Маніпуляція даними (додавання, видалення, зміна, сортування та фільтрація).
Передача даних (можуть передаватися у функції як аргументи, що спрощує організацію коду і передачу даних).

Використання масивів у JavaScript є фундаментальним аспектом розробки веб-додатків. Тому їхні особливості детально вивчають на курсі JavaScript Start від компанії FoxmindED.

Ініціалізація масивів

У JavaScript є кілька способів створення та ініціалізації масивів:

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

let numbers = [1, 2, 3, 4, 5];

let fruits = ['apple', 'banana', 'orange'];

Конструктор Array надає альтернативний спосіб створення масивів за допомогою ключового слова new.

let numbers = new Array(1, 2, 3, 4, 5);

let fruits = new Array('apple', 'banana', 'orange');

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

let emptyArray = new Array(5); // Creates an empty array of length 5

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

// Initializing with initial values using an array literal

let numbers = [1, 2, 3, 4, 5];

let fruits = ['apple', 'banana', 'orange'];

// Initialization with initial values using the Array constructor

let numbers = new Array(1, 2, 3, 4, 5);

let fruits = new Array('apple', 'banana', 'orange');

Асоціативні масиви та об’єкти

У контексті JS термін “асоціативний масив” зазвичай використовується замість поняття “об’єкт”. Об’єкти в JS – це структури даних, які містять пари ключ-значення. По суті, вони являють собою асоціативні масиви, де ключі є рядками (або символами), а значення можуть бути будь-якого типу даних, включно з іншими об’єктами, функціями, масивами та примітивними значеннями.

Наш курс для початківців JavaScript з нуля допоможе вам прискорити процес підготовки до основних курсів Front End Developer або Node.js Developer.

Деталі курсу

Ключі та значення: кожен елемент об’єкта являє собою пару ключ-значення, де ключ є ідентифікатором, за яким можна отримати доступ до значення. Наприклад, в об’єкті {name: ‘John’, age: 30} ключами є name і age, а їхніми значеннями відповідно ‘John’ і 30.
Невпорядкованість: об’єкти не гарантують порядок своїх ключів. Це означає, що порядок, у якому їх було визначено, може не збігатися з порядком, у якому вони будуть перелічені під час ітерації.
Динамічна природа: на відміну від масивів, об’єкти можуть динамічно додавати і видаляти свої ключі та значення під час виконання програми.

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

// Creating an object using an object literal

let person = {

    name: 'John',

    age: 30,

    city: 'New York'

};

// Accessing values by keys

console.log(person.name); // Will display 'John'

console.log(person.age); // Will display 30

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

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

Це дає змогу організувати дані у вигляді складніших структур, що складаються з вкладених рівнів.

На відміну від одновимірних масивів, які містять лише один ряд елементів, багатовимірні можуть містити кілька рядів елементів. І кожен із них сам є масивом.

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

// Creating a two-dimensional array (matrix)

let matrix = [

    [1, 2, 3],

    [4, 5, 6],

    [7, 8, 9]

];

// Accessing elements of a two-dimensional array

console.log(matrix[0][0]); // Will display 1

console.log(matrix[1][2]); // Will display 6

Багатовимірні масиви широко застосовуються в програмуванні для роботи з даними різних структур і типів.

Методи роботи

Розглянемо основні методи та їх застосування:

Методи для додавання елементів:

push(): додає один або кілька елементів у кінець масиву і повертає нову його довжину.

let fruits = ['apple', 'banana'];

fruits.push('orange', 'grape');

console.log(fruits); // ['apple', 'banana', 'orange', 'grape']

unshift(): додає один або кілька елементів на початок масиву і повертає нову його довжину.

let fruits = ['apple', 'banana'];

fruits.unshift('orange', 'grape');

console.log(fruits); // ['orange', 'grape', 'apple', 'banana']

Методи для видалення елементів:

pop(): видаляє останній елемент із масиву і повертає його значення.

let fruits = ['apple', 'banana', 'orange'];

let removedFruit = fruits.pop();

console.log(removedFruit); // 'orange'

console.log(fruits); // ['apple', 'banana']

shift(): видаляє перший елемент із масиву і повертає його значення.

let fruits = ['apple', 'banana', 'orange'];

let removedFruit = fruits.shift();

console.log(removedFruit); // 'apple'

console.log(fruits); // ['banana', 'orange']

Методи для зміни масиву:

splice(): видаляє або замінює наявні елементи масиву, а також додає нові.

let fruits = ['apple', 'banana', 'orange'];

fruits.splice(1, 1, 'grape', 'kiwi');

console.log(fruits); // ['apple', 'grape', 'kiwi', 'orange']

Інші корисні методи:

slice(): повертає обрану ділянку масиву у вигляді нової, не змінюючи вихідної.

let fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];

let citrus = fruits.slice(2, 4);

console.log(citrus); // ['orange', 'grape']

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

Вкладені запити та операції

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

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

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

let data = [

{name: ‘John’, age: 30, hobbies: [‘reading’, ‘running’]},

{name: ‘Alice’, age: 25, hobbies: [‘painting’, ‘swimming’]},

{name: ‘Bob’, age: 35, hobbies: [‘running’, ‘cooking’]}

];

// Filtering people who have a hobby “running”

let runners = data.filter(person => person.hobbies.includes(‘running’));

console.log(runners);

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

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

let numbers = [3, 1, 4, 2, 5];

let sortedNumbers = numbers.reduce((accumulator, currentValue) => {

    // Insert the current value into the sorted array

    let index = 0;

    while (index < accumulator.length && currentValue > accumulator[index]) {

        index++;

    }

    accumulator.splice(index, 0, currentValue);

    return accumulator;

}, []);

console.log(sortedNumbers); // Виведе: [1, 2, 3, 4, 5]

Перетворення — змінює кожен елемент масиву на основі певної функції.

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

let numbers = [3, 1, 4, 2, 5];

let sortedNumbers = numbers.reduce((acc, val) => acc.concat(val), []).sort((a, b) => a - b);

console.log(sortedNumbers); // Виведе: [1, 2, 3, 4, 5]

Оптимізація запитів

Розглянемо популярні підходи до оптимізації, які можуть допомогти поліпшити продуктивність під час роботи з масивами в JavaScript:

Попереднє опрацювання даних

Під час маніпуляцій з масивами часто буває корисно створювати нові масиви замість зміни наявних. Це дає змогу уникнути побічних ефектів і робить код більш передбачуваним.
Використовуйте методи масивів, такі як map, filter, reduce замість звичайних циклів for, оскільки вони можуть бути оптимізовані для кращої продуктивності.
Намагайтеся використовувати алгоритми з найменшою складністю часу виконання (наприклад, лінійну складність) для обробки масивів, щоб уникнути зайвих витрат ресурсів.

Підпишіться на наш Ютуб-канал! Корисні відео для програмістів чекають на вас! YouTube

Оберіть свій курс програмування! Шлях до кар’єри програміста починається тут! Подивитись

Використання кешування

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

Приклад:

Припустимо, що у нас є масив чисел, і ми хочемо знайти суму всіх чисел, які більші за 10.

let numbers = [5, 12, 8, 20, 7, 15];

// Bad way (not optimized)

let sum = 0;

for (let i = 0; i < numbers.length; i++) {

    if (numbers[i] > 10) {

        sum += numbers[i];

    }

}

// Good way (optimized)

let filteredNumbers = numbers.filter(num => num > 10);

let sum = filteredNumbers.reduce((acc, num) => acc + num, 0);

У цьому прикладі використання методів масиву filter і reduce дає змогу уникнути зайвих ітерацій і зробити код більш читабельним і продуктивним.

Різниця масивів

Різниця масивів — це набір елементів, які присутні тільки в одному з двох масивів. Існує кілька способів це обчислити:

1. За допомогою циклів:

function difference(arr1, arr2) {

  const result = [];

  for (let i = 0; i < arr1.length; i++) {

    if (!arr2.includes(arr1[i])) {

      result.push(arr1[i]);

    }

  }

  return result;

}

const fruits1 = ["apple", "banana", "orange"];

const fruits2 = ["banana", "pear", "kiwi"];

const differenceFruits1 = difference(fruits1, fruits2); // ["apple", "orange"]

2. За допомогою методів filter і includes:

function difference(arr1, arr2) {

  return arr1.filter(el => !arr2.includes(el));

}

const differenceFruits2 = difference(fruits1, fruits2); // ["apple", "orange"]

3. За допомогою поліфілу Set:

function difference(arr1, arr2) {

  const set2 = new Set(arr2);

  return arr1.filter(el => !set2.has(el));

}

const differenceFruits3 = difference(fruits1, fruits2); // ["apple", "orange"]

//

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

Використання масивів із ключами

Масиви з ключами представляють структуру даних, де доступ до елементів здійснюється не за числовими індексами, а за унікальними строковими або символьними ключами. Це дає змогу створювати зручні структури даних для доступу та керування елементами. Наприклад:

Використання об’єкта:

let data = {

    'name': 'John',

    'age': 30,

    'city': 'New York'

};

console.log(data['name']); // 'John'

console.log(data['age']); // 30

Використання Map:

let data = new Map();

data.set('name', 'John');

data.set('age', 30);

data.set('city', 'New York');

console.log(data.get('name')); // 'John'

console.log(data.get('age')); // 30

Це дає змогу створювати структури даних зі зручним доступом до елементів за ключами.

Висновок

Як бачимо, масиви відіграють важливу роль у розробці веб-додатків на JavaScript. Вони надають гнучку та потужну структуру даних для зберігання, обробки та керування колекціями елементів. Для ефективнішої роботи з масивами важливо продовжувати вивчати і практикувати методи їх використання.

Про масиви в JavaScript