Овладейте изкуството на циклиране в JavaScript с тези невероятни трикове

Много пъти в кода ви се налага да прелиствате масив от числа, низове или обект . Има толкова много начини да го направите и този урок има за цел да ви научи всички тях, така че да станете майстор на „Цикли в JavaScript“.

Вижте тази котка нинджа, която е майсторът на скачането.

чрез GIPHY

Подобно на котката, вие също ще станете майстор на JavaScript Looping, след като знаете всички трикове за цикли.

1. Цикълът „За“

В За Loop е най-лесният начин да осъществявате цикъл в кода JavaScript. Много е удобно да изпълнявате блок код няколко пъти. Той използва брояч , чиято стойност първо се инициализира и след това се посочва крайната му стойност.

На борсата се увеличава с конкретна стойност всеки път, когато примката работи. Цикълът for проверява дали броячът е в границите (начална стойност до крайна стойност) и цикълът завършва, когато стойността на брояча премине крайната стойност.

Нека ви покажа няколко примера.

а. Цикъл през масив

В кода по-долу преглеждам всички числа в масив и отпечатвам всяко от тях на прозореца на конзолата.

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

По същия начин можете да прелиствате и масиви от низ.

б. Превръщане през 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 .

Блоковият код вътре в цикъла ще бъде изпълнен веднъж за всяко свойство.

а. Цикъл през свойства на обекта

Имам обект, който съдържа някои свойства. Ще използвам цикъла For In, за да търся всяко свойство и неговата стойност.

Кодът по-долу отпечатва всички свойства и техните стойности в прозореца на конзолата.

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

б. Цикъл през 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.

а. Превръщане през елемент на 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;

The table.insertRow(i)ще добави 6-ти ред, защото стойността на променливата 'i' е 6 по време на завършване на цикъла While Loop .

Колони (елемент 'td') се добавят към този нов ред от row.insertCell(0), row.insertCell(1), row.insertCell(2).

Показвам стойност в колоната от:

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

Горният код на JavaScript ще създаде нов ред, съдържащ общата цена на продукта. Сега таблицата ще изглежда така:

б. Безкраен цикъл

По-долу е безкрайният цикъл в инструкцията 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

Благодаря и щастливо кодиране!