Підручник з JS для циклу - Як переглядати масив у JavaScript

Ця стаття надасть вам глибоке розуміння того, як саме здійснювати ітерацію структури даних Array у JavaScript.

Незалежно від того, чи ви тільки починаєте вивчати JavaScript, або хочете отримати оновлення, для вас це буде корисно в будь-якому випадку. Ця стаття допоможе вам ознайомитися з однією з найбільш широко використовуваних концепцій JavaScript.

Що таке масив?

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"];

Вгорі наведено масив JavaScript, який використовується для зберігання декількох значень. Це одна з найпростіших форм масиву. Він містить 4 “елементи” всередині масиву, усі рядки. І як ви можете бачити, кожен елемент розділений комою.

Цей приклад масиву містить різні марки автомобілів, і на нього можна посилатись зі carsзмінною.

Існує кілька способів перегляду цього масиву. JavaScript неймовірно багатий на функції, тому ми маємо розкіш вибрати найкращий спосіб вирішити нашу проблему.

Ось як ми будемо вирішувати ітерацію масивів у JavaScript:

  1. Виділіть 5 поширених методів ітерації масиву
  2. Покажіть трохи розуміння кожного ітеративного методу
  3. Надайте трохи коду, за допомогою якого ви можете його перевірити!

Традиційний для петлі

Що таке For Loop?

Вікіпедія визначає For Loop як:

«В інформатиці для циклу (або просто цикл ) є оператором потоку управління для завдання ітерації, що дозволяє код , який буде виконуватися кілька разів.»

Цикл for - це спосіб багаторазового виконання коду. Замість того, щоб вводити console.log(“hi”)п’ять разів, ви можете обернути його всередині циклу for.

У цьому першому прикладі ми навчимося переглядати масив автомобілів, який ви бачили вище, та роздруковуємо кожен елемент. Ітератор, або лічильник, починатиметься з першого індексу «Тесла» і закінчуватиметься з останнього «Ауді». Він рухається по масиву і друкує по одному елементу.

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"]; for(let i = 0; i < cars.length; i++) { console.log(cars[i]); }

Вихід:

Tesla Ferrari Lamborghini Audi

Занурившись у код, ми передаємо три варіанти циклу for

  • змінна ітератора - let i = 0;
  • де ітератор повинен зупинитися - i < card.length
  • скільки збільшити ітератор кожного циклу - i++

Цей цикл починається з нас 0, збільшує змінну на кожен цикл і зупиняється, коли ми потрапляємо в останній елемент масиву.

Ключова перевага традиційного циклу for полягає в тому, що ви маєте більше контролю.

Можна отримати доступ до різних елементів у масиві або виконати ітерацію масиву складним способом для вирішення складної проблеми. Наприклад, пропустити кожен інший елемент масиву можна досить просто за допомогою традиційного циклу for.

Метод forEach

Що таке метод forEach?

forEachМетод використовується для виконання функції для кожного елемента вашого масиву. Цей метод є чудовим вибором, якщо довжина масиву «невідома» або гарантована зміна. Цей метод можна використовувати лише з масивами, наборами та картами.

const amounts = [65, 44, 12, 4]; let doubledAmounts = []; amounts.forEach(item => { doubledAmounts.push(item * 2); }) console.log(doubledAmounts);

Найбільшою перевагою forEachциклу є можливість отримати доступ до кожного елемента, навіть якщо ваш масив, ймовірно, збільшиться в розмірі. Це масштабоване рішення для багатьох випадків використання, яке легше читати і розуміти, ніж традиційний цикл for, оскільки ми знаємо, що будемо повторювати кожен елемент рівно один раз.

Хоча цикл

Що таке цикл While?

Вікіпедія визначає цикл While:

Цикл while - це оператор керування потоком, який дозволяє повторно виконувати код на основі заданої булевої умови. У той час як цикл можна розглядати як повторення , якщо заяву. "

whileЦикл є способом виконання коду кілька разів , щоб перевірити , якщо умова істинно або хибно. Отже, замість того, щоб використовувати цикл for, із вкладеним оператором if, ми можемо використовувати цикл while. Або, якщо ми не можемо знайти довжину масиву, тоді як цикли є чудовим вибором.

Цикл while часто контролюється лічильником. У наведеному нижче прикладі ми показуємо базову ітерацію циклу while через масив. Головне - мати контроль над циклом while, який ви створюєте.

Приклад циклу (добре):

let i = 0 while (i < 5) { console.log(i); i++; }

Вихід :

0 1 2 3 4

Цикл while, якщо оператор if i < 5, або вимовлений вголос, "i менше 5". Змінна iзбільшується кожного разу, коли цикл запускається.

Простіше кажучи, це означає, що 1 додається до змінної iкожного разу, коли цикл виконує повну ітерацію. На першій ітерації iдорівнює 0, і ми друкуємо “0” на консолі.

Найбільшим ризиком використання циклу while є написання умови, яка ніколи не виконується.

Це часто трапляється в реальних сценаріях, коли хтось пише цикл while, але забуває протестувати свій цикл, і це вводить нескінченний цикл в основу коду.

Нескінченний цикл виникає, коли умова ніколи не виконується, і цикл продовжує працювати вічно. Це часто призводить до порушення змін, що в подальшому призводить до поломки і припинення роботи всього програмного забезпечення.

Попередження: Не запускайте цей код.

Приклад нескінченної петлі (погано):

let i = 0 while (i < 5) { console.log(i); }

Вихід:

Результати можуть відрізнятися.

Зробити, поки петля

Що таке цикл do while?

Вікіпедія визначає цикл Do-While як:

" Цикл do while - це оператор потоку керування, який виконує блок коду принаймні один раз , а потім багаторазово виконує блок чи ні, залежно від заданої логічної умови в кінці блоку."

Цикл виконання часу майже ідентичний циклу while, однак є одна ключова різниця. Цикл do-while гарантуватиме завжди виконувати блок коду принаймні один раз перед тим, як перевіряється оператор if.

Я часто думаю про це як про зворотний цикл while, і майже ніколи не використовую їх. Однак вони дуже корисні в деяких дуже конкретних сценаріях.

Приклад Do-Loop (Добре):

let i = 0; do { console.log(i); i++; } while (i < 5);

Вихід :

0 1 2 3 4

Найбільший ризик використання циклу do - це написання умови, яка ніколи не виконується. (Те саме, що і в циклі While.)

Попередження: Не запускайте цей код.

Приклад нескінченної петлі (погано):

let i = 0; do { console.log(i); } while (i < 5);

Вихід :

Результати можуть відрізнятися.

Хочете підняти свої знання JavaScript на новий рівень? Дізнайтеся про те map, що саме те саме forEach, але з бонусом !! ?

Приклад BONUS (Ітерація з картою)

Що таке карта?

Вікіпедія визначає карту як:

«У багатьох мовах програмування map - це назва функції вищого порядку, яка застосовує дану функцію до кожного елемента функтора, наприклад, списку, що повертає список результатів у тому самому порядку. Його часто називають застосувати до всіх, якщо розглядати його у функціональній формі ».

How does it work? The map function in JavaScript applies a function to every element inside the array. Please take a moment to re-read that sentence.

Afterwards, the map function returns a new array with the results of applying a function to every element in the array.

Map example:

const array = [1, 1, 1, 1]; // pass a function to map const results = array.map(x => x * 2); console.log(results);

Output:

[2,2,2,2]

We have applied the map function to the array containing four 1's. The map function then multiplied each element by 2, i.e., x * 2, and returned a new array. The new array was then stored in the results variable.

By viewing our output, we can see this worked successfully. Every element in the array has been multiplied by 2. This method can be used as a replacement to a loop in some cases, and is incredibly powerful.

Conclusion

Well done! You have learned five different ways to iterate over an array in JavaScript. These are the fundamental building blocks that will set you up for success in your JavaScript programming journey.

You have also been exposed to an advanced concept, map, which is used often in large-scale software applications.

So, I’ll leave you with this: how are you going to use arrays in your projects? And which iteration method did you find most exciting?  

Thanks for reading!

If you liked my article, please follow me and/or send me a message!  

Twitter • Medium • Github