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

Чтобы внести ясность, мы визуализируем методы массивов с помощью эмодзи. Кто знает, может быть такой способ обучения превзойдет любые, даже самые смелые, ожидания.

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

Array.push()

Описание: Добавляет один или несколько элементов в конец массива.

Эмодзи: Добавляем животных на ферму

let livestock = ["🐷", "🐮", "🐔"];
livestock.push("🐴", "🐮");
console.log(livestock);
// ["🐷", "🐮", "🐔", "🐴", "🐮"]

Array.from()

Описание: Создает новый массив из массивоподобного объекта.

Эмодзи: Отделяем зверей друг от друга

const wild  = "🐻🐯🦁";
const tamed = Array.from(wild);
console.log(tamed);
// ["🐻", "🐯", "🦁"]

Array.concat()

Описание: Создает новый массив из двух или более существующих массивов.

Эмодзи: Объединяем собак и кошек

const dogs = ["🐶", "🐶"];
const cats = ["🐱", "🐱", "🐱"];
const pets = dogs.concat(cats);
console.log(pets);
// ["🐶", "🐶", "🐱", "🐱", "🐱"]

Array.every()

Описание: Проверяет, соответствуют ли все элементы массива условию, заданному в функции.

Эмодзи: Ищем чужаков

const visitors   = ["🧑", "👽", "🧑", "🧑", "🤖"];
const isHuman    = e => e === "🧑";
const onlyHumans = visitors.every(isHuman);
console.log(onlyHumans);
// false

Array.fill()

Описание: Заполняет одинаковым значением все элементы массива от начального до конечного индексов, передаваемых в качестве аргументов.

Эмодзи: Выращиваем деревья

let seeds = ["🌱", "🌱", "🌱", "🌱", "🌱"];
seeds.fill("🌳", 1, 4);
console.log(seeds);
// ["🌱", "🌳", "🌳", "🌳", "🌱"]

Array.filter()

Описание: Создает новый массив, содержащий все элементы, прошедшие проверку.

Эмодзи: Находим одиночек

const guests  = ["👩👨", "👩👩", "👨", "👩", "👨👨"];
const singles = guests.filter(g => g.length/2 === 1); // *
console.log(singles);
// ["👨", "👩"]

Array.flat()

Описание: Создает новый массив, в котором все элементы вложенных массивов подняты на верхний уровень.

Эмодзи: Собираем деньги

const savings = ["💵", ["💵", "💵"], ["💵", "💵"], [[["💰"]]]];
const loot    = savings.flat(3)
console.log(loot);
// ["💵", "💵", "💵", "💵", "💵", "💰"];

Array.includes()

Описание: Определяет, содержит ли массив необходимый элемент.

Эмодзи: Ищем сдобную булочку

const food   = ["🥦", "🥬", "🍅", "🥒", "🍩", "🥕"];
const caught = food.includes("🍩");
console.log(caught);
// true

Array.join()

Описание: Объединяет все элементы массива в строку.

Эмодзи: Создаем локальную сеть

const devices = ["💻", "🖥️", "🖥️", "💻", "🖨️"];
const network = devices.join("〰️");
console.log(network);
// "💻〰️🖥️〰️🖥️〰️💻〰️🖨️"

Array.map()

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

Эмодзи: Кормим всех голодных обезьян

const hungryMonkeys = ["🐒", "🦍", "🦧"];
const feededMonkeys = hungryMonkeys.map(m => m + "🍌");
console.log(feededMonkeys);
// ["🐒🍌", "🦍🍌", "🦧🍌"]

Array.reverse()

Описание: Переворачиваем элементы массива: первый становится последним, последний становится первым.

Эмодзи: Отстающий побеждает

let   rabbitWins   = ["🐇", "🦔"];
const hedgehogWins = rabbitWins.reverse()
console.log(hedgehogWins);
// ["🦔", "🐇"]

Следует заметить, что данный метод являается деструктивным, так как он изменяет исходный массив. В данном примере и rabbitWins и hedgehogWins примут одинаковое значение ["🦔", "🐇"].

Array.slice()

Описание: Возвращает новый массив, содержащий копию части исходного массива

Эмодзи: Берем нужную шпаргалку для экзамена

const solutionsOfClassmates = ["📃", "📑", "📄", "📝"];
const myOwnSolutionReally   = solutionsOfClassmates.slice(2, 3);
console.log(myOwnSolutionReally);
// ["📄"]

Array.some()

Описание: Проверяет, проходит ли проверку хотя бы один элемент массива.

Эмодзи: Проверяем, есть участники чата с включенным микрофоном

const participants = ["🔇", "🔇", "🔊", "🔇", "🔊"];
const isLoud       = p => p === "🔊";
const troubles     = participants.some(isLoud);
console.log(troubles);
// true

Array.sort()

Описание: Сортирует элементы массива.

Эмодзи: Расставляем книги на полке

let books = ["📕", "📗", "📕", "📒", "📗", "📒"];
books.sort();
console.log(books);
// ["📒", "📒", "📕", "📕", "📗", "📗"]

Array.splice()

Описание: Удаляет, добавляет или изменяет элементы массива.

Эмодзи: Меняем погоду

let weather = ["☁️", "🌧️", "☁️"];
weather.splice(1, 2, "☀️");
console.log(weather);
// ["☁️", "☀️"]

Array.unshift()

Описание: Добавляет один или несколько элементов в начало массива.

Эмодзи: Добавляем к вагонам поезд

let train = ["🚃", "🚃", "🚃", "🚃"];
train.unshift("🚂");
console.log(train);
// ["🚂", "🚃", "🚃", "🚃", "🚃"]

---

Спасибо за внимание.

---

Перевод статьи Andreas Müller “JavaScript Array Methods Explained with Emojis”.