Опануйте мистецтво циклу в JavaScript за допомогою цих неймовірних трюків

Багато разів у коді вам потрібно прокрутити масив чисел, рядків чи об'єктів . Існує дуже багато способів це зробити, і цей посібник має на меті навчити вас усіх них, щоб ви стали майстром «Циклу в JavaScript».

Побачте цього кота-ніндзя, який є майстром стрибків.

через GIPHY

Подібно до кота, ви також станете майстром JavaScript циклу, після того, як будете знати всі хитрощі.

1. Петля “За”

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

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

Дозвольте показати кілька прикладів.

a. Цикл перегляду масиву

У наведеному нижче коді я переглядаю всі числа в масиві та друкую кожне з них у вікні консолі.

var numbers = [10, 20, 30, 40, 50]; for (var i = 0; i < numbers.length; i++) { console.log(numbers[i]); }

Таким же чином ви також можете прокручувати масиви рядків.

b. Цикл елементів DOM

Припустимо, ви хочете знайти та забарвити всі прив'язки на сторінці в червоний колір. Тоді і тут ви можете використовувати For Loop таким чином:

var elements = document.querySelectorAll("a"); for (var i= 0; i < elements.length; i++) { elements[i].style.color = "red"; }

Пояснення : Спочатку я отримав усі прив’язки в масиві за допомогою document.querySelectorAll("a"). Потім я просто прокрутив їх і змінив їх колір на червоний.

Я зайшов на сайт W3Schools і запустив наведений вище код на консолі браузера і подивився, що він зробив:

Примітка: jQuery також має дуже хороший метод циклу, який називається jQuery Кожен метод, який допомагає вам досить легко перебирати масиви, об'єкти, елементи DOM, JSON та XML. Якщо ви використовуєте jQuery на своєму веб-сайті, то подумайте про його використання під час циклу.

2. Цикл “Для входу”

Цикл For In використовується для перегляду властивостей об'єкта / масиву без використання "лічильника". Отже, це спрощена версія For Loop .

Блок коду всередині циклу буде виконуватися один раз для кожного властивості.

a. Перегляд властивостей об’єкта

У мене є об’єкт, що містить деякі властивості. Я буду використовувати цикл For In для пошуку кожного властивості та його значення.

Наведений нижче код друкує всі властивості та їх значення у вікні консолі.

var person = { fname: "Nick", lname: "Jonas", age: 26 }; for (var x in person) { console.log(x + ": " + person[x]) }

b. Цикл JSON

JSON - це дуже популярний формат передачі об'єктів даних, що складається з пар атрибут-значення та типів масивів. Веб-сайти використовують JSON для обміну своєю інформацією із зовнішніми веб-сайтами. Зараз я розповім вам, як витягти дані з JSON.

Припустимо, у мене є JSON, що містить деяку інформацію, як показано нижче:

jsonData: { one: [11, 12, 13, 14, 15], two: [21, 22, 23], three: [31, 32] }

JSON має кореневий вузол під назвою ' jsonData ', і він містить 3 вузли - ' один ', ' два ', ' три '. Вузли також називаються ключами.

У наведеному нижче коді показано, як витягти інформацію з JSON за допомогою циклу For In :

var json = { jsonData: { one: [11, 12, 13, 14, 15], two: [21, 22, 23], three: [31, 32] } }; for (var key in json.jsonData) { for (var key1 in json.jsonData[key]) { console.log(json.jsonData[key][key1]) } }

Пояснення : У наведеному вище коді є 2 петлі In In - Зовнішній цикл та Внутрішній цикл.

За зовнішньому контуру проходить в 3 рази і охоплює вузли «один», «два» & «три».

Внутрішній контур охоплює всі значення всередині обраного вузла тобто вузлів «один», «два», і «три».

Запустіть код на веб-сторінці або у вікні консолі браузера, і ви побачите всі значення вузлів, надрукованих, як на зображенні нижче:

