JavaScript-Konst


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Das Schlüsselwort const wurde eingeführt ES6 (2015)

Mit const definierte Variablen können nicht neu deklariert werden

Mit const definierte Variablen können nicht neu zugewiesen werden

Mit const definierte Variablen haben einen Blockbereich

Kann nicht neu zugewiesen werden

Eine const-Variable kann nicht neu zugewiesen werden:

Beispiel

const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p id="demo"></p>

<script>
try {
  const PI = 3.141592653589793;
  PI = 3.14;
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

Muss zugewiesen werden

JavaScript-const-Variablen muss bei der Deklaration ein Wert zugewiesen werden:

Richtig

const PI = 3.14159265359;

Falsch

const PI;
PI = 3.14159265359;

Wann sollte JavaScript const verwendet werden?

Deklarieren Sie eine Variable immer mit const, wenn Sie das wissen Der Wert sollte nicht geändert werden.

Verwenden Sie const, wenn Sie Folgendes deklarieren:

  • Ein neues Array

  • Ein neues Objekt

  • Eine neue Funktion

  • Ein neuer RegExp


Konstante Objekte und Arrays

Das Schlüsselwort const ist etwas irreführend.

Es definiert keinen konstanten Wert. Es definiert einen konstanten Verweis auf einen Wert.

Aus diesem Grund können Sie NICHT:

  • Weisen Sie einen konstanten Wert neu zu

  • Weisen Sie ein konstantes Array neu zu

  • Weisen Sie ein konstantes Objekt neu zu

Doch kannst du:

  • Ändern Sie die Elemente des konstanten Arrays

  • Ändern Sie die Eigenschaften eines konstanten Objekts


Konstante Arrays

Sie können die Elemente eines konstanten Arrays ändern:

Beispiel

// You can create a constant array:
const cars = ["Saab", "Volvo", "BMW"];

// You can change an element:
cars[0] = "Toyota";

// You can add an element:
cars.push("Audi");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>Declaring a constant array does NOT make the elements unchangeable:</p>

<p id="demo"></p>

<script>
// Create an Array:
const cars = ["Saab", "Volvo", "BMW"];

// Change an element:
cars[0] = "Toyota";

// Add an element:
cars.push("Audi");

// Display the Array:
document.getElementById("demo").innerHTML = cars; 
</script>

</body>
</html>

Sie können das Array jedoch NICHT neu zuweisen:

Beispiel

const cars = ["Saab", "Volvo", "BMW"];

cars = ["Toyota", "Volvo", "Audi"];    // ERROR

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>You can NOT reassign a constant array:</p>

<p id="demo"></p>

<script>
try {
  const cars = ["Saab", "Volvo", "BMW"];
  cars = ["Toyota", "Volvo", "Audi"];
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

Konstante Objekte

Sie können die Eigenschaften eines konstanten Objekts ändern:

Beispiel

// You can create a const object:
const car = {type:"Fiat", model:"500", color:"white"};

// You can change a property:
car.color = "red";

// You can add a property:
car.owner = "Johnson";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>Declaring a constant object does NOT make the objects properties unchangeable:</p>

<p id="demo"></p>

<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};

// Change a property:
car.color = "red";

// Add a property:
car.owner = "Johnson";

// Display the property:
document.getElementById("demo").innerHTML = "Car owner is " + car.owner; 
</script>

</body>
</html>

Sie können das Objekt jedoch NICHT neu zuweisen:

Beispiel

const car = {type:"Fiat", model:"500", color:"white"};

car = {type:"Volvo", model:"EX60", color:"red"};    // 
  ERROR

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>You can NOT reassign a constant object:</p>

<p id="demo"></p>

<script>
try {
  const car = {type:"Fiat", model:"500", color:"white"};
  car = {type:"Volvo", model:"EX60", color:"red"};
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

Unterschied zwischen var, let und const

ScopeRedeclareReassignHoistedBinds this
varNoYesYesYesYes
letYesNoYesNoNo
constYesNoNoNoNo

Was ist gut?

let und const haben Blockbereich.

let und const kann nicht neu deklariert werden.

let und const müssen vor der Verwendung deklariert werden.

let und const bindet nicht an dies.

let und const werden nicht angehoben.

Was ist nicht gut?

var muss nicht deklariert werden.

var wird gehisst.

var bindet daran.


Browser-Unterstützung

Die Schlüsselwörter let und const sind Wird in Internet Explorer 11 oder früher nicht unterstützt.

Die folgende Tabelle definiert die ersten Browserversionen mit vollständiger Unterstützung:

Chrome 49 Edge 12 Firefox 36 Safari 11 Opera 36
Mar, 2016 Jul, 2015 Jan, 2015 Sep, 2017 Mar, 2016


Blockumfang

Das Deklarieren einer Variablen mit const ähnelt dem Deklarieren von let wenn es um Block Scope geht.

Das im Block deklarierte x ist in diesem Beispiel nicht dasselbe wie das außerhalb des Blocks deklarierte x:

Beispiel

const x = 10;
// Here x is 10

{ 
const x = 2;
// Here x is 2
}

// Here x is 10

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScropt const variables has block scope</h2>

<p id="demo"></p>

<script>
const  x = 10;
// Here x is 10

{  
const x = 2;
// Here x is 2
}

// Here x is 10
document.getElementById("demo").innerHTML = "x is " + x;
</script>

</body>
</html>


Weitere Informationen zum Blockbereich finden Sie im Kapitel JavaScript-Bereich.


Neu deklarieren

Das erneute Deklarieren einer JavaScript-var-Variable ist zulässig irgendwo in einem Programm:

Beispiel

var x = 2;     // Allowed
var x = 3;     // Allowed
  x = 4;         // Allowed

Neudeklaration einer vorhandenen var oder let Variable für const im selben Bereich ist nicht zulässig:

Beispiel

var x = 2;     // Allowed
const x = 2;   // Not allowed

{
let x = 2;     // Allowed
const x = 2;   // Not allowed
}

{
const x = 2;   // Allowed
const x = 2;   // Not allowed
}
  

Das Neuzuweisen einer vorhandenen const-Variable im selben Bereich ist nicht zulässig:

Beispiel

 const x = 2;     // Allowed
  x = 2;           // Not allowed
  var x = 2;       // Not allowed
  let x = 2;       // Not allowed
  const x = 2;     // Not allowed
  
{	  const x = 2;   // Allowed
  x = 2;         
  // Not allowed
  var x = 2;     
  // Not allowed
  let x = 2;     
  // Not allowed
   
  const x = 2;   // Not allowed
}
  

Das erneute Deklarieren einer Variablen mit const, in einem anderen Bereich oder in einem anderen Block ist zulässig:

Beispiel

 const x = 2;       // Allowed
{	  const x = 3;   // Allowed
  }
  
  {
  const x = 4;   // Allowed
  }

Heben

Mit var definierte Variablen werden nach oben angehoben und kann jederzeit initialisiert werden.

Bedeutung: Sie können die Variable verwenden, bevor sie deklariert wird:

Beispiel

Das ist in Ordnung:

 carName = "Volvo";
  var carName;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>

<p>With <b>var</b>, you can use a variable before it is declared:</p>

<p id="demo"></p>

<script>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>

</body>
</html>

Wenn Sie mehr über das Heben erfahren möchten, lesen Sie das Kapitel JavaScript-Heben. <p>Variablen, die mit const definiert sind, werden ebenfalls nach oben gehoben. aber nicht initialisiert.

Bedeutung: Die Verwendung einer const-Variable vor ihrer Deklaration führt zu einem ReferenceError:

Beispiel

alert (carName);
const carName = "Volvo";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>
<p>With <b>const</b>, you cannot use a variable before it is declared:</p>
<p id="demo"></p>

<script>

try {
  alert(carName);
  const carName = "Volvo";
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}

</script>
</body>
</html>