Инструкция за JS за цикъл - Как да се итерация над масив в JavaScript

Тази статия ще ви предостави солидно разбиране за това как точно да итерирате върху структура от данни на масив в JavaScript.

Независимо дали тепърва започвате да изучавате JavaScript или сте тук за опресняване, ще имате полза и за вас. Тази статия ще ви преведе през една от най-често използваните концепции за JavaScript.

Какво е масив?

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

По-горе е JavaScript масив, използван за съхраняване на множество стойности. Това е една от най-простите форми на масив. Той съдържа 4 „елемента“ вътре в масива, всички низове. И както можете да видите всеки елемент е разделен със запетая.

Този примерен масив съдържа различни марки автомобили и може да бъде посочен с carsпроменливата.

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

Ето как ще се справим с итерацията върху масиви в JavaScript:

  1. Откройте 5 често срещани метода за итерация върху масив
  2. Покажете някои прозрения за всеки итеративен метод
  3. Предоставете код, който можете да използвате, за да го тествате!

Традиционен за цикъл

Какво е For Loop?

Уикипедия определя For Loop като:

„В компютърните науки for-loop (или просто for loop ) е израз на контролния поток за определяне на итерация, който позволява многократно изпълнение на код .“

Цикълът for е начин за многократно изпълнение на код. Вместо да пишете console.log(“hi”)пет пъти, можете да го увиете в for цикъл.

В този първи пример ще научим как да прегледаме масива от автомобили, който сте виждали по-горе, и да разпечатаме всеки елемент. Итераторът или броячът ще започне при първия индекс „Tesla“ и ще завърши при последния „Audi“. Той се движи през масива и отпечатва един по един елемент.

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цикълът е начин да се изпълни код многократно за да проверите дали условие е вярно или невярно. Така че, вместо да използваме цикъл for, с вложен if оператор, можем да използваме цикъл while. Или, ако не можем да намерим дължината на масива, докато циклите са отличен избор.

Цикълът while често се контролира от брояч. В примера по-долу показваме основна итерация на цикъл през масив. Ключът е да имате контрол върху цикъл while, който създавате.

Пример за цикъл (Добър):

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

Изход :

0 1 2 3 4

Цикълът if е i < 5, ако изразът е или се изговаря на глас, „i е по-малко от 5“. Променливата iсе увеличава всеки път, когато цикълът се изпълнява.

С прости думи, това означава, че 1 се добавя към променливата iвсеки път, когато цикълът изпълни пълна итерация. При първата итерация iе равно на 0 и ние отпечатваме „0“ на конзолата.

Най-големият риск от използване на цикъл while е писането на условие, което никога не е изпълнено.

Това се случва често в сценарии от реалния свят, когато някой пише цикъл while, но забравя да тества своя цикъл и въвежда безкраен цикъл в кодовата база.

Безкраен цикъл възниква, когато условието никога не е изпълнено и цикълът продължава да работи завинаги. Това често води до нарушаване на промените, което след това води до счупване и спиране на работата на цялото софтуерно приложение.

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

Пример за безкраен цикъл (лош):

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

Изход:

Резултатите могат да варират.

Цикълът „Направи докато“

Какво е цикъл за правене докато?

Уикипедия дефинира цикъл за изпълнение като:

Цикъл do do е оператор на контролен поток, който изпълнява блок от код поне веднъж и след това многократно изпълнява блока или не, в зависимост от дадено булево условие в края на блока.“

Цикълът за извършване на работа е почти идентичен с цикъл while, но има една ключова разлика. Цикълът на изпълнението гарантира, че винаги ще изпълнява блока на кода поне веднъж, преди да бъде проверен операторът if.

Често го мисля като обратен цикъл while и почти никога не ги използвам. Те обаче са полезни в някои много специфични сценарии.

Do-Loop Пример (Добър):

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

Изход :

0 1 2 3 4

Най-големият риск от използването на do-loop е писането на условие, което никога не е изпълнено. (Същото като при цикъла 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