Заглиблюючись трохи глибше в JSON

Той самий JSON можна виразити, поставивши [], щоб містити 3 вузли "один", "два", "три":

jsonData: [{ one: [11, 12, 13, 14, 15] }, { two: [21, 22, 23] }, { three: [31, 32] }]

Тепер я буду використовувати комбінацію циклів For & For In для вилучення всієї інформації з цього JSON. Наступний код робить це для мене:

var json = { jsonData: [{ one: [11, 12, 13, 14, 15] }, { two: [21, 22, 23] }, { three: [31, 32] }] }; for (var i = 0; i < json.jsonData.length; i++) { for (var key in json.jsonData[i]) { for (var j = 0; j < json.jsonData[i][key].length; j++) { console.log(json.jsonData[i][key][j]) } } }

3. Цикл “Поки”

У циклі While є умова, зазначена в ньому. Він перевіряє стан і виконує блок коду, доки умова є істинним . Зверніть увагу, що цикл while не має лічильника, як цикл for.

a. Перегляд елемента таблиці HTML

Припустимо, у мене є таблиця HTML, яка показує ціни на різні товари. Ця таблиця HTML виглядає так:

You can see that this table does not show the total price of all the products. So if there is a requirement for you to show the total price then you can loop through all the prices and show the total in the table footer. This is how you will do it.

Add the HTML Table code to your web page:

IdProduct NameProduct Price
1Shirts49.99
2Pants55.50
3Socks20
4Shoes99
5Jackets88.90

Next, add the CSS for giving proper design to this html table:

 #priceTable { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; } #priceTable td, #priceTable th { border: 1px solid #ddd; padding: 8px; } #priceTable tr { background-color: #f2f2f2; } #priceTable th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #4CAF50; color: white; } 

Now loop through the table with the While loop and calculate the sum of all products. So add the below JavaScript code to your web page that does this work:

var table = document.getElementById("priceTable"); var i = 1; var sum = 0; while (i < table.rows.length) { sum += parseFloat(table.rows[i].cells[2].innerHTML) i++; } var row = table.insertRow(i); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell2.innerHTML = "Total Price"; cell3.innerHTML = sum;

Explanation: First I get the reference of the table by using var table = document.getElementById("priceTable"). Then I added 2 variables called ‘i’ and ‘sum’. The variable ‘i’ is the conditional variable of the while loop, while ‘sum’ will keep adding the price of every product into it.

So I ran the while loop for the variable ‘i’ value from 1 to the (total rows -1). I got the total rows in the table by table.rows.length and added it to the condition of the while loop:

