Способ JavaScript Map (), объясненный проходом на поход

Автор оригинала: Kevin Kononenko.

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

Я признаю его: я проскользнул в ужасную привычку строго использовать для циклов в любое время, которое мне нужно итерации через массив. Изредка я могу бросить FOREACH () там, но в основном я пожертвовал краткий кодекс для еще одного для () петли.

Итак, я хотел освежить себя на некоторых функциях высшего порядка JavaScript. Я начал расследовать карту () и понял, что я не использовал его, потому что я не понимал ее разных частей.

После небольшого расследования я понял, что вы можете визуализировать функциональность метода карты (), сравнивая его с походом на гору. Я объясню немного.

Вот быстрое краткое изложение метода карты ().

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

Конечно, вы могли бы использовать для петля, чтобы сделать это. Но с помощью MAP () позволит вам написать меньше кода и сделать ваш код более читабельным.

Прежде чем прочитать остальную часть учебника, вам просто нужно понять для петли. Вы можете проверить мой Руководство по циклам здесь Если вам нужен переподготовка.

Как черт возьми, это относится к походам?

Допустим, что есть популярная гора, которую все любят лезть, белые горы. (Это в основном самое стереотипное походное имя, которое я могу думать).

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

Метод карты работает так же.

Требуется каждый элемент, изменяет его так, как вы указываете, и добавляет результаты в 2-го массива.

Основы метода карты ()

Давайте будем использовать пример. Допустим, у нас есть 5 туристов, которые собираются на вершину белой горы. Чтобы символизировать те 5 Hikers, мы будем использовать массив с 5 числами для обозначения уровней их энергии (из 100).

    let startHike= [95, 83, 92, 98, 94];

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

Если бы мы использовали для петля, это будет выглядеть так:

    let startHike= [96, 84, 92, 98, 94]; 
    let summit = []; 

    for(let i=0;  i

Вместо этого мы можем использовать map () Метод Чтобы сделать все это в три строки кода и половины количества переменных.

Вот что выглядит код:

    let startHike= [96, 84, 92, 98, 94]; 

    let summit = startHike.map(function(hikerEnergy){ 
         return hikerEnergy / 2; 
    }); 

    //final result of summit: [48,42,46,49,47]

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

Еще много сразу, я догадаюсь? Вот объяснение каждой части, поскольку оно вроде не в порядке по сравнению с логикой для петлей.

Starthike Массив, который хранит уровень энергии 5 туристов в начале похода.

саммит = Массив, который хранит уровень энергии, когда они достигают вершины горы, что является конечным продуктом в этом случае.

.map () Метод карты для массивов, которые будут пересекать каждый элемент в настраивом массиве.

Функция (HikerEnergy) Обратный вызов, который использует аргумент, HikerEnergy, для каждого элемента в массиве на Starthike

Возвращение Пункт, который добавлен в массив саммита, который соответствует каждому элементу в массиве на Starthike

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

Теперь мы расстались на акт вызова переменной саммита из добавления новых элементов. Мы называем саммит В строке 2, но добавьте новые элементы в строке 3.

Также, как и для цикла, оригинальный массив остается неизменным. Вы просто добавляете модифицированные элементы на новый массив, саммит Отказ

Пример № 2: Использование массива, полных объектов

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

Давайте предположим, что у вас все еще есть 5 туристов. Каждый из них символизируется объектом с именем и уровнем гидратации, из 100.

    let startHike= [ 
     {name:"dave", water: 86},
     {name:"andrea", water: 56},
     {name:"maria", water: 42},
     {name:"nico", water: 60},
     {name:"will", water: 36}, 
    ];

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

В этом случае метод MAP () поможет нам хранить значение воды для каждого элемента.

Нам просто нужно будет посмотреть одну клавишу/Value Pair и переместить значение в новый массив.

    let startHike= [
     {name:"dave", water: 86},
     {name:"andrea", water: 56},
     {name:"maria", water: 42},
     {name:"nico", water: 60},
     {name:"will", water: 36} 
    ]; 

    let summit = startHike.map(function(hikerEnergy){ 
      let waterLevel = hikerEnergy['water']; 
      return waterLevel; 
    });  

    //final result of summit: [86, 56, 42, 60, 36]

Вот визуализированная версия.

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

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

Получить более визуализированные учебники

Если вам понравилось это руководство, вы, вероятно, наслаждаетесь остальными моими учебниками на основных концепциях веб-разработки. Проверьте Блог CodeAnalogies за последнее время.