Как работает счетчик карт

Независимо от языка, на котором вы программируете, одна из основных функций или методов, которые вы в конечном итоге будете использовать, - это функция «сопоставления». Если вы не знакомы с «отображением», вот пример его синтаксиса в JavaScript:

const numbers = [2, 4, 6, 8]
const newNubmers = numbers.map(num => {
  return num * 2
}
console.log(newNumbers)
//expected output: [4, 8, 12, 16]

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

Что такое перечислитель карт?

Перечислитель карт - это функция, вызываемая в массиве, которая при вызове затем перебирает этот массив, выполняет некоторые действия с каждым экземпляром в этом массиве и возвращает нам новый массив с этой новой информацией.

Итак, чтобы воссоздать карту с нуля, нам потребуется выполнить несколько шагов. Сначала нам нужно будет найти способ перебрать массив. Как только мы знаем, какой тип цикла использовать, нам нужно выяснить, сколько раз будет выполняться наш цикл. Затем нам нужно будет выполнить какое-то действие с каждым элементом в массиве. Затем, когда это действие будет завершено, нам нужно добавить этот результат в новый массив. Как только это будет завершено, мы должны наконец вернуть новый массив.

Что такое петля?

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

В JavaScript существует несколько типов циклов. Как описано на w3schools.com:

  • for - проходит через блок кода несколько раз
  • for/in - перебирает свойства объекта
  • for/of - перебирает значения итерируемого объекта
  • while - перебирает блок кода, пока заданное условие истинно
  • do/while - также перебирает блок кода, пока заданное условие истинно

В нашем случае мы собираемся использовать либо цикл «while», либо цикл «do / while». Причина этого в том, что у нас будет «указанное условие», в данном случае длина нашего массива. Основное различие между этими двумя циклами заключается в том, что при запуске кода и при проверке условий меняются местами, из-за этого цикл do / while всегда будет выполняться хотя бы один раз, даже если условие, которое должно быть выполнено, ложно. Вот синтаксис для обоих:

//while loop
while (condtion) {
  // code to be executed
}
// do/while loop
do {
  //code to be executed
}
while (condtion)

Поскольку мы хотим, чтобы наш цикл выполнялся только в том случае, если наше условие с самого начала истинно, мы будем использовать цикл while вместо цикла do / while.

Какое у нас условие?

Чтобы отобразить каждый индекс в массиве, нам нужно будет сравнить индексную переменную со свойством length массива. Таким образом, независимо от длины массива, если индексная переменная меньше длины массива, наш код будет запускаться:

while (i < arr.length){
  //code to be executed
}

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

Создание функции для сопоставления через массив

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

const numbers = [2, 4, 6, 8]
const mapMyNumbers = () =>{}

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

const numbers = [2, 4, 6, 8]
const mapMyNumbers = (arr) =>{
  console.log(arr)
}

Если у вас открыты инструменты разработчика и вы запустите «mapMyNumbers ()», вы должны увидеть что-то вроде этого:

Здесь наш console.log не определен. Без аргумента «числа» в console.log ничего не будет. Теперь, если мы передадим этот аргумент в «mapMyNumbers (числа)», мы увидим:

Теперь, когда мы настроили аргумент, который нужен нашей функции, мы можем начать настраивать наш цикл с соответствующим условием. Для этого мы создадим переменную i, которая будет служить в качестве заполнителя индекса, и установим ее в ноль, чтобы начать с начала любого массива. Затем мы можем установить наше условие так, чтобы оно сравнивало «i» с длиной нашего массива. Если «i» меньше, чем «длина массива», мы запишем в журнал конкретный элемент в этом массиве по определенному индексу. Наконец, мы увеличим нашу переменную «i» на единицу по завершении этого цикла.

const numbers = [2, 4, 6, 8]
const mapMyNumbers = (arr) =>{
  let i = 0
  while (i < arr.length) {
    console.log(arr[i])
    i++
  }
}

Если мы снова вызовем эту функцию в нашей консоли, мы теперь увидим:

Однако наша цель здесь - умножить наши элементы на два (n * 2) с быстрым изменением нашего кода, мы можем console.log эту операцию:

const numbers = [2, 4, 6, 8]
const mapMyNumbers = (arr) =>{
  let i = 0
  while (i < arr.length) {
    console.log(arr[i] * 2)
    i++
  }
}

Наши результаты теперь показывают нам:

Теперь, когда у нас есть наше условие, наша операция и цикл, самое время добавить эти объекты в наш массив. Для этого мы инициализируем пустой массив перед нашим циклом под названием «newNumbers», затем мы поместим результаты нашей операции в наш новый массив и, наконец, мы добавим оператор return, который вернет newNumbers после завершения нашего цикла.

const numbers = [2, 4, 6, 8]
const mapMyNumbers = (arr) =>{
  let i = 0
  let newNumbers = []
  while (i < arr.length) {
    newNumbers.push(arr[i] * 2)
    i++
  }
  return newNumbers
}

Как только мы запустим этот код, мы увидим:

Чтобы убедиться, что наши результаты такие же, как если бы мы запускали функцию карты, мы могли бы также запустить перечислитель карт:

Как видим, наши результаты совпадают!

Заключение

Таким образом, мы успешно воссоздали перечислитель карт для массивов. Хотя я всегда рекомендовал бы использовать перечислитель, чтобы сэкономить строки кода и уменьшить вероятность человеческой ошибки на стороне разработчика, всегда полезно понять, как и почему что-то работает. Удачного кодирования !!!