Уроки JavaScript — Массивы: основы использования и основные функции

Массивы не только в JavaScript являются фундаментальной структурой данных, но и практически во всех языках программирования. Они позволяют разработчикам сохранять и эффективно управлять несколькими значениями в одной переменной. Массивы — это универсальная вещь, с которой можно делать много разных манипуляций над разными данными.

 

Основное определение массивов в JS

Массив в JavaScript – это объект, который хранит несколько значений под общим названием, грубо говоря – под одной переменной. Эти значения могут быть разных типов данных, а каждый элемент в массиве имеет числовой индекс, начиная с 0 (для самого первого элемента).

 

Способы создания массивов в JS

Чтобы создать массив в JavaScript, вы можете воспользоваться несколькими способами:

1. Литеральной нотацией массива: вы определяете новый массив только с использованием пустых скобок ([]). Это самый распространенный и простой метод
2. Через конструктор массива: используете конструктор new Array()
3. Создание массива из массивообразного или итерированного объекта: используете метод Array.from()
4. Создание массива с переменным (произвольным) количеством аргументов: используете метод Array.of()

 

Примеры записей для создания массива:

let frukti = ["Апельсин", "Банан", "Яблоко"]; // литеральная нотация массива
let frukti = new Array("Апельсин", "Банан", "Яблоко"); // конструктор массива
const moyArr = Array.from("АБВГД"); // массив из строки; результат - А,Б,В,Г,Д
let frukti = Array.of("Апельсин", "Банан", "Яблоко"); // массив из произвольных аргументов; результат — Апельсин, Банан, Яблоко

 

Общие свойства массивов в JS

Длина массива — это важнейшее свойство массива. Получить его значение можно за счет свойства length. Оно определяет количество элементов в массиве:

let frukti = ["Апельсин", "Банан", "Яблоко"];
console.log(frukti.length); // 3

 

Динамический размер — массивы JavaScript имеют динамический размер, то есть они могут увеличиваться или уменьшаться во время выполнения. Это делает их особенно гибкими по сравнению с массивами в других языках программирования.

 

Доступ к элементам массива — осуществляется через их индекс в квадратных скобках:

let frukti = ["Апельсин", "Банан", "Яблоко"];
console.log(frukti[0]); // Апельсин
console.log(frukti[2]); // Яблоко

 

Основные методы по работе с массивами в JavaScript

В JavaScript доступны различные методы, позволяющие эффективно работать/обрабатывать массивы. К числу важнейших можно отнести следующие:

 

Методы push() и pop()

• push(): добавляет один или несколько элементов в конец массива
• pop(): удаляет последний элемент из массива и возвращает его

const chisla = [1, 2, 3];
chisla.push(4);
console.log(chisla); // [1, 2, 3, 4]
const posledneyeChislo = chisla.pop();
console.log(posledneyeChislo); // 4
console.log(chisla); // [1, 2, 3]

 

Методы unshift() и shift()

• unshift(): добавляет один или несколько элементов в начало массива
• shift(): удаляет первый элемент из массива и возвращает его

let frukti = ["Банан", "Яблоко"];
frukti.unshift("Апельсин");
console.log(frukti); // ["Апельсин", "Банан", "Яблоко"]
const perviyFrukt = frukti.shift();
console.log(perviyFrukt); // "Апельсин"
console.log(frukti); // ["Банан", "Яблоко"]

 

Метод splice()

Этот метод более универсален, чем предыдущие рассмотренные, и он может добавлять/удалять элементы в любой позиции массива.

let frukti = ["Апельсин", "Банан", "Яблоко"];
frukti.splice(1, 2, "Вишня", "Клубника"); // замена элементов с индексом 1 и 2
console.log(frukti); // ["Апельсин", "Вишня", "Клубника"]

 

Метод slice()

Данный метод создает новый объект массива из поверхностной копии части массива. Если указано 2 аргумента, то метод возвращает копию (без изменения начального массива) части массива от индекса первого элемента к индексу заключительного элемента (не включается в новый массив).

let frukti = ["Банан", "Апельсин", "Лимон", "Мандарин", "Вишня", "Яблоко"];
let citrus = frukti.slice(1, 4);
console.log(citrus); // ["Апельсин", "Лимон", "Мандарин"]

 

Расширенные методы по работе с массивами в JS

 

Метод map()

Метод map() создает новый массив с результатами после обработки указанной функцией каждого элемента исходного массива.

const chisla = [1, 2, 3, 4];
const squared = chisla.map(num => num * num);
console.log(squared); // [1, 4, 9, 16]

 

Метод filter()

Этот метод создает новый массив со всеми элементами, прошедшими указанной функцией проверку.

const chisla = [1, 2, 3, 4, 5, 6];
const evenNumbers = chisla.filter(num => num % 2 === 0); // только четные числа
console.log(evenNumbers); // [2, 4, 6]

 

Метод reduce()

