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

По сути, я хочу рассказать вам, как вы можете избежать записи периода For Loop при попытке перебирать данные. Это техника, которую должен знать каждый программист от новичка до эксперта. Я не уверен, почему они не преподают это как основу JavaScript в учебных курсах по кодированию, но очень важно, чтобы все знали, как использовать .map()!

Допустим, нам нужно перебрать массив или набор данных:

Пример:

Вместо того, чтобы писать базовый цикл For для перебора каждого объекта следующим образом:

for(let i = 0; i < data.length; i++)
{
   data[i]; // accessing each object in the array
   data[i].name // accessing each object and their name in the array
}

В основном выше я создал цикл For, чтобы перебирать массив и получать доступ к каждому объекту. Я вызвал data[i].name для доступа к каждому имени массива и так далее.

Или даже если бы у нас был простой массив:

const ARRAY = [20, 11, 15, 22, 33];

И я хотел что-то сделать с каждым из этих чисел в массиве.

Что ж, давайте перестанем использовать цикл For и воспользуемся .map() для перебора этих массивов следующим образом:

data.map(item => {
    item.name // will give me each name from the data array
     
    console.log(`Hello, ${item.name}");  // "Hello, Kylo Ren"
                                         // "Hello, Luke Skywalker"
                                         // "Hello, Han Solo"
})
ARRAY.map(item => {
         
      let addFive = item + 5;
      let multiplyByTen = item * 10;
      
      console.log(addFive, multiplyByTen);
      // 25 , 200
      // 16, 110
      // 20, 150
      // 27, 220
      // 38, 330 
})

И бум! Базовая итерация без цикла For. Все, что я сделал, это вызвал метод .map() для переменной массива. В скобках .map() я передал элемент параметра, который вызывает функцию. Бывший:

ARRAY.map(item => { //do something to item })

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

Мы также можем передать другой параметр под названием «ключ», который даст значение каждого индекса текущего элемента в массиве:

ARRAY.map((item, key) => {
   
     // where item = each number in Array 20, 11, 15, 22, 33
     // and key = the index of each item. 0, 1, 2, 3, 4
})

Теперь мы можем решать базовые задачи без использования цикла For!

Скажем, я хочу что-то сделать с элементами только по определенным индексам:

let sum = 0;
ARRAY.map((item, key) => {
    if(key === 0 || key === 4){
        sum = item + sum; 
   }
})
// sum = 20 + 0 + 33 = 53

Выше я подсчитываю сумму только для индексов 0 и 4.

Мы также можем перемещаться по 2d-массиву с помощью .map:

Пример:

const 2dArray = [ [1,2,3],
                  [4,5,6],
                  [7,8,9]];
//accessing [1,2,3] , [4,5,6], [7,8,9]
2dArray.map(item => {
    //Accessing each number in array
    item.map(item => {
         console.log(item) // 1,2,3,4,5,6,7,8,9
     })
})

Вывод:

Это было кратко, но, надеюсь, ясно… .map() необходим для того, чтобы быть хорошим программистом и понимать, как выполнять итерацию и обход массивов переменных, которые являются данными. Вы также можете решать сложные проблемы, понимая эту концепцию. Загляните на CodeWars.com и попробуйте решить несколько задач с помощью .map(), которые существенно помогут вам развить навыки решения проблем в течение следующей недели или если вы это реализуете.

Спасибо за чтение!

Благословить!