JavaScript const


Sisällysluettelo

    Näytä sisällysluettelo


ECMAScript 2015 (ES6)

Vuonna 2015 JavaScript esitteli tärkeän uuden avainsanan: const.

On tullut yleinen käytäntö ilmoittaa taulukoita käyttämällä const:ta:

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>
<p id="demo"></p>

<script>

const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

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

Ei voida määrittää uudelleen

const:lla ilmoitettua taulukkoa ei voi määrittää uudelleen:

Esimerkki

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

Kokeile itse →

<!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>

Taulukot eivät ole vakioita

Avainsana const on hieman harhaanjohtava.

Se EI määritä vakiotaulukkoa. Se määrittää jatkuvan viittauksen taulukkoon.

Tästä johtuen voimme silti muuttaa vakiotaulukon elementtejä.


Elementit voidaan määrittää uudelleen

Voit muuttaa vakiotaulukon elementtejä:

Esimerkki

// 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");

Kokeile itse →

<!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>

Selaimen tuki

Avainsanaa const ei tueta Internet Explorer 10:ssä tai aiemmissa versioissa.

Seuraavassa taulukossa määritellään ensimmäiset selainversiot, jotka tukevat täysin avainsanaa const:

Chrome 49 IE 11 / Edge Firefox 36 Safari 10 Opera 36
Mar, 2016 Oct, 2013 Feb, 2015 Sep, 2016 Mar, 2016

Määritetty, kun se on ilmoitettu

JavaScript const-muuttujille on annettava arvo, kun ne ilmoitetaan: <p>Merkitys: const:lla ilmoitettu matriisi on alustettava, kun se ilmoitetaan.

const:n käyttäminen taulukon alustamatta on syntaksi virhe:

Esimerkki

Tämä ei toimi:

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

var:lla määritetyt taulukot voidaan alustaa milloin tahansa.

Voit jopa käyttää taulukkoa ennen kuin se on ilmoitettu:

Esimerkki

Tämä on ok:

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

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>JavaScript Hoisting</h2>

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

<script>

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

document.getElementById("demo").innerHTML = cars[0];

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

Const Block Scope

const:lla määritetyllä taulukolla on Block Scope.

Lohkossa ilmoitettu matriisi ei ole sama kuin lohkon ulkopuolella ilmoitettu matriisi:

Esimerkki

const cars = ["Saab", "Volvo", "BMW"];
// Here cars[0] is "Saab"
{
  const cars = ["Toyota", "Volvo", "BMW"];
 
  // Here cars[0] is "Toyota"
}
// Here cars[0] is "Saab"

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Declaring an Array Using const</h2>

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

<script>
const cars = ["Saab", "Volvo", "BMW"];
// Here cars[0] is "Saab"
{  
  const cars = ["Toyota", "Volvo", "BMW"]; 
  // Here cars[0] is "Toyota"
}
// Here cars[0] is "Saab"
document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

var:lla määritetyllä taulukolla ei ole lohkon laajuutta:

Esimerkki

var cars = ["Saab", "Volvo", "BMW"];
// Here cars[0] is "Saab"
{
  var cars = ["Toyota", "Volvo", "BMW"];
 
  // Here cars[0] is "Toyota"
}
// Here cars[0] is "Toyota"

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>Declaring an Array Using var</h2>

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

<script>
var cars = ["Saab", "Volvo", "BMW"];
// Here cars[0] is "Saab"
{  
  var cars = ["Toyota", "Volvo", "BMW"]; 
  // Here cars[0] is "Toyota"
}
// Here cars[0] is "Toyota"
document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Voit oppia lisää Block Scope -luvusta: JavaScript Scope.



Arrayiden uudelleenilmoittaminen

var:lla määritetyn taulukon uudelleenmäärittely on sallittu kaikkialla ohjelmassa:

Esimerkki

var cars = ["Volvo", "BMW"];   // Allowed
var cars = ["Toyota", "BMW"];  // Allowed
cars = ["Volvo", "Saab"];      // Allowed

Taulukon uudelleen ilmoittaminen tai määrittäminen const:lle, samassa laajuudessa tai sama lohko, ei ole sallittu:

Esimerkki

var cars = ["Volvo", "BMW"];     // Allowed
const cars = ["Volvo", "BMW"];   // Not allowed
{
  var cars = ["Volvo", "BMW"];   // Allowed
  const cars = ["Volvo", "BMW"]; // Not allowed
}

Olemassa olevan const-taulukon uudelleen ilmoittaminen tai määrittäminen uudelleen, samassa laajuudessa tai sama lohko, ei ole sallittu:

Esimerkki

const cars = ["Volvo", "BMW"];   // Allowed
const cars = ["Volvo", "BMW"];   // Not allowed
var cars = ["Volvo", "BMW"];     // Not allowed
cars = ["Volvo", "BMW"];         // Not allowed

{
  const cars = ["Volvo", "BMW"]; // Allowed
  const cars = ["Volvo", "BMW"]; // Not allowed
  var cars = ["Volvo", "BMW"];   // Not allowed
  cars = ["Volvo", "BMW"];       // Not allowed
}

Matriisin uudelleenmäärittäminen const:lla toisessa laajuudessa tai toisessa lohkossa on sallittua:

Esimerkki

const cars = ["Volvo", "BMW"];   // Allowed
{
  const cars = ["Volvo", "BMW"]; // Allowed
}
{
  const cars = ["Volvo", "BMW"]; // Allowed
}

Täydellinen Array Reference

Täydellisen Array-viitteen saat osoitteesta:

Täydellinen JavaScript-taulukon viite.

Viite sisältää kuvauksia ja esimerkkejä kaikista Arrayista ominaisuuksia ja menetelmiä.