Domina el arte de hacer bucles en JavaScript con estos increíbles trucos

Muchas veces en su código necesita recorrer una matriz de números, cadenas u objetos . Hay tantas formas de hacerlo, y este tutorial tiene como objetivo enseñarle todas para que se convierta en un maestro de 'Looping en JavaScript'.

Vea a este gato ninja que es el maestro del salto.

vía GIPHY

Como el gato, también te convertirás en un maestro del bucle de JavaScript, una vez que conozcas todos los trucos del bucle.

1. El bucle "For"

El bucle For es la forma más básica de bucle en el código JavaScript. Es muy útil ejecutar un bloque de código varias veces. Utiliza un contador , cuyo valor se inicializa primero y luego se especifica su valor final.

El contador aumenta en un valor específico cada vez que se ejecuta el bucle. El ciclo for comprueba si el contador está dentro de los límites (valor inicial al valor final) y el ciclo finaliza cuando el valor del contador supera el valor final.

Déjame mostrarte algunos ejemplos.

a. Bucle a través de una matriz

En el siguiente código, estoy recorriendo todos los números en una matriz e imprimiendo cada uno de ellos en la ventana de la consola.

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

De la misma manera, también puede recorrer matrices de cadenas.

segundo. Recorrer elementos DOM

Suponga que desea buscar y colorear todas las anclas en la página de rojo. Entonces aquí también, puede usar For Loop así:

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

Explicación : Primero obtuve todos los anclajes en una matriz usando document.querySelectorAll("a"). Luego, simplemente los recorrí y cambié su color a rojo.

Fui al sitio de W3Schools y ejecuté el código anterior en la consola del navegador y vi lo que hizo:

Nota: jQuery también tiene un método de bucle muy bueno llamado jQuery Cada método que le ayuda a recorrer matrices, objetos, elementos DOM, JSON y XML con bastante facilidad. Si está utilizando jQuery en su sitio web, considere usarlo mientras realiza un bucle.

2. El ciclo "For In"

El bucle For In se usa para recorrer las propiedades de un objeto / matriz sin usar un 'contador'. Así que es una versión simplificada del For Loop .

El bloque de código dentro del bucle se ejecutará una vez para cada propiedad.

a. Recorrer las propiedades de un objeto

Tengo un objeto que contiene algunas propiedades. Usaré el ciclo For In para buscar todas las propiedades y su valor.

El siguiente código imprime todas las propiedades y sus valores en la ventana de la consola.

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

segundo. Bucle a través de JSON

JSON es un formato muy popular para transmitir objetos de datos que constan de pares atributo-valor y tipos de datos de matriz. Los sitios web utilizan JSON para compartir su información con sitios web externos. Ahora te diré cómo extraer datos de un JSON.

Supongamos que tengo un JSON que contiene información, como se muestra a continuación:

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

El JSON tiene un nodo raíz llamado ' jsonData ', y este contiene 3 nodos: ' uno ', ' dos ', ' tres '. Los nodos también se denominan claves.

El siguiente código muestra cómo extraer información de JSON usando el bucle 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]) } }

Explicación : Hay 2 bucles For In en el código anterior: bucle externo e interno.

El bucle exterior se ejecuta 3 veces y cubre los nodos 'uno', 'dos' y 'tres'.

El bucle interno cubre todos los valores dentro del nodo seleccionado, es decir, los nodos 'uno', 'dos' y 'tres'.

Ejecute el código en su página web o en la ventana de la consola de su navegador, y verá todos los valores de los nodos impresos, como en la siguiente imagen:

Going a little deeper into the JSON

The same JSON can be expressed by putting [] to contain the 3 nodes ‘one’, ‘two’, ‘three’:

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

Now I will use a combination of For & For In loops to extract all information from this JSON. The below code does this work for me:

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. The “While” loop

The While Loop has a condition specified in it. It checks the condition and executes the code block as long as the condition is true. Note that the while loop does not havea counter like the for loop.

a. Looping through an HTML table element

Suppose I have an HTML table that shows the prices of different products. This HTML table looks like the below image:

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:


    
Id Product Name Product Price
1 Shirts 49.99
2 Pants 55.50
3 Socks 20
4 Shoes 99
5 Jackets 88.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;

El table.insertRow(i)agregará una sexta fila porque el valor de la variable 'i' es 6 en el momento en que finaliza el ciclo While .

Las columnas (elemento 'td') se agregan a esta nueva fila mediante row.insertCell(0), row.insertCell(1), row.insertCell(2).

Muestro un valor dentro de la columna por:

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

El código JavaScript anterior creará una nueva fila que contiene el precio total del producto. Ahora la tabla se verá así:

segundo. Un bucle infinito

A continuación se muestra el bucle infinito en la declaración While:

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

Nota: Los bucles infinitos pueden bloquear el navegador, por lo que es necesario ejecutar el bucle en un intervalo de unos pocos milisegundos. Puede utilizar el método setInterval de JavaScript para ejecutar una función determinada cada 1000 milisegundos. Vea el siguiente código:

var myVar = setInterval(myTimer, 1000); function myTimer() { // your code }
Tutorial de referencia: comprensión de los métodos de temporizador "setTimeout ()" y "setInterval ()" en jQuery / JavaScript

4. El ciclo "Hacer mientras"

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

Gracias por tu tiempo leyendo este tutorial. Espero que te haya enseñado algo nuevo sobre cómo lidiar con bucles en JavaScript. Ahora puede aplicar cualquiera de sus tácticas de bucle favoritas, descritas en este tutorial, en su proyecto web.

Publico 2 artículos de desarrollo web por semana. Considere seguirme y recibir una notificación cada vez que publique un nuevo tutorial en Medium. Si esta publicación fue útil, haga clic en el botón de aplaudir varias veces para mostrar su apoyo. Traerá una sonrisa a mi rostro y me motivará a escribir más para lectores como tú.

También publiqué otro tutorial sobre freeCodeCamp, también te gustaría verlo: Cómo crear una función de inicio de sesión con Bootstrap Modal y jQuery AJAX

¡Gracias y Feliz Codificación!