Методы массивов JavaScript: что это такое и как с ними работать

• Что такое массивы в JavaScript
• Как создать массив
  • С помощью литерала массива 
  • С помощью конструктора Array()
• Как получить доступ к элементам массива
• Какие есть методы JS массивов
  • Как добавить и удалить элемент из массива JS
  • Метод перебора элементов
  • Как найти элемент в массиве
  • Методы преобразования массива

Что такое массивы в JavaScript

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

Массивы JS – это динамические структуры данных, поскольку их размер может динамически изменяться в процессе выполнения программы.

Как создать массив

В JavaScript массив можно создать несколькими способами. Одним из наиболее распространенных способов – это использование литерала массива или конструктора Array().

1. С помощью литерала массива 

Литерал массива представляет собой список значений, которые заключены в квадратные скобки [] и разделены запятыми. 

Синтаксис:

Где:

• ElementN представляет собой переменные, используемые для формирования коллекции значений ExampleArr. 
• Параметр ArrayLength указывает количество элементов, но его значение по умолчанию не установлено. После создания массива требуется провести его заполнение.

Пример создания массива:

// Простой массив чисел
const числа = [1, 2, 3, 4, 5];

// Массив с разными типами данных
const mixedArray = [1, 'строка', true, { key: 'значение' }];

// Массив строк
const фрукты = ['яблоко', 'груша', 'апельсин'];

2. С помощью конструктора Array()

В JavaScript «Array» – это встроенный объект-конструктор, который служит для создания новых массивов. Когда вы используете Array() как конструктор с оператором «new», вы создаете новый экземпляр массива.

Синтаксис:

Где:

• ElementN представляет собой переменные, используемые для формирования коллекции значений ExampleArr. 
• Параметр ArrayLength указывает количество элементов, но его значение по умолчанию не установлено. После создания массива требуется провести его заполнение.

Примеры:

// Создание массива без указания элементов
const emptyArray = new Array();

// Создание массива с указанием начальных элементов
const initializedArray = new Array(1, 2, 3, 4, 5);

// Создание массива длиной 3, но без явно заданных элементов
const arrayWithLength = new Array(3); 
console.log(arrayWithLength); // Выводит: [ <3 empty items> ]
console.log(arrayWithLength.length); // Выводит: 3

Вывод: 

[ <3 empty items> ]
3

Как получить доступ к элементам массива

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

Давайте получим значение второго элемента из ранее созданного массива значений «EmployeArr»:

Индексация массива начинается с 0, поэтому при обращении к N-ому элементу его индекс будет N-1. В нашем случае второй элемент имеет индекс 1.

Если необходимо изменить значение элемента на другое, можно просто присвоить переменной новое значение, как показано ниже:

Важное свойство, возвращающее длину массива в JavaScript, – это «length». Рассмотрим его применение на примере:

В данном случае длина «EmployeArr» будет равна 3.

Какие есть методы JS массивов

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

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

Некоторые распространенные методы массивов в JavaScript включают:

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

Как добавить и удалить элемент из массива JS

Для добавления или удаления элементов из массива используются четыре основных метода: «push», «pop», «shift» и «unshift», о которых мы рассказали ранее. 

Методы «pop» и «shift» возвращают значение удаленного элемента, а «push» и «unshift» – длину измененного массива.

Помимо перечисленных методов, следует отметить универсальный метод «splice». С его помощью можно вставлять, удалять или заменять элементы. Он возвращает набор удаленных значений.

Синтаксис метода «splice()»:

Где:

• «startIndex» – это индекс начала изменения набора значений. Если он превышает длину массива, то становится равен длине массива. А если ввести отрицательное число, то он примет разницу «array.length».
• «deleteCount» – количество удаляемых элементов, начиная с «startIndex». Может быть равно 0.
• «элемент1, элемент2, ...» – элементы, которые будут добавлены в массив. Необязательный параметр.

Примеры использования «splice»:

var собака = new Array('Бигль', 'Спаниэль', 'Бульдог', 'Корги', 'Немецкая овчарка', 'Алабай');
Dog.splice(2, 2); // ['Бигль', 'Спаниэль', 'Немецкая овчарка', 'Алабай']

var собака = new Array('Бигль', 'Спаниэль', 'Бульдог', 'Корги', 'Немецкая овчарка', 'Алабай');
Dog.splice(3, 1, 'Doberman'); // ['Бигль', 'Спаниэль', 'Бульдог', 'Doberman', 'Немецкая овчарка', 'Алабай']

Метод перебора элементов

Метод «forEach» в JavaScript используется для выполнения заданной функции обратного вызова один раз для каждого элемента в массиве. Этот метод поможет вам перебрать элементы массива.

Синтаксис метода «forEach»:

Где:

• «сallback» – это основной параметр, представляющий собой функцию, которая будет вызываться один раз для каждого элемента.
• «currentValue» – это текущий обрабатываемый элемент массива.
• «index» – индекс текущего обрабатываемого элемента.
• «array» – ссылка на массив, по которому происходит итерация.
• «thisArg» (необязательный) – значение, используемое в качестве «this» при вызове функции обратного вызова. 

Пример использования «forEach»:

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

numbers.forEach (function(элемент, индекс) {
  console.log('Элемент с индексом ' + индекс + ' имеет значение ' + элемент);
});

В этом примере функция обратного вызова принимает два параметра: «элемент» и «индекс». Она будет вызываться для каждого элемента массива. 

