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

Простые методы массивов

В начале рассмотрим часто используемые методы, которые, как правило, выполняют простые операции с массивами.

Метод push

Метод push() используется для добавления одного или нескольких элементов в конец массива. Он возвращает новую длину массива.

Синтаксис:

array.push(element1, element2, ..., elementN)

Пример:

let fruits = ['apple', 'banana', 'orange'];
fruits.push('grape');
console.log(fruits); // Output: ['apple', 'banana', 'orange', 'grape']

Метод pop

Метод pop() удаляет последний элемент из массива и возвращает этот элемент.

Синтаксис:

array.pop()

Пример:

let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();
console.log(lastFruit); // Output: 'orange'
console.log(fruits); // Output: ['apple', 'banana']

Метод shift

Метод shift() удаляет первый элемент из массива и сдвигает все остальные элементы на более низкий индекс.

Синтаксис:

array.shift()

Пример:

let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();
console.log(firstFruit); // Output: 'apple'
console.log(fruits); // Output: ['banana', 'orange']

Метод unshift

Метод unshift() добавляет один или несколько элементов в начало массива и сдвигает все существующие элементы на более высокий индекс.

Синтаксис:

array.unshift(element1, element2, ..., elementN)

Пример:

let fruits = ['apple', 'banana', 'orange'];
fruits.unshift('grape');
console.log(fruits); // Output: ['grape', 'apple', 'banana', 'orange']

Метод splice

Метод splice() используется для добавления или удаления элементов из массива. Он может добавлять новые элементы, удалять существующие элементы или и то, и другое одновременно.

Синтаксис:

array.splice(start, deleteCount, element1, element2, ..., elementN)

start: индекс, с которого следует начать изменение массива. Если значение отрицательное, то оно будет начинаться с такого же количества элементов с конца массива.
deleteCount: количество удалений. Целое число, указывающее количество старых элементов массива, которые необходимо удалить. Если 0, то никакие элементы не удаляются.
element1, element2, …, elementN: элементы для добавления в массив, начинающиеся с начального индекса. Если вы не хотите добавлять какие-либо новые элементы, вы можете опустить эти параметры.

Пример:

let fruits = ['apple', 'banana', 'orange'];
fruits.splice(1, 1, 'grape');
console.log(fruits); // Output: ['apple', 'grape', 'orange']

В приведенном выше примере метод splice() удаляет один элемент, начинающийся с индекса 1, а затем добавляет новый элемент ‘grape’ с тем же индексом.

Метод slice

Метод slice() создает новый массив из части существующего массива. Это не изменяет исходный массив.

Синтаксис:

array.slice(start, end)

Пример:

let fruits = ['apple', 'banana', 'orange', 'grape'];
let citrusFruits = fruits.slice(1, 3);
console.log(citrusFruits); // Output: ['banana', 'orange']
console.log(fruits); // Output: ['apple', 'banana', 'orange', 'grape']

В приведенном выше примере метод slice() создает новый массив с элементами, начинающимися с индекса 1 до, но не включающими индекс 3.

Метод indexOf

Метод indexOf() возвращает первый индекс, по которому данный элемент может быть найден в массиве. Если элемент отсутствует, он возвращает значение -1.

Синтаксис:

array.indexOf(element)

Пример:

let fruits = ['apple', 'banana', 'orange', 'grape'];
let index = fruits.indexOf('orange');
console.log(index); // Output: 2

В приведенном выше примере метод indexOf() возвращает индекс элемента ‘orange’ в массиве ‘fruits’.

Метод forEach

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

Синтаксис:

array.forEach(callback(currentValue [, index [, array]])[, thisArg])

Вот что делает каждый параметр метода:

callback: функция, которая вызывается один раз для каждого элемента в массиве. Для этого требуется три аргумента:
currentValue: значение текущего обрабатываемого элемента.
index (необязательно): индекс текущего обрабатываемого элемента.
массив (необязательно): массив, для которого вызывается функция forEach().
thisArg (необязательно): объект, на который может ссылаться ключевое слово this в функции обратного вызова.

Пример:

let numbers = [1, 2, 3];
numbers.forEach(function(number) {
  console.log(number);
});

В приведенном выше примере метод forEach() выводит каждое число в массиве ‘numbers’. В данном случае number — это текущее число в массиве.

