Der Unterschied zwischen var und let in JavaScript (Codebeispiel)-js-Tutorial-php.cn

Der Unterschied zwischen var und let in JavaScript (Codebeispiel)

藏色散人

Freigeben： 2019-03-23 11:02:49

Original

3472 Leute haben es durchsucht

Sowohl var als auch let werden für die Funktionsdeklaration in JavaScript verwendet. Der Unterschied zwischen ihnen besteht darin, dass var der Funktionsbereich und let der Blockbereich ist.

Der Unterschied zwischen var und let in JavaScript (Codebeispiel)

Man kann sagen, dass im Vergleich zu let die mit var deklarierten Variablen im gesamten Programm definiert sind.

Ein Beispiel soll diesen Unterschied deutlicher veranschaulichen:

Beispiel für var:

输入:
console.log(x);
var x=5;
console.log(x);
输出:
undefined
5

Nach dem Login kopieren

Der Unterschied zwischen var und let in JavaScript (Codebeispiel)

Beispiel für let:

输入:
console.log(x);
let x=5;
console.log(x);
输出:
Error

Nach dem Login kopieren

Der Unterschied zwischen var und let in JavaScript (Codebeispiel)

Schauen wir uns den JavaScript-Code an:

Codebeispiel 1:

<html> 
  
<body> 
    <script> 
        // 定义后调用x
        var x = 5; 
        document.write(x, "\n"); 
  
        // 定义后调用y 
        let y = 10; 
        document.write(y, "\n"); 
  
        // 在定义之前调用var z将返回undefined
        document.write(z, "\n"); 
        var z = 2; 
  
        // 在定义前调用let a会产生错误
        document.write(a); 
        let a = 3; 
    </script> 
</body> 
  
</html>

Nach dem Login kopieren

Ausgabe:

Der Unterschied zwischen var und let in JavaScript (Codebeispiel)

Codebeispiel 2:

Klicken Sie im Code unten auf „Eine Funktion starten“. aufgerufen, das alle 0,5 Sekunden die Farbe beider Header ändert. Die Farbe des ersten Titels wird in einer Variablen gespeichert und der zweite Titel wird mit let deklariert.

Dann greifen Sie außerhalb des Funktionsblocks darauf zu. Var funktioniert, aber mit let deklarierte Variablen zeigen einen Fehler an, da let der Blockbereich ist.

<!DOCTYPE html>
<html>
<head>
    <title>js教程</title>
    <meta charset="UTF-8">
</head>

<body>

<h1 id="var" style="color:black;">javascript教程</h1>
<h1 id="let" style="color:black;">javascript教程</h1>
<button id="btn" onclick="colour()">Start</button>

<script type="text/javascript">
    function colour() {

        setInterval(function() {

            if (document.getElementById(&#39;var&#39;).style.color == &#39;black&#39;)
                var col1 = &#39;blue&#39;;
            else
                col1 = &#39;black&#39;;

            // 通过var设置color 1的值

            if (document.getElementById(&#39;let&#39;).style.color == &#39;black&#39;) {
                let col2 = &#39;red&#39;;
            } else {
                col2 = &#39;black&#39;;
            }

            // 通过let设置color 2的值

            document.getElementById(&#39;var&#39;).style.color = col1;

            document.getElementById(&#39;let&#39;).style.color = col2;

            // 在html中改变h1的颜色
        }, 500);

    }
</script>
</body>

</html>

Nach dem Login kopieren

Ausgabe:

Der Unterschied zwischen var und let in JavaScript (Codebeispiel)

Verwandte Empfehlungen: „Javascript-Tutorial“

In diesem Artikel geht es um JavaScript. Der Unterschied zwischen var und let wird eingeführt, ich hoffe, es wird Freunden in Not helfen!

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen var und let in JavaScript (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!