28 методов массивов Javascript: Шпаргалка для разработчика

Давайте разберемся в функциях массивов javascript и как их использовать.

Array.map()

Возвращает новый массив с результатами вызова заданной функции для каждого элемента этого массива.
const list = [😫, 😫, 😫, 😫];
list.map((⚪️) => 😀); // [😀, 😀, 😀, 😀]

// Code
const list = [1, 2, 3, 4];
list.map((el) => el * 2); // [2, 4, 6, 8]
Вход в полноэкранный режим Выход из полноэкранного режима

Array.filter()

Возвращает новый массив со всеми элементами, которые прошли тест, реализованный предоставленной функцией.
const list = [😀, 😫, 😀, 😫];
list.filter((⚪️) => ⚪️ === 😀); // [😀, 😀]

// Code
const list = [1, 2, 3, 4];
list.filter((el) => el % 2 === 0); // [2, 4]
Войти в полноэкранный режим Выйти из полноэкранного режима

Array.reduce()

Уменьшает массив до одного значения. Значение, возвращаемое функцией, хранится в аккумуляторе (результат/сумма).
const list = [😀, 😫, 😀, 😫, 🤪];
list.reduce((⬜️, ⚪️) => ⬜️ + ⚪️); // 😀 + 😫 + 😀 + 😫 + 🤪

// OR
const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item, 0); // 15
Вход в полноэкранный режим Выход из полноэкранного режима

Array.reduceRight()

Выполняет функцию редуктора (которую вы предоставите) над каждым элементом массива, в результате чего получается одно выходное значение (справа налево).
const list = [😀, 😫, 😀, 😫, 🤪];
list.reduceRight((⬜️, ⚪️) => ⬜️ + ⚪️); // 🤪 + 😫 + 😀 + 😫 + 😀

// Code
const list = [1, 2, 3, 4, 5];
list.reduceRight((total, item) => total + item, 0); // 15
Вход в полноэкранный режим Выход из полноэкранного режима

Array.fill()

Заполняет элементы массива статическим значением.
const list = [😀, 😫, 😀, 😫, 🤪];
list.fill(😀); // [😀, 😀, 😀, 😀, 😀]

// Code
const list = [1, 2, 3, 4, 5];
list.fill(0); // [0, 0, 0, 0, 0]
Вход в полноэкранный режим Выйти из полноэкранного режима

Array.find()

Возвращает значение первого элемента массива, который удовлетворяет заданной функции проверки. В противном случае возвращается значение undefined.
const list = [😀, 😫, 😀, 😫, 🤪];
list.find((⚪️) => ⚪️ === 😀); // 😀
list.find((⚪️) => ⚪️ === 😝); // undefined

// Code
const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // 3
list.find((el) => el === 6); // undefined
Войти в полноэкранный режим Выход из полноэкранного режима

Array.indexOf()

Возвращает первый индекс, по которому данный элемент может быть найден в массиве, или -1, если он отсутствует.
const list = [😀, 😫, 😀, 😫, 🤪];
list.indexOf(😀); // 0
list.indexOf(😡); // -1

// Code
const list = [1, 2, 3, 4, 5];
list.indexOf(3); // 2
list.indexOf(6); // -1
Войти в полноэкранный режим Выйти из полноэкранного режима

Array.lastIndexOf()

Возвращает последний индекс, по которому данный элемент может быть найден в массиве, или -1, если он отсутствует. Поиск в массиве выполняется в обратном направлении, начиная с индекса fromIndex.
const list = [😀, 😫, 😀, 😫, 🤪];
list.lastIndexOf(😀); // 3
list.lastIndexOf(😀, 1); // 0

// Code
const list = [1, 2, 3, 4, 5];
list.lastIndexOf(3); // 2
list.lastIndexOf(3, 1); // -1
Вход в полноэкранный режим Выход из полноэкранного режима

Array.findIndex()

Возвращает индекс первого элемента в массиве, который удовлетворяет заданной функции проверки. В противном случае возвращается -1.
const list = [😀, 😫, 😀, 😫, 🤪];
list.findIndex((⚪️) => ⚪️ === 😀); // 0

// You might be thinking how it's different from `indexOf` 🤔
const array = [5, 12, 8, 130, 44];
array.findIndex((element) => element > 13); // 3

// OR
const array = [{
  id: 😀
}, {
  id: 😫
}, {
  id: 🤪
}];

array.findIndex((element) => element.id === 🤪); // 2
Войти в полноэкранный режим Выход из полноэкранного режима

Array.includes()

Возвращает true, если заданный элемент присутствует в массиве.
const list = [😀, 😫, 😀, 😫, 🤪];
list.includes(😀); // true