Результат выполнения данного кода:
Элемент с индексом 0 имеет значение 1
Элемент с индексом 1 имеет значение 2
Элемент с индексом 2 имеет значение 3
Элемент с индексом 3 имеет значение 4
Элемент с индексом 4 имеет значение 5

Метод «forEach» также позволяет передать второй параметр – значение «thisArg». Это может быть полезно, если внутри функции обратного вызова вы хотите использовать определенный контекст («this»).

Как найти элемент в массиве

Нахождение элемента в массиве в JavaScript можно выполнить несколькими методами. Давайте подробно рассмотрим основные из них:

1. Метод «indexOf()»

Метод «indexOf()» используется для поиска индекса первого вхождения указанного элемента в массиве. Если элемент не найден, метод возвращает -1.

Пример:

var числа = [1, 2, 3, 4, 5];
var искомоеЧисло = 3;
var индекс = числа.indexOf(искомоеЧисло);

if (индекс !== -1) {
  console.log('Элемент ' + искомоеЧисло + ' найден по индексу ' + индекс);
} else {
  console.log('Элемент ' + искомоеЧисло + ' не найден');
}

Вывод: 

Элемент 3 найден по индексу 2

2. Метод «find()»

Метод «find()» возвращает значение первого элемента в массиве, удовлетворяющего условию, заданному переданной функцией.

Пример:

var числа = [1, 2, 3, 4, 5];
var искомоеЧисло = 3;
var результат = числа.find(function(элемент) {
  return элемент === искомоеЧисло;
});

if (результат !== undefined) {
  console.log('Элемент ' + искомоеЧисло + ' найден');
} else {
  console.log('Элемент ' + искомоеЧисло + ' не найден');
}

Вывод:

Элемент 3 найден

3. Метод «includes()»

Метод «includes()» возвращает «true», если массив содержит указанный элемент, и «false» в противном случае.

Пример:

var числа = [1, 2, 3, 4, 5];
var искомоеЧисло = 3;
var естьТройка = числа.includes(искомоеЧисло);

if (естьТройка) {
  console.log('Элемент ' + искомоеЧисло + ' найден в массиве');
} else {
  console.log('Элемент ' + искомоеЧисло + ' не найден');
}

Вывод:

Элемент 3 найден в массиве

4. Метод «findIndex()»

Метод «findIndex()» возвращает индекс первого элемента в массиве, который удовлетворяет условию, заданному переданной функцией.

Пример:

var числа = [1, 2, 3, 4, 5];
var искомоеЧисло = 3;
var индекс = числа.findIndex(function(элемент) {
  return элемент === искомоеЧисло;
});

if (индекс !== -1) {
  console.log('Элемент ' + искомоеЧисло + ' найден по индексу ' + индекс);
} else {
  console.log('Элемент ' + искомоеЧисло + ' не найден');
}

Вывод:

Элемент 3 найден по индексу 2

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

Методы преобразования массива

Последний набор методов массивов в JavaScript, о котором мы упомянем в данной статье, включает методы, направленные на преобразование массива. Среди них можно выделить: map, flat, flatMap, sort и reverse. Разберем каждый из этих методов более подробно в следующих разделах.

Методы преобразования массива в JavaScript предоставляют множество возможностей для изменения содержимого массива. Давайте подробно рассмотрим некоторые из них:

1. Метод «map()»

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

Пример:

var числа = [1, 2, 3, 4, 5];
var удвоенные = числа.map(function(элемент) {
  return элемент * 2;
});

console.log(удвоенные); 

Вывод: 

[2, 4, 6, 8, 10]

2. Метод «flat()»

Метод «flat()» создает новый массив, внутри которого все подмассивы «выравниваются» на один уровень глубины.

Пример:

var вложенныйМассив = [1, [2, [3, 4]]];
var выравненный = вложенныйМассив.flat();

console.log(выравненный); 

Вывод: 

[1, 2, [3, 4]]

4. Метод «flatMap()»

Метод «flatMap()» комбинирует методы «map()» и «flat()». Он создает новый массив, применяя функцию к каждому элементу исходного массива, а затем «выравнивает» результат.

Пример:

var числа = [1, 2, 3, 4, 5];
var удвоенныеВыравненные = числа.flatMap(function(элемент) {
  return [элемент * 2, элемент * 3];
});

console.log(удвоенныеВыравненные); 

Вывод:

[
2, 3, 4, 6, 6, 
9, 8, 12, 10, 15
]

4. Метод «sort()»

Если вам нужна сортировка элементов массива, то метод «sort()» сделает это в соответствии с их строковыми представлениями или с использованием заданной функции сравнения.

Пример:

var буквы = ['c', 'a', 'b'];
var отсортированные = буквы.sort();

console.log(отсортированные); 

Вывод: 

['a', 'b', 'c']

5. Метод «reverse()»

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

Пример:

var числа = [1, 2, 3, 4, 5];
var обратныйПорядок = числа.reverse();

console.log(обратныйПорядок); 

 
Вывод: 

[5, 4, 3, 2, 1]

Эти методы предоставляют мощные инструменты для манипулирования массивами в JavaScript, обеспечивая удобные способы преобразования и изменения данных.

Заключение 

В этой статье мы рассмотрели основные концепции массивов в JavaScript и обозрели ключевые методы для работы с ними. 

Массивы представляют собой мощный инструмент, который позволяет эффективно хранить данные и управлять ими. Такие методы, как «map», «flat», «flatMap», «sort» и «reverse», предоставляют широкий функционал для трансформации и управления содержимым массивов, делая их важной частью разработки веб-приложений на JavaScript.