Важная особенность методов массивов состоит в том, что они делятся на изменяемые и неизменяемые. Это необходимо учитывать при выборе метода для решения конкретной задачи.
Большинство методов массивов в этом списке принимают в качестве аргумента аналогичный обратный вызов. Первый аргумент — это текущий элемент, второй — индекс, а третий — весь массив. С этим разобрались, теперь приступим к работе со списком.
1. ForEach
Перебирает каждый элемент массива и выполняет функцию обратного вызова.
const arr = [1, 2, 3];
arr.forEach(num => console.log(num));
// Консоль: 1, 2, 3
2. Map
Перебирает каждый элемент массива и выполняет функцию обратного вызова. Создает новый массив с возвращаемыми значениями функции обратного вызова.
const arr = [1, 2, 3, 4, 5];
const areEven = arr.map(num => num % 2 === 0);
console.log(areEven); // Консоль: [false, true, false, true, false]
3. Filter
Перебирает каждый элемент массива и выбирает только те, что соответствуют условию. Возвращается новый массив, основанный на выбранных элементах.
const arr = [1, 2, 3, 4, 5];
const evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // Консоль[2, 4]
4. Find
Находит первый элемент в массиве, который удовлетворяет условию. Если не найдено ни одного, возвращается значение undefined.
const arr = [1, 2, 3, 4, 5];
const firstEvenNumber = arr.find(num => num % 2 === 0);
console.log(firstEvenNumber); // Консоль[2]
5. FindIndex
Аналогично предыдущему методу, возвращает индекс первого элемента, удовлетворяющего заданному условию. Если не найдено ни одного, возвращается -1.
const arr = [1, 2, 3, 4, 5];
const firstEvenNumberIdx = arr.findIndex(num => num % 2 === 0);
console.log(firstEvenNumberIdx);
6. Reduce
Это расширенный метод, который можно использовать для объединения элементов массива. Основное отличие заключается в том, что обратный вызов принимает в качестве первого аргумента аккумулятор. Возвращаемое значение обратного вызова становится аккумулятором при следующей итерации.
const arr = [1, 2, 3, 4, 5];
// `acc` - значение аккумулятора
// аккумулятор - возвращаемое значение предыдущего обратного вызова
// второй аргумент, т.е. `0`, является значением по умолчанию
const sum = arr.reduce((acc, num) => acc + num, 0);
console.log(sum); // Консоль: 15
7. Every
Этот метод принимает обратный вызов, который возвращает булево значение. Every() вернет true, если условие справедливо для всех элементов массива.
const arr = [1, 2, 3, 4, 5];
const areAllEven = arr.every(num => num % 2 === 0);
console.log(areAllEven); // Консоль: false
8. Some
Как и предыдущий метод, some также принимает обратный вызов, который возвращает булево значение. Some() вернет true, если условие справедливо хотя бы для одного элемента.
const arr = [1, 2, 3, 4, 5];
const isOneEven = arr.some(num % 2 === 0);
console.log(isOneEven); // true
9. Sort
Этот метод используется для сортировки элементов в массиве. По умолчанию он сортирует массив по возрастанию. Он принимает функцию обратного вызова с двумя элементами — a и b. Если a меньше b, то возвращается -1, в ином случае возвращается 1. Если значения равны, то возвращается 0.
const arr = [1, 2, 3, 4, 5];
const descendingArr = arr.sort((a, b) => b - a);
console.log(descendingArr);
Помните, что в отличие от других методов,
sortизменяет массив.
10. Flat
Flat используется для объединения вложенного массива в один массив. Вы можете указать глубину, до которой его нужно “сгладить”.
const arr = [[[1, 2], [3]], [4, 5]];
const flattenedArr = arr.flat(4);
console.log(flattenedArr); // Консоль[1, 2, 3, 4, 5]
11. Reverse
Меняет порядок элементов в массиве.
const arr = [1, 2, 3, 4, 5];
const reversedArr = arr.reverse();
console.log(reversedArr); // Консоль[5, 4, 3, 2, 1]
12. Include
Этот метод возвращает true, если элемент присутствует в массиве.
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(5)); // true
console.log(arr.includes(10)); // false
13. Fill
Метод fill устанавливает элементы массива в заданное значение. Он удобен, когда нужно использовать метод map/forEach определенное количество раз.
const emptyArr = new Array(5);
// Проблема в том, что вы получаете `[empty x 10]`.
// Нужны реальные значения, чтобы применить функцию map.
const filledArr = emptyArr.fill(3); // Консоль[3, 3, 3, 3, 3]
14. At
Этот метод возвращает элемент заданного индекса. Разница между ним и традиционным способом доступа к элементу (т.е. arr[1]) заключается в том, что он поддерживает и отрицательные индексы.
const arr = [1, 2, 3, 4, 5];
console.log(arr.at(1)); // 2
console.log(arr.at(-1)); // 5
// Важно: отрицательные индексы начинаются с `1`, а положительные - с `0`.
15. Concat
Этот метод используется для объединения двух массивов.
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [6, 7, 8, 9, 10];
console.log(arr1.concat(arr2)); // Консоль[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Читайте также:
- 7 полезных методов объектов JavaScript
- Повысьте свой уровень мастерства в JavaScript ES6
- Как пересчитать слова в массиве используя JavaScript
Читайте нас в Telegram, VK и Яндекс.Дзен
Перевод статьи Akash Shyam: 15 Important JavaScript Array Methods You Should Know