// Code
const list = [1, 2, 3, 4, 5];
list.includes(3); // true
list.includes(6); // false
Войти в полноэкранный режим Выйти из полноэкранного режима

Array.pop()

Удаляет последний элемент из массива и возвращает этот элемент.
const list = [😀, 😫, 😀, 😫, 🤪];
list.pop(); // 🤪
list; // [😀, 😫, 😀, 😫]

// Code
const list = [1, 2, 3, 4, 5];
list.pop(); // 5
list; // [1, 2, 3, 4]
Вход в полноэкранный режим Выход из полноэкранного режима

Array.push()

Добавляет новые элементы в конец массива и возвращает новую длину.
const list = [😀, 😫, 😀, 😫, 🤪];
list.push(😡); // 5
list; // [😀, 😫, 😀, 😫, 🤪, 😡]

// Code
const list = [1, 2, 3, 4, 5];
list.push(6); // 6
list; // [1, 2, 3, 4, 5, 6]
Войти в полноэкранный режим Выход из полноэкранного режима

Array.shift()

Удаляет первый элемент из массива и возвращает этот элемент.
const list = [😀, 😫, 😀, 😫, 🤪];
list.shift(); // 😀
list; // [😫, 😀, 😫, 🤪]

// Code
const list = [1, 2, 3, 4, 5];
list.shift(); // 1
list; // [2, 3, 4, 5]
Войти в полноэкранный режим Выход из полноэкранного режима

Array.unshift()

Добавляет новые элементы в начало массива и возвращает новую длину.
const list = [😀, 😫, 😀, 😫, 🤪];
list.unshift(😡); // 6
list; // [😡, 😀, 😫, 😀, 😫, 🤪]

// Code
const list = [1, 2, 3, 4, 5];
list.unshift(0); // 6
list; // [0, 1, 2, 3, 4, 5]
Войти в полноэкранный режим Выйти из полноэкранного режима

Array.splice()

Изменяет содержимое массива, удаляя или заменяя существующие элементы и/или добавляя на их место новые.
const list = [😀, 😫, 😀, 😫, 🤪];
list.splice(1, 2); // [😀, 😫]
list; // [😀, 😫, 🤪]

// Code
const list = [1, 2, 3, 4, 5];
list.splice(1, 2); // [2, 3]
list; // [1, 4, 5]
Войти в полноэкранный режим Выйти из полноэкранного режима

Array.slice()

Возвращает неглубокую копию части массива в новый объект массива, выбранный от начала до конца (конец не включен). Исходный массив не будет изменен.
const list = [😀, 😫, 😀, 😫, 🤪];
list.slice(1, 3); // [😫, 😀]
list; // [😀, 😫, 😀, 😫, 🤪]

// Code
const list = [1, 2, 3, 4, 5];
list.slice(1, 3); // [2, 3]
list; // [1, 2, 3, 4, 5]
Вход в полноэкранный режим Выход из полноэкранного режима

Array.join()

Объединяет все элементы массива в строку.
const list = [😀, 😫, 😀, 😫, 🤪];
list.join('〰️'); // "😀〰️😫〰️😀〰️😫〰️🤪"

// Code
const list = [1, 2, 3, 4, 5];
list.join(', '); // "1, 2, 3, 4, 5"
Войти в полноэкранный режим Выйти из полноэкранного режима

Array.reverse()

Изменяет порядок элементов в массиве.
const list = [😀, 😫, 😀, 😫, 🤪];
list.reverse(); // [🤪, 😫, 😀, 😫, 😀]
list; // [🤪, 😫, 😀, 😫, 😀]

// Code
const list = [1, 2, 3, 4, 5];
list.reverse(); // [5, 4, 3, 2, 1]
list; // [5, 4, 3, 2, 1]
Войти в полноэкранный режим Выйти из полноэкранного режима

Array.sort()

Сортирует элементы массива по местам и возвращает массив. По умолчанию порядок сортировки соответствует кодовым точкам Unicode строк.
const list = [😀, 😫, 😀, 😫, 🤪];
list.sort(); // [😀, 😀, 😫, 😫, 🤪]

// This make more sense 🤔
const array = ['D', 'B', 'A', 'C'];
array.sort(); // 😀 ['A', 'B', 'C', 'D']

// OR
const array = [4, 1, 3, 2, 10];
array.sort(); // 😧 [1, 10, 2, 3, 4]
array.sort((a, b) => a - b); // 😀 [1, 2, 3, 4, 10]
Войти в полноэкранный режим Выход из полноэкранного режима

Array.some()

Возвращает true, если хотя бы один элемент в массиве проходит тест, реализованный предоставленной функцией.
const list = [😀, 😫, 😀, 😫, 🤪];
list.some((⚪️) => ⚪️ === 😀); // true
list.some((⚪️) => ⚪️ === 😡); // false

