4 случая использования в JavaScript Array.map(), которые вы должны знать

4 случая использования в JavaScript Array.map(), которые вы должны знать

От автора: от классического forloop до метода forEach() — JavaScript изобилует различными методами, используемыми для итерации набора данных. Однако одним из наиболее популярных является метод JavaScript Array map().

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

В этом посте мы рассмотрим 4 случая использования .map() в JavaScript. Давай начнем!

Вызов функции для каждого элемента в массиве

.map(), как было сказано, принимает функцию обратного вызова в качестве одного из своих аргументов, и важным параметром этой функции является текущее значение обрабатываемого функцией элемента. Это обязательный параметр. С помощью этого параметра мы можем изменить каждый отдельный элемент в массиве и создать новую функцию. Вот пример:

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Мы можем еще упростить этот код, чтобы сделать его более чистым:

Наличие такого кода, как sweetArray.map(makeSweeter), делает это более читаемым.

Преобразование строки в массив

Известно, что .map() принадлежит прототипу Array. Как насчет того, чтобы мы использовали его для преобразования строки в массив. Не волнуйтесь, мы не будем разрабатывать с нуля метод для работы со строками, а используем специальный метод .call().

Все в JavaScript является объектами, а методы — это просто функции, связанные с этими объектами. .call() позволяет нам использовать контекст одного объекта для другого. Поэтому мы будем копировать контекст .map() в массив из строки.

В .call() могут передаваться аргументы: используемый контекст и «параметры для аргументов исходной функции». Похоже на бред? Вот пример.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Здесь мы просто использовали контекст .map() в String и передали аргумент функции, которую ожидает функция .map(). Вуаля! У нас в консоли есть нужные символы. Отлично!

Это работает как метод .split() для String только каждый отдельный символ строки может быть изменен перед возвратом в массив.

Отображение списков в библиотеках JavaScript

Библиотеки JavaScript, такие как React, используют .map() для рендеринга элементов в списке. Для этого требуется синтаксис JSX, однако метод .map() обернут в mustache-подобный синтаксис JSX. Вот характерный пример компонента React.

Вы не знакомы с React? Это простой элемент React без состояния, который отображает div со списком. Отдельные элементы списка отображаются с использованием .map() для перебора массива изначально созданных имен. Этот компонент визуализируется с использованием ReactDOM в элементе DOM с идентификатором root.

Переформатирование объектов массива

Как работать с объектами в массиве? .map() может использоваться для перебора объектов в массиве — схожим с обычными массивами способом, *изменяет содержимое каждого отдельного объекта* и возвращает новый массив. Это изменение выполняется на основе того, что возвращается в функции обратного вызова. Вот пример:

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

Заключение

В этом посте мы рассмотрели основные случаи применения метода .map() в JavaScript. Следует отметить, что в сочетании с другими методами функционал .map() может быть расширен. Попробуйте найти другие случаи использования. Оставьте свои комментарии, вопросы и отзывы в разделе комментариев!

Автор: William Imoh

Источник: https://scotch.io/

Редакция: Команда webformyself.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Full-Stack практика. Создание JavaScript блога

Создание веб-приложения с нуля на JavaScript, NodeJS, ExpressJS

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree