JavaScript for-sats

Definition och användning

for-satsen skapar en loop som körs så länge villkoret är sant.

Så länge villkoret är sant, kommer loopen att fortsätta köra. Den kommer att stoppa när villkoret blir falskt.

JavaScript stöder olika typer av loopar:

  • for - Upprepad kodblock
  • for/in - Genomgång av objektets egenskaper
  • for/of - loopa igenom värden i en itervärd
  • while - upprepa kodblocket när det specificerade villkoret är sant
  • do/while - kör ett kodblock en gång och upprepa loopen sedan när det specificerade villkoret är sant

Tips:Använd break-satsen för att hoppa ur loopen, använd continue-satsen för att hoppa över en viss värde i loopen.

Exempel

Kör kodblocket fem gånger:

var text = "";
var i;
för (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";

Prova själv

Mer TIY-exempel finns längre ner på sidan.

Syntax

för (statement 1; statement 2; statement 3) {
  code block att köra

Parametervärde

Parameter Beskrivning
statement1

Valfritt. Kör innan loopen (kodblock) börjar. Används vanligtvis för att initialisera räknarevariabeln. Om du behöver initialisera flera värden, separera varje värde med komma.

Kommentar:Denna parameter kan uteslås. Men glöm inte att inte uteslå semikolonet ";"
statement2

Valfritt. Definiera villkoret för att köra loopen (kodblock). Används vanligtvis för att bedöma villkoret för en räknarevariabel. Om det returneras true, kommer loopen att börja om, om det returneras false, kommer loopen att sluta.

Kommentar:Denna parameter kan uteslås. Men glöm inte att inte uteslå semikolonet ";". Dessutom måste du tillhandahålla break inom loopen om du utesluter denna parameter. Annars kommer loopen aldrig att sluta, vilket kan göra din webbläsare att krascha.
statement3

Valfritt. Kör efter varje upprepning av loopen (kodblock). Används vanligtvis för att öka eller minska en räknarevariabel.

Kommentar:Denna parameter kan uteslås (t.ex. öka/minska värdet inom loopen).

Tekniska detaljer

JavaScript-version: ECMAScript 1

Mer exempel

Exempel

Loopa igenom arrayens index och samla in namn på bilar från cars-arrayen:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
för (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";

Prova själv

Exempel förklaring:

  • Först sätter vi en variabel innan loopen börjar (var i = 0;)
  • Därefter definierar vi villkoret för loopen. Sålänge variabeln är mindre än arrayens längd (dvs 4), fortsätter loopen
  • Varje gång loopen körs, ökas variabeln med ett (i++)
  • När variabeln inte längre är mindre än 4 (arrayens längd), är villkoret falskt, loopen slutar

Exempel

Initialisera flera värden i den första parametern:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i;
för (i = 0, len = cars.length, text = ""; i < len; i++) { 
  text += cars[i] + "<br>";

Prova själv

Exempel

Uteslå den första parametern (sätt värde innan loopen startar):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 2;
var len = cars.length;
var text = "";
för (; i < len; i++) {
  text += cars[i] + "<br>";

Prova själv

Exempel

Använda continue-satsen - kör kodblocket, men hoppa över värdet "3":

var text = ""
var i;
för (i = 0; i < 5; i++) {
  om (i == 3) {
    continue;
  
  text += "The number is " + i + "<br>";

Prova själv

Exempel

Använd break-satsen - kör ett stycke kod, men avsluta loopen när variabeln i är lika med "3":

var text = ""
var i;
för (i = 0; i < 5; i++) {
  om (i == 3) {
    break;
  
  text += "The number is " + i + "<br>";

Prova själv

Exempel

Uteslå den andra parametern. I detta exempel använder vi också en break-sats för att avsluta loopen när i är lika med "3" (om den andra parametern utesluts, måste det finnas en break inom loopen. Annars kommer loopen aldrig att sluta, och din webbläsare kommer att krascha):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
för (i = 0; ; i++) {
  om (i == 3) {
    break;
  
  text += cars[i] + "<br>";

Prova själv

Exempel

Genomför en nedåtgående loop genom arrayens index (negativt ökande):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
för (i = cars.length - 1; i >= 0; i--) {
  text += cars[i] + "<br>";

Prova själv

Exempel

Uteslå den sista parametern och öka värdet inom loopen:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var len = cars.length;
för (; i < len;) { 
  text += cars[i] + "<br>";
  i++;

Prova själv

Exempel

Genomför en loop genom NodeList-objektets noder och ändra bakgrundsfärgen för alla <p>-element i listan:

var myNodelist = document.getElementsByTagName("P");
var i;
för (i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.backgroundColor = "red";

Prova själv

Exempel

Exempel på nästlade loopen (loopen inom loopen):

var text = "";
var i, j;
för (i = 0; i < 3; i++) {
  text += "<br>" + "i = " + i + ", j = "; 
  för (j = 10; j < 15; j++) {
    document.getElementById("demo").innerHTML = text += j + " ";

Prova själv

Webbläsarstöd

frasen Chrome IE Firefox Safari Opera
för Stöd Stöd Stöd Stöd Stöd

Relaterade sidor

JavaScript handledagbok:JavaScript For-slinga

JavaScript referenshandbok:JavaScript for ... in-sats

JavaScript referenshandbok:JavaScript break-sats

JavaScript referenshandbok:JavaScript continue-sats

JavaScript referenshandbok:JavaScript while-sats