// Code
const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // true
list.some((el) => el === 6); // false
Войти в полноэкранный режим Выйти из полноэкранного режима

Array.every()

Возвращает true, если все элементы массива проходят тест, реализованный предоставленной функцией.
const list = [😀, 😫, 😀, 😫, 🤪];
list.every((⚪️) => ⚪️ === 😀); // false

const list = [😀, 😀, 😀, 😀, 😀];
list.every((⚪️) => ⚪️ === 😀); // true

// Code
const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // false

const list = [2, 4, 6, 8, 10];
list.every((el) => el%2 === 0); // true
Войти в полноэкранный режим Выйти из полноэкранного режима

Array.from()

Создает новый массив из объекта типа array или iterable.
const list = 😀😫😀😫🤪;
Array.from(list); // [😀, 😫, 😀, 😫, 🤪]

const set = new Set(['😀', '😫', '😀', '😫', '🤪']);
Array.from(set); // [😀, 😫, 🤪]

const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Войти в полноэкранный режим Выйти из полноэкранного режима

Array.of()

Создает новый массив с переменным количеством аргументов, независимо от количества или типа аргументов.
const list = Array.of(😀, 😫, 😀, 😫, 🤪);
list; // [😀, 😫, 😀, 😫, 🤪]

// Code
const list = Array.of(1, 2, 3, 4, 5);
list; // [1, 2, 3, 4, 5]
Войти в полноэкранный режим Выйти из полноэкранного режима

Array.isArray()

Возвращает true, если заданное значение является массивом.
Array.isArray([😀, 😫, 😀, 😫, 🤪]); // true
Array.isArray(🤪); // false

// Code
Array.isArray([1, 2, 3, 4, 5]); // true
Array.isArray(5); // false
Войти в полноэкранный режим Выйти из полноэкранного режима

Array.at()

Возвращает значение по указанному индексу.
const list = [😀, 😫, 😀, 😫, 🤪];
list.at(1); // 😫

// Return from last 🤔
list.at(-1); // 🤪
list.at(-2); // 😫

// Code
const list = [1, 2, 3, 4, 5];
list.at(1); // 2
list.at(-1); // 5
list.at(-2); // 4
Войти в полноэкранный режим Выйти из полноэкранного режима

Array.copyWithin()

Копирует элементы массива внутри массива. Возвращает измененный массив.
const list = [😀, 😫, 😀, 😫, 🤪];
list.copyWithin(1, 3); // [😀, 😀, 🤪, 😫, 🤪]

const list = [😀, 😫, 😀, 😫, 🤪];
list.copyWithin(0, 3, 4); // [😫, 😫, 😀, 😫, 🤪]

// Code
const list = [1, 2, 3, 4, 5];
list.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]
Войти в полноэкранный режим Выход из полноэкранного режима

ПРИМЕЧАНИЕ: 🤔

  • первый аргумент — цель, с которой начинается копирование элементов.
  • второй аргумент — индекс, с которого начинается копирование элементов.
  • третий аргумент — индекс, с которого следует прекратить копирование элементов.

Array.flat()

Возвращает новый массив со всеми элементами подмассива, конкатенированными в него рекурсивно до указанной глубины.
const list = [😀, 😫, [😀, 😫, 🤪]];
list.flat(Infinity); // [😀, 😫, 😀, 😫, 🤪]

// Code
const list = [1, 2, [3, 4, [5, 6]]];
list.flat(Infinity); // [1, 2, 3, 4, 5, 6]
Вход в полноэкранный режим Выход из полноэкранного режима

Array.flatMap()

Возвращает новый массив, сформированный путем применения заданной функции обратного вызова к каждому элементу массива,
const list = [😀, 😫, [😀, 😫, 🤪]];
list.flatMap((⚪️) => [⚪️, ⚪️ + ⚪️ ]); // [😀, 😀😀, 😫, 😫😫, 😀, 😀😀, 😫, 😫😫, 🤪, 🤪🤪]

// Code
const list = [1, 2, 3];
list.flatMap((el) => [el, el * el]); // [1, 1, 2, 4, 3, 9]
Войти в полноэкранный режим Выход из полноэкранного режима

Обязательно к прочтению Если вы еще не читали
Как отменить Javascript API запрос с помощью AbortController
13 Утилиты Typescript: Шпаргалка для разработчика
Больше никаких функций создателя действий redux
Javascript короткие многоразовые функции трюки и советы

Больше материалов на Dev.to.
Ловите меня на Youtube, Github, Twitter, LinkedIn, Medium, Stackblitz, Hashnode, HackerNoon и Blogspot.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *