Как использовать карты в JavaScript

Введение

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

Предпосылки

Для этого урока не требуется писать код, но если вы хотите разобраться с примерами, вы можете использовать Node.js REPL или инструменты разработчика в браузере.

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

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

Вот пример:

const sweetArray = [2, 3, 4, 5, 35] const sweeterArray = sweetArray.map(sweetItem => { return sweetItem * 2 }) console.log(sweeterArray)

Этот вывод регистрируется в консоли:

Выход [ 4, 6, 8, 10, 70 ]

Это можно упростить и сделать чище, выполнив следующие действия:

// создаем функцию для использования const makeSweeter = sweetItem => sweetItem * 2; // у нас есть массив const sweetArray = [2, 3, 4, 5, 35]; // вызываем созданную нами функцию. более читабельно const sweeterArray = sweetArray.map(makeSweeter); console.log(sweeterArray);

Тот же вывод регистрируется в консоли:

Выход [ 4, 6, 8, 10, 70 ]

Наличие кода вроде sweetArray.map(makeSweeter) делает ваш код немного более читабельным.

Как преобразовать строку JS в массив

Метод map() относится к прототипу массива. На этом этапе вы будете использовать его для преобразования строки в массив. Здесь мы не будем разрабатывать отдельный метод для строк. Вместо этого мы будем использовать специальный метод .call().

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

Методу Call() можно передавать контекстные аргументы и параметры в основные аргументы функции.

Вот пример:

const name = "Сэмми" const map = Array.prototype.map const newName = map.call(name, eachLetter => { return `${eachLetter}a` }) console.log(newName)

Этот вывод регистрируется в консоли:

Вывод [ "Са", "аа", "ма", "ма", "я"]

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

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

Как отображать списки в библиотеках JavaScript

Библиотеки JavaScript, такие как React, используют метод .map() для рендеринга элементов списка. Однако для этого требуется синтаксис JSX, поскольку метод .map() обёрнут в синтаксис JSX.

Вот пример компонента React:

импорт React из &quot;react&quot;; импорт ReactDOM из &quot;react-dom&quot;; const names = [&quot;кит&quot;, &quot;кальмар&quot;, &quot;черепаха&quot;, &quot;коралл&quot;, &quot;морская звезда&quot;]; const NamesList = () =&gt; (
<div>
<ul>{names.map(имя =&gt; <li key="{name}"> {имя} </li>)}</ul>
</div>
); const rootElement = document.getElementById(&quot;root&quot;); ReactDOM.render(<nameslist />, корневойЭлемент);

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

Как переформатировать объекты массива JavaScript

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

Вот пример:

const myUsers = [ { name: 'акула', нравится: 'океан' }, { name: 'черепаха', нравится: 'пруд' }, { name: 'выдра', нравится: 'рыбные бисквиты' } ] const usersByLikes = myUsers.map(item => { const container = {}; container[item.name] = item.likes; container.age = item.name.length * 10; return container; }) console.log(usersByLikes);

Этот вывод регистрируется в консоли:

Вывод [ {акула: "океан", возраст: 50}, {черепаха: "пруд", возраст: 60}, {выдра: "рыбные бисквиты", возраст: 50} ]

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

Результат

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

[Общий: 1 Средний: 5/5]