Признаюсь, эти три метода у меня пропали первый, второй, третий… и так далее разы я их использовал. Изучать React, разбираться в том, что они делают и где их использовать, было невозможно. Итак, мы здесь. Укрепляю свои знания и делюсь ими с другими!

Знакомство с методами массивов очень важно для того, чтобы быть опытным инженером-программистом. Умение писать и использовать чистую логику — это *азов* и важно. Используя React, я быстро познакомился с использованием карты, фильтра и оператора расширения.

Я связал документацию MDN с каждым методом, чтобы получить более надежную информацию о каждом из них, а также несколько дополнительных примеров! Так что, обязательно проверьте.

Начнем с метода карты.

Что это?

Метод map() создает новый массив с результатами вызова предоставленной функции для каждого элемента в вызывающем массиве. Его лучше всего использовать, когда у вас есть массив элементов, и вы хотите что-то сделать для каждого элемента в этом массиве.

Как это выглядит?

const numbersArray = [1, 2, 3, 4]
const numbersArrayPlus = numbersArray.map(x => x + 1)
// numbersArrayPlus is now [2, 3, 4, 5]

Вот что происходит. Функция map() просматривает каждое из чисел в нашем первом массиве и добавляет к каждому из них единицу, создавая новый массив numberArrayPlus! Довольно прямолинейно и очень полезно.

Метод map() сохраняет динамичность нашего кода. Допустим, у вас есть массив объектов-изображений, и вы хотите увидеть каждое из них на странице. Ну, мы могли бы вручную жестко закодировать эти изображения, но что, если вы хотите добавить другое изображение? У вас будет это как для вашего массива изображений, так и для вашего кода. С map() вам не придется этого делать — добавление вашего изображения в массив будет универсальным средством.

Посмотрите на это:

imagesArray.map((image) => {
return ( 
    <ImageCard image={image} /> 
)})

*этот пример взят из приложения React*

Теперь на фильтр.

Что это?

Метод filter() создает блестящий новый массив со всеми элементами, прошедшими проверку, реализованную функцией. Итак, метод filter() делает то, что звучит… фильтрует.

Как это выглядит?

const words = ["kite", "ocean", "beach", "sandcastle", "seashell"]
const longWords = words.filter(word => word.length > 6)
// longWords would return "sandcastle" and "seashell"

Итак, используя метод filter(), мы просматриваем каждое слово в нашем массиве и смотрим, какие слова проходят наш тест. (Сколько слов больше 6 букв). Наш новый массив — это только те элементы, которые прошли.

Наконец, оператор спреда.

Что это?

Оператор распространения (…) позволяет удлинять итерируемый объект, например выражение массива, в местах, где ожидается ноль или более аргументов или элементов, или расширять объектное выражение в местах, где ожидается ноль или более пар ключ-значение. Звучит сложно, но работает довольно просто!

Как это выглядит?

function sum(x, y, z) {
 return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(…numbers)) // we would expect to see 6

Это может быть очень полезно для обработки ввода формы в React. Взять все данные вашей формы, которые заполняет пользователь, взять эти значения и добавить их в наш массив данных!

Итак, вот оно…

Вот наше практическое руководство по избранным методам работы с массивами. Эти методы могут помочь вам писать более чистый, эффективный и практичный код.

Удачи и удачного кодирования!