Данный метод выполняет функцию для каждого элемента массива, чтобы вернуть единственное исходное значение (свести к одному результату).

const chisla = [1, 2, 3, 4];
const sum = chisla.reduce((acc, curr) => acc + curr, 0); // сумма всех элементов массива
console.log(sum); // 10

 

Метод forEach()

С помощью этого метода можно выполнить определенную функцию один раз для каждого элемента в массиве.

let frukti = ["Апельсин", "Банан", "Яблоко"];
frukti.forEach(frukti => console.log(frukti));
// Апельсин
// Банан
// Яблоко

 

Многомерные массивы в JavaScript

Язык программирования JavaScript также поддерживает многомерные массивы, которые можно представить в качестве массивов в массивах.

const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[1][1]); // 5

 

Методы для поиска в массиве JS: indexOf() и lastIndexOf()

Эти методы ищут элемент в массиве и возвращают его индекс.

let frukti = ["Апельсин", "Банан", "Мандарин", "Яблоко"];
console.log(frukti.indexOf("Мандарин")); // 2
console.log(frukti.lastIndexOf("Банан")); // 1

 

Методы для поиска в массиве JS: find() и findIndex()

Эти методы ищут элементы, удовлетворяющие определенному условию, переданному в callback функции.

const chisla = [1, 2, 3, 4, 5];
const found = chisla.find(num => num > 3);
console.log(found); // возвращает первое значение; результат - 4
const foundIndex = chisla.findIndex(num => num > 3);
console.log(foundIndex); // возвращает индекс первого значения; результат - 3

 

Методы JavaScript для сортировки в массиве

 

Метод sort() — сортирует элементы массива и возвращает отсортированный массив, в порядке кодовых точек Unicode (по умолчанию).

let frukti = ["Банан", "Апельсин", "Яблоко", "Мандарин"];
frukti.sort();
console.log(frukti); // ["Апельсин", "Банан", "Мандарин", "Яблоко"]

 

Метод reverse() – изменяет порядок элементов в массиве: первый элемент массива становится последним, а последний первым.

const chisla = [1, 2, 3, 4, 5];
chisla.reverse();
console.log(chisla); // [5, 4, 3, 2, 1]

 

Оператор распространения (spread syntax) и массивы в JS

Оператор распространения (...) является полезным дополнением к массивам JavaScript. Это позволяет «распаковать» массив на его отдельные элементы.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArr = [...arr1, ...arr2];
console.log(combinedArr); // [1, 2, 3, 4, 5, 6]

 

Деструктуризация массивов в JavaScript

Деструктуризация позволяет извлекать значения из массивов и назначать их переменным.

const [perviy, vtoroy, ...drugiye] = [1, 2, 3, 4, 5];
console.log(perviy); // 1
console.log(vtoroy); // 2
console.log(drugiye); // [3, 4, 5]

 

Массивообразные объекты в JS

В JavaScript также существуют массивообразные объекты, которые обладают некоторыми свойствами массивов, но не поддерживают все методы массива. Примером этого может служить объект arguments в функции.

function exampleFunction() {
  console.log(arguments.length);
  console.log(Array.from(arguments));
}
exampleFunction(1, 2, 3);
// 3
// [1, 2, 3]

 

Замечания по производительности при работе с массивами

Работая с большими массивами, разработчикам следует помнить о производительности. Такие методы, как forEach(), map(), filter() и reduce() при очень больших массивах могут вызвать проблемы с производительностью. В таких случаях лучше использовать традиционные циклы for или for ... of, которые будут более эффективными.

 

Лучшие практики при работе с массивами в JS

Работая с массивами в JavaScript, следуйте следующим лучшим практикам:

• Если вам не нужны особые функции конструктора массива, используйте литеральную нотацию массива (квадратные скобки []), чтобы создать массив
• Использование методов map(), filter() и reduce() позволяет организовать более четкую и лаконичную структуру кода (но избегайте их для очень больших массивов)
• Избегайте использования delete для удаления элементов из массива, поскольку это оставляет «дыры» в массиве. Вместо этого используйте такие методы, как splice() или filter()
• Если вам нужно проверить, есть ли значение массивом, вместо того чтобы полагаться на typeof, воспользуйтесь конструкцией метода Array.isArray()

 

 

Вместо вывода

Массивы относятся к фундаментальным основам любого языка программирования, и JavaScript и здесь не остается в стороне. Ведь с помощью массивов и широкого спектра возможностей можно эффективно управлять и манипулировать данными. От таких простых операций, как добавление или удаление элементов, до сложных обработок функциональными методами, массивы способны обеспечить необходимую гибкость и производительность в современной веб-разработке.

Каждый разработчик JavaScript должен понимать и эффективно использовать массивы в своей работе. Целью сегодняшнего урока является подборка основных моментов при работе с массивами в JS в одном месте, что должно помочь вам в лучшем их понимании.

Спасибо за внимание!