Как, черт возьми, я могу использовать карту?

Это сообщение из моего личного блога, расположенного Здесь
Они публикуются там на день или около того раньше. Как причудливо.

Я часто рекомендую своим ученикам использовать функции массива. map, reduceа также filter но они редко чувствуют себя с ними комфортно, и это действительно позор, потому что они похожи на швейцарский армейский нож с прикрепленным фонариком. Эти три функции, вероятно, могли бы удалить тысячи строк вашего самого запутанного кода с ошибками. Давайте начнем со всех звезд группы map.

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

array.map(x => x * 5) 

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

Сначала я хотел бы указать на функцию стрелки x => x * 5 (если вы не знакомы с функциями стрелок, прочтите это Сообщение блога! где я надеюсь объяснить их довольно хорошо.)

Что там делает функция? Это обратный звонок? Ну… вроде… но нет. Это помогает думать об этом как о перезвоне, если хотите, в том смысле, что это функция прошло иаргумента другая функция определяет его выполнение… Так что в некоторых отношениях это как обратный звонок. Тем не менее, это не обратный вызов, вместо этого он упоминается как Функция высшего порядка который является сообщением в блоге на другой день.

Хорошо, хорошо, так map принимает функцию в качестве аргумента… Но почему? Что он делает с этим?

Ну карта просто повторяет над вашим массивом, что означает, что он берет каждый элемент массива один за другим и передает его в предоставленную вами функцию.

Итак, если бы вы увидели это

const scores = [90, 80, 25, 50]

const doubleScores = sores.map(x => x * 2)

Тогда вы могли бы определить, что doubleScores будет рассчитываться, взяв баллы за каждый элемент и пропустив его через x => x * 2. Так что же это нам оставит?

Ну, это тоже должен быть массив, потому что нам нужно хранить 4 результата. Итак, мы знаем doubleScores будет массив. И это массив, заполненный результатами удвоения содержимого некоторых других массивов.


cosnt scores = [90, 80, 25, 50]
const double = x => x * 2
const doubleScores = [ double(scores[0]),
                       double(scores[1]),
                       double(scores[2]),
                       double(scores[3]) ]

Итак, что же тогда карта делать?

Ну, один из способов объяснить это состоит в том, что он позволяет вам взять функцию, которая ожидает отдельные предметы в качестве аргументов, как и в приведенном выше случае, одно число. И используйте эту функцию с массивом из многих элементов. Вау… это как карман for loop что каждый массив просто носит с собой.

На самом деле это довольно круто, потому что это означает, что вместо написания циклов for я могу написать простые функции, которые используются для работы с отдельными элементами, и просто использовать их для преобразования списков элементов. Это действительно здорово, потому что for loops иметь хлам и шаблон, которые могут маскировать то, что на самом деле намерение кода есть. Рассмотрим следующий код.

const students = [ { name: 'Leroy Jenkins' grade: 55 },
                   { name: 'Tommy Pickles' grade: 98 },
                   { name: 'Mike Tyson' grade: 85 },
                   { name: 'Donnie Darko' grade: 90 } ]


const isPassing = (student) => student.grade >= 65 ? true : false


const tommyPickles = students[1]
const didTommyPass = isPassing(tommyPickles)


const classResults = students.map(isPassing)


const onlyWinners = students.filter(isPassing) 

Насколько это гладко? Можете ли вы представить себе попытку использовать эту функцию в середине цикла for? Это выглядело бы как беспорядок, вместо этого это выглядело бы как красивая однострочная декларация. Карта дает нам сверхспособности!
И когда я говорю, что это как карман for loop Я имею в виду буквально любой for loop можно переписать с помощью карты, и обычно получается намного проще. Например, приведенное выше, сначала написанное как цикл for, выглядит так:

const scores = [90, 80, 25, 50]
const doubleScores = []
for (var i = 0; i < scores.length; i++) {
  doubleScores.push(scores[i] * 2)
}

Фу, нет. Верните версию карты
const doubleScores = sores.map(x => x * 2)
оооо да… намного лучше.

Увидеть разницу? Версия карты умещается в одну строку, в ней гораздо меньше хлама, и вы выглядите намного круче… ладно, возможно, последняя часть не соответствует действительности. Однако в целом верно то, что редко возникает необходимость писать циклы for, если вы знаете, как это сделать. map. На самом деле я так давно не писал цикл for, что мне пришлось перепроверить MDN при написании того, что вы видите выше. Честно говоря, я просто не использую их больше.

Похожие записи

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

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