JavaScript For Loop
JavaScript Loops
Loops are handy, if you want to run the same code over and over again, each time with a different value.
Often this is the case when working with arrays:
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
<!DOCTYPE html>
<html>
<p id="demo">JavaScript can change HTML content.</p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Different Kinds
of Loops
JavaScript supports different
kinds of loops
for
- loops through a block of code a number of times.
for/in
- loops through the properties of an object.
for/of
- loops through the values of an iterable object.
while
- loops through a block of code while a specified condition is true.
do/while
- also loops through a block of code while a specified condition is
true.
The For Loop
The for
loop has the following syntax:
for
(statement 1; statement 2; statement 3) {
//
code
block to be executed
}
Statement 1
is executed (one time) before the execution of the code block.
Statement 2
defines the condition for executing the code block.
Statement 3
is executed (every time) after the code block has been executed.
<!DOCTYPE html>
<html>
<p id="demo">JavaScript can change HTML content.</p>
<script>
var text = "";
var i;
for (i = 0; i < 5; i++) {
text += "The Number is"+ i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<p id="demo">JavaScript For Loop.</p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford", ];
var i, len, text;
for (i = 0, len = cars. length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<p id="demo">JavaScript can change HTML content.</p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = 2;
var len=cars.length;
var text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
The
For/In Loop
The JavaScript for/in
statement loops through the properties of an object:
<!DOCTYPE html>
<html>
<p id="demo">The for/in statement loops through the properties of an object</p>
<script>
var text = "";
var person = {fname:"John", lname:"Doe", age:25};
var x;
for (x in person) {
text += person[x];
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
The
For/Of Loop
The JavaScript for/of
statement loops through the values of an iterable objects.
for/of
lets you loop over data structures that are iterable such as Arrays,
Strings, Maps, NodeLists, and more.
The for/of
loop has the following syntax:
for
(variable of iterable) {
//
code block to be executed
}
variable
- For every iteration the value of the next property is assigned to
the variable. Variable
can be declared with const,
let,
or var.
iterable
- An object that has iterable properties.
Looping over an Array
<!DOCTYPE html>
<html>
<p id="demo">The for/in statement loops through the properties of an object</p>
<script> var cars = ["BMW", "Volvo", "Mini"];
var x;
for (x of cars) {
document.write(x + "<br >");
}
</script>
</body>
</html>
Looping over a string
<!DOCTYPE html>
<html>
<p id="demo">The for/in statement loops through the properties of an object</p>
<script> var cars = ["BMW", "Volvo", "Mini"];
var txt = "JavaScript";
var x;
for (x of txt) {
document.write(x + "<br >");
}
</script>
</body></html>
.png)
Comments
Post a Comment