Продвинутые методы массивов

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

Метод map

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

Синтаксис:

array.map(callback(currentValue [, index [, array]])[, thisArg])

Пример:

let numbers = [1, 2, 3];
let doubled Numbers = numbers.map(function(number) {
  return number * 2;
});
console.log(doubled Numbers); // Output: [2, 4, 6]

В приведенном выше примере метод map() создает новый массив путем удвоения каждого числа в массиве ‘numbers’.

Метод sort

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

Синтаксис:

array.sort([compareFunction])

Вот что делает параметр метода:

compareFunction (необязательно): функция, которая определяет порядок сортировки. Эта функция должна возвращать отрицательное, нулевое или положительное значение, в зависимости от аргументов, например:
Если compareFunction(a, b) возвращает отрицательное значение, то a стоит перед b в отсортированном порядке.
Если compareFunction(a, b) возвращает положительное значение, то b стоит перед a в отсортированном порядке.
Если compareFunction(a, b) возвращает ноль, то a и b остаются неизменными по отношению друг к другу.

Метод sort() работает путем сравнения пар элементов в массиве и замены их местами, если они расположены в неправильном порядке. Он повторяет этот процесс несколько раз, пока массив не будет полностью отсортирован.

Пример:

let myArray = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
myArray.sort(function(a, b) {
  return a - b;
});
console.log(myArray);

В этом примере мы сначала объявляем массив myArray с некоторыми случайными числами. Затем мы используем метод sort() для сортировки массива в порядке возрастания, предоставляя пользовательскую функцию сортировки, которая вычитает b из a. Результатом этого кода будет:

