20 самых полезных методов работы с массивами в JavaScript с пояснениями и примерами

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

  • push():
    Метод push() добавляет один или несколько элементов в конец массива и возвращает новую длину массива.
const numbers = [1, 2, 3];
numbers.push(4, 5);
console.log(numbers); // Output: [1, 2, 3, 4, 5]
  • pop():
    Метод pop() удаляет последний элемент из массива и возвращает этот элемент.
const numbers = [1, 2, 3, 4, 5];
const removedElement = numbers.pop();
console.log(numbers); // Output: [1, 2, 3, 4]
console.log(removedElement); // Output: 5
  • shift():
    Метод shift() удаляет первый элемент из массива и возвращает этот элемент, сдвигая все остальные элементы на единицу вниз.
const numbers = [1, 2, 3, 4, 5];
const shiftedElement = numbers.shift();
console.log(numbers); // Output: [2, 3, 4, 5]
console.log(shiftedElement); // Output: 1
  • unshift():
    Метод unshift() добавляет один или несколько элементов в начало массива и возвращает новую длину массива.
const numbers = [2, 3, 4, 5];
numbers.unshift(1);
console.log(numbers); // Output: [1, 2, 3, 4, 5]
  • concat():
    метод concat() объединяет два или более массива и возвращает новый массив.
const array1 = [1, 2, 3];
const array2 = [4, 5];
const combinedArray = array1.concat(array2);
console.log(combinedArray); // Output: [1, 2, 3, 4, 5]
  • join():
    метод join() объединяет все элементы массива в строку, используя указанный разделитель.
const elements = ['Hello', 'World'];
const joinedString = elements.join(' ');
console.log(joinedString); // Output: 'Hello World'
  • slice():
    Метод slice() возвращает новый массив, содержащий часть исходного массива, выбранную из начального и конечного индексов (без учета конечного индекса).
const numbers = [1, 2, 3, 4, 5];
const slicedArray = numbers.slice(1, 4);
console.log(slicedArray); // Output: [2, 3, 4]
  • splice():
    метод splice() изменяет исходный массив, удаляя, заменяя или добавляя элементы на место.
const fruits = ['apple', 'banana', 'cherry', 'date'];
// Removing elements
const removedElements = fruits.splice(1, 2);
console.log(fruits); // Output: ['apple', 'date']
console.log(removedElements); // Output: ['banana', 'cherry']

// Adding elements
fruits.splice(1, 0, 'blueberry', 'grape');
console.log(fruits); // Output: ['apple', 'blueberry', 'grape', 'date']

// Replacing elements
fruits.splice(2, 1, 'kiwi', 'mango');
console.log(fruits); // Output: ['apple', 'blueberry', 'kiwi', 'mango', 'date']
  • indexOf():
    Метод indexOf() возвращает первый индекс, по которому данный элемент может быть найден в массиве, или -1, если он отсутствует.
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.indexOf(3)); // Output: 2
console.log(numbers.indexOf(6)); // Output: -1
  • lastIndexOf():
    Метод lastIndexOf() возвращает последний индекс, по которому данный элемент может быть найден в массиве, или -1, если он отсутствует.
const numbers = [1, 2, 3, 4, 3, 5];
console.log(numbers.lastIndexOf(3)); // Output: 4
console.log(numbers.lastIndexOf(6)); // Output: -1
  • forEach():
    Метод forEach() выполняет предоставленную функцию один раз для каждого элемента массива.
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => {
  console.log(num * 2);
});
// Output:
// 2
// 4
// 6
// 8
// 10
  • map():
    метод map() создает новый массив с результатами вызова предоставленной функции для каждого элемента массива.
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
  • filter():
    Метод filter() создает новый массив со всеми элементами, прошедшими проверку, реализованную предоставленной функцией.
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
  • reduce():
    Метод reduce() применяет функцию к аккумулятору и каждому элементу массива, сводя его к одному значению.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => accumulator + current);
console.log(sum); // Output: 15
  • every():
    Метод every() проверяет, проходят ли все элементы в массиве проверку, реализованную предоставленной функцией.
const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every((num) => num > 0);
console.log(allPositive); // Output: true
  • some():
    Метод some() проверяет, проходит ли хотя бы один элемент в массиве проверку, реализованную предоставленной функцией.
const numbers = [1, 2, 3, 4, 5];
const hasNegative = numbers.some((num) => num < 0);
console.log(hasNegative); // Output: false
  • find():
    Метод find() возвращает первый элемент в массиве, удовлетворяющий заданной функции проверки.
const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find((num) => num > 3);
console.log(foundNumber); // Output: 4
  • findIndex():
    Метод findIndex() возвращает индекс первого элемента в массиве, который удовлетворяет предоставленной функции проверки.
const numbers = [1, 2, 3, 4, 5];
const foundIndex = numbers.findIndex((num) => num > 3);
console.log(foundIndex); // Output: 3
  • sort():
    Метод sort() сортирует элементы массива на месте и возвращает отсортированный массив.
const fruits = ['banana', 'apple', 'cherry', 'date'];
fruits.sort();
console.log(fruits); // Output: ['apple', 'banana', 'cherry', 'date']
  • reverse():
    Метод reverse() меняет порядок элементов в массиве на противоположный.
const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // Output: [5, 4, 3, 2, 1]

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