while (i < table.rows.length) { //… }

Note: The table has 6 rows from index 0 to 5, and each row has 3 columns from index 0 to 2. I specifically ran the loop from ‘i’ variable value of 1 and not 0. This is because in the 0th index of the table’s row there is the column’s name (which I don’t need).

Inside the while loop I kept on adding the values of each product’s price to the sum variable like this:sum += parseFloat(table.rows[i].cells[2].innerHTML) and at the end increased the value of ‘i’ by 1.

For example, when ‘i’ value is 1 then table.rows[1] gives me the first row (first ‘tr’ element). Similarly table.rows[1].cells[2] will give the value of price column (price ‘td’ element) of the first row.

After the loop completes, I am adding a new row to the table at the very end. Inside this row I am adding the 3 columns — 0th index, 1st index, and 2nd index. Finally I am showing the string ‘total’ in the 1st column and total price contained in the ‘sum’ variable in the 2nd column.

The code which does the addition of this new row is:

var row = table.insertRow(i); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell2.innerHTML = "Total Price"; cell3.innerHTML = sum;

table.insertRow(i)Додасть 6 - й рядок , оскільки змінна «I» значення 6 в той час , в той час як Loop -решт.

Стовпці (елемент 'td') додаються до цього нового рядка за допомогою row.insertCell(0), row.insertCell(1), row.insertCell(2).

Я показую значення всередині стовпця за допомогою:

cell2.innerHTML = "Total Price"; cell3.innerHTML = sum;

Наведений вище код JavaScript створить новий рядок, що містить загальну ціну товару. Тепер таблиця буде виглядати так:

b. Нескінченна петля

Нижче наведено нескінченний цикл в інструкції While:

var infiVal = true; while (infiVal) { // your code }

Примітка: Нескінченні цикли можуть підвісити браузер, тому цикл потрібно запускати з інтервалом у кілька мілісекунд. Ви можете використовувати метод JavaScript setInterval для запуску заданої функції кожні 1000 мілісекунд. Дивіться код нижче:

var myVar = setInterval(myTimer, 1000); function myTimer() { // your code }
Довідковий посібник - Розуміння методів таймера “setTimeout ()” та “setInterval ()” у jQuery / JavaScript

4. Цикл "Зробіть поки"

In Do While loop the condition to be checked is given at the end, and so the loop executes at least once even if the condition is not true. Check the below code that will give a ‘Hello’ message on the alert box, even if the condition is false right from the beginning (as variable ‘i’ value is always greater than 1).

var i = 2; do { alert("Hello"); i++; } while (i < 1);

a. Looping through XML

Now I will use the Do While loop for how to loop through XML and extract data from it. I have an XML file called ‘XMLFile1.xml’ whose content is:

  Washington DC Islamabad Beijing Tokyo 

I will use AJAX to read this XML file and then loop through it with Do While loop. The below code prints all the names of the cities (given in the XML file) in the console window.

var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "XMLFile1.xml", true); xhttp.send(); function myFunction(xml) { var xmlDoc = xml.responseXML; var cityNames = Array.from(xmlDoc.getElementsByTagName("city")); var i = 0; do { console.log(cityNames[i].innerHTML); i++; } while (i < cityNames.length); }

Explanation: I created an XMLHttpRequest object for making the AJAX call. When the XML file is read then the event called onreadystatechange is raised, see below code:

xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { myFunction(this); } };

In this event I am calling my custom function called myFunction(). Here, I store the XML contents inside a variable called xmlDoc:

var xmlDoc = xml.responseXML;

Then I converted all the city names into an array:

var cityNames = Array.from(xmlDoc.getElementsByTagName("city"));

Finally I loop through this array of cities using Do While loop and print each city name in the console window:

var i = 0; do { console.log(cityNames[i].innerHTML); i++; } while (i < cityNames.length);

The below image illustrates the output printed on the console:

5. The “.forEach()” method

The ES6 edition of JavaScript introduced a new method called .forEach() for looping through an array elements. You will find it very handy when dealing with Arrays.

a. Looping through an array with .forEach() method:

In this situation I loop through an array element with the .forEach() method and print the index and value of every element in the console window. See the code below:

var names = ["jerry", "tom", "pluto", "micky", "mini"]; names.forEach(Function1); function Function1(currentValue, index) { console.log("Array Current Index is: " + index + " :: Value is: " + currentValue); }

Function1 is the name of the function which gets called for every element of the array. In my case it will be called 5 times. It accepts 2 parameters — ‘index’ and ‘value’ of the current element.

Note that you can convert an object to an array by using the Array.from() method:

var linksArr = Array.from(links);

Conclusion

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

Я публікую 2 статті про веб-розробку на тиждень. Подумайте про те, щоб стежити за мною та отримувати сповіщення щоразу, коли я публікую новий підручник на Medium. Якщо ця публікація була корисною, натисніть кілька разів кнопку плескання, щоб підтвердити свою підтримку! Це викличе посмішку на моєму обличчі та мотивує мене писати більше для таких читачів, як ти.

Я також опублікував ще один підручник з freeCodeCamp, ви б хотіли його також бачити - Як створити функцію входу за допомогою Bootstrap Modal та jQuery AJAX

Дякую та щасливого кодування!