[1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

Метод reverse

Метод reverse() в JavaScript используется для изменения порядка элементов в массиве в обратном порядке. Он изменяет исходный массив на месте и возвращает ссылку на перевернутый массив.

Метод работает путем замены первого и последнего элементов массива, затем второго и предпоследнего элементов и так далее, пока все элементы не будут заменены местами. Это эффективно изменяет порядок элементов в обратном порядке.

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

Синтаксис:

array.reverse()

Пример:

const myArray = ['apple', 'banana', 'orange', 'grape'];
console.log(myArray); // Output: ['apple', 'banana', 'orange', 'grape']

myArray.reverse();
console.log(myArray); // Output: ['grape', 'orange', 'banana', 'apple']

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

Метод join

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

Синтаксис:

array.join(separator)

Здесь array — это массив, над которым вы хотите выполнить операцию объединения, а separator — необязательный параметр, который указывает разделитель, который будет использоваться между элементами массива. Если разделитель не указан, разделителем по умолчанию является запятая (,).

Пример:

const myArray = ['apple', 'banana', 'orange', 'grape'];
const myString = myArray.join(', ');
console.log(myString); // Output: 'apple, banana, orange, grape'

В методу join() передаются запятая и пробел (‘, ‘) в качестве разделителя, поэтому результирующей строкой является текст ‘apple, banana, orange, grape’.

Важно отметить, что метод join() не изменяет исходный массив. Если вам нужно создать новый массив с элементами, соединенными вместе, вы можете использовать метод concat() для объединения элементов двух или более массивов.

Метод concat

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

Синтаксис метода concat() следующий:

array.concat(array2, array3, ..., arrayX)

Здесь array — это массив, к которому вы хотите добавить другие массивы, а array2, array3, …, arrayX — это массивы, которые вы хотите объединить.

Вот пример использования метода concat():

const array1 = ['apple', 'banana'];
const array2 = ['orange', 'grape'];
const newArray = array1.concat(array2);

console.log(newArray); // Output: ['apple', 'banana', 'orange', 'grape']

Важно отметить, что метод concat() не изменяет исходные массивы. Если вы хотите добавить новые элементы в существующий массив, вы можете использовать метод push(), чтобы добавить один или несколько элементов в конец массива.

Метод reduce

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

Синтаксис:

array.reduce(callback[, initialValue])

array — это массив, над которым вы хотите выполнить преобразование
callback — это функция, которая вызывается для каждого элемента массива для накопления значения
initialValue — необязательный параметр, который задает начальное значение накопителя. Если начальное значение не указано, в качестве начального значения используется первый элемент массива.

Функция обратного вызова (callback) принимает четыре аргумента:

accumulator — значение, накопленное к настоящему моменту
currentValue — текущий элемент, обрабатываемый в массиве
currentIndex (необязательно) — индекс текущего обрабатываемого элемента
array (необязательно) — массив, для которого был вызван метод reduce()

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

Вот пример использования метода reduce() для суммирования элементов массива:

const myArray = [1, 2, 3, 4, 5];
const sum = myArray.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

В этом примере метод reduce() вызывается для переменной myArray. Функция обратного вызова принимает два аргумента, accumulator и currentValue, и возвращает сумму accumulator и currentValue на каждой итерации. Методу reduce() также передается начальное значение 0 для аккумулятора. Конечное значение накопителя после обработки всех элементов равно 15, что является суммой всех элементов в массиве.

Метод filter

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

Синтаксис:

array.filter(callback[, thisArg])

array — это массив, над которым вы хотите выполнить операцию фильтрации
callback — это функция, которая вызывается для каждого элемента массива
thisArg — необязательный параметр, который задает значение this внутри функции обратного вызова

Функция обратного вызова принимает три аргумента:

currentValue — текущий элемент, обрабатываемый в массиве
index (необязательно) — индекс текущего обрабатываемого элемента
array (необязательно) — массив, для которого был вызван метод filter()

Функция обратного вызова должна возвращать логическое значение. Если возвращаемое значение равно true, элемент включается в новый массив. Если возвращаемое значение равно false, элемент исключается.

Вот пример использования метода filter() для создания нового массива из всех элементов, размер которых больше 2:

const myArray = [1, 2, 3, 4, 5];
const filteredArray = myArray.filter((element) => element > 2);

console.log(filteredArray); // Output: [3, 4, 5]

Функция обратного вызова принимает один аргумент, element, и возвращает true, если элемент больше 2. Метод filter() создает новый массив, содержащий все элементы, прошедшие проверку, которыми в данном случае являются элементы [3, 4, 5].

Метод find

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

Синтаксис:

array.find(callback[, thisArg])

array — это массив, в котором выполняется операция поиска
callback — это функция, которая вызывается для каждого элемента массива
thisArg — необязательный параметр, который задает значение this внутри функции обратного вызова.

Функция обратного вызова принимает три аргумента:

currentValue — текущий элемент, обрабатываемый в массиве
index (необязательно) — индекс текущего обрабатываемого элемента
array (необязательно) — массив, для которого был вызван метод find()

Функция обратного вызова должна возвращать логическое значение. Если возвращаемое значение равно true, элемент возвращается и операция поиска прекращается. Если возвращаемое значение равно false, обрабатывается следующий элемент в массиве. Если ни один элемент не проходит проверку, метод find() возвращает значение undefined.

Вот пример использования метода find() для поиска первого элемента в массиве, размер которого больше 2:

const myArray = [1, 2, 3, 4, 5];
const foundElement = myArray.find((element) => element > 2);

console.log(foundElement); // Output: 3

Функция обратного вызова принимает один аргумент, element, и возвращает true, если элемент больше 2. Метод find() возвращает первый элемент в массиве, прошедший проверку, который в данном случае равен 3.

Метод some

Метод some проверяет, проходит ли хотя бы один элемент в массиве тест, реализованный предоставленной функцией.

Синтаксис:

array.some(callback(element[, index[, array]])[, thisArg])

Пример:

let numbers = [1, 2, 3, 4, 5];
let some Numbers Are Even = numbers.some(function(number) {
  return number % 2 === 0;
});
console.log(some Numbers Are Even); // Output: true

В приведенном выше примере метод some() возвращает значение true, потому что по крайней мере одно число в массиве ‘numbers’ четное.

Метод every

Метод every проверяет, все ли элементы в массиве проходят тест, реализованный предоставленной функцией.

Синтаксис:

array.every(callback(element[, index[, array]])[, thisArg])

Пример:

let numbers = [1, 2, 3, 4, 5];
let all Numbers Are Even = numbers.every(function(number) {
  return number % 2 === 0;
});
console.log(all Numbers Are Even); // Output: false

В приведенном выше примере метод every() возвращает значение false, поскольку не все числа в массиве ‘numbers’ четные.