Метод карты
№1. Привет, давайте поговорим о методе карты. Всякий раз, когда мы хотим получить значения из массива, мы, вероятно, хотим выполнить итерацию с функцией цикла и установить условные выражения, чтобы определить, какие из значений мы хотели бы получить из массива. Однако что, если мы хотим создать дубликат массива и при этом указать, какие значения мы хотим отображать, не затрагивая исходный массив, тогда нам потребуется использовать метод карты.
Образец:
Array.prototype.map() Синтаксис:
Функция обратного вызова принимает до трех аргументов. Метод карты вызывает функцию обратного вызова один раз для каждого элемента массива. Рассмотрим массив, значениями которого является набор объектов:
#2. Далее, приятно отметить, что метод Map возвращает новый массив и не меняет размер исходного массива, в отличие от метода Filter. По сути, мы получили бы доступ к значениям исходного массива, не затрагивая сам массив. Давайте теперь воспользуемся методом map для доступа к возрасту сотрудников в массиве «люди».
Во-первых, давайте посмотрим все значения в массиве:
Параметр «arr» здесь означает «элемент массива», поэтому мы также можем заменить «arr» на «person», если хотим сделать его более понятным:
Результат будет:
Итак, теперь давайте получим только возраст сотрудников:
OR
Вывод теперь будет:
#3. Чтобы доказать, что новый массив был сформирован, мы присвоили отображение исходного массива переменной с именем «возраст». Давайте выведем значение возрастов.
OR
Что мы увидим на выходе:
Мы получаем значение «undefined», потому что мы ничего не вернули из функции сопоставления. Он появляется четыре (4) раза, потому что в исходном массиве (людях) есть четыре значения (объекта).
#4. Итак, давайте что-нибудь вернём из функции отображения (обратного вызова), чтобы это повлияло на вывод. Мы также можем использовать функцию стрелки вместо обычного синтаксиса функции.
Вывод будет:
#5. Итак, давайте вернем значения возраста каждого из сотрудников.
OR
Вывод будет:
Мы также можем выполнять определенные операции с нашими выходами. Например, давайте отобразим число, кратное 2, для каждого из возрастов.
Вывод будет:
#6. Мы также можем изменить структуру нового массива, используя другие ключи для значений по сравнению с исходным массивом. В данном случае мы создали новый массив с новыми свойствами объекта.
const ages = people.map((arr) = > { const newObj = { firstName: arr.name.toUpperCase(), AgeLimit: arr.age + 20, }; return newObj; }); console.log(ages); console.log(JSON.stringify(ages));
Вывод будет выглядеть следующим образом:
#7. Что, если мы хотим отобразить значения в нашем интерфейсе, как мы это сделаем? Давайте посмотрим, как мы можем отобразить возвращаемые значения из метода карты во внешний интерфейс.
Давайте настроим страницу index.html:
Файл style.css:
И файл index.js:
Выход:
#Конец
Надеюсь, вам понравилось! :) Следуйте за мной для получения дополнительной информации…
Youtube: youtube.com/c/IfeanyiOmeata
LinkedIn: linkedin.com/in/omeatai
Twitter: twitter.com/iomeata
Github: github.com/ omeatai
Stackoverflow: stackoverflow.com/users/2689166/omeatai
Hashnode: hashnode.com/@omeatai
Среда: medium.com/@omeatai
> © 2021
Первоначально опубликовано на https://ifeanyiomeata.hashnode.dev.
