JavaScript 常量

目录

    显示目录

const 关键字是在 ES6（2015）

使用 const 定义的变量不能重新声明

使用 const 定义的变量不能重新分配

使用 const 定义的变量具有块作用域

无法重新分配

const 变量无法重新赋值：

例子

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

自己尝试一下 →

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

必须分配

JavaScript const 变量在声明时必须赋值：

正确的

const PI = 3.14159265359;

不正确

const PI;
PI = 3.14159265359;

什么时候使用 JavaScript const？

当您知道时，请始终使用 const 声明变量 该值不应更改。

声明时使用 const：

  • 一个新的数组

  • 一个新对象

  • 一个新功能

  • 一个新的正则表达式

常量对象和数组

关键字 const 有点误导。

它没有定义常量值。它定义了对值的常量引用。

因此，您不能：

  • 重新分配一个常量值

  • 重新分配常量数组

  • 重新分配常量对象

但是你可以：

  • 更改常量数组的元素

  • 改变常量对象的属性

常量数组

您可以更改常量数组的元素：

例子

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

自己尝试一下 →

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

但你不能重新分配数组：

例子

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

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

自己尝试一下→

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

常量对象

您可以更改常量对象的属性：

例子

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

自己尝试一下→

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

但你不能重新分配对象：

例子

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

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

自己尝试一下→

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

var、let 和 const 之间的区别

ScopeRedeclareReassignHoistedBinds this
varNoYesYesYesYes
letYesNoYesNoNo
constYesNoNoNoNo

什么是好的？

let 和 const 具有块范围。

let 和 const 不能重新声明。

let 和 const 使用前必须声明。

let 和 const 不绑定到this。

let 和 const 未吊装。

什么是不好？

不必声明 var。

var 被提升。

var 绑定到此。

浏览器支持

let 和 const 关键字是 Internet Explorer 11 或更早版本不支持。

下表定义了完全支持的第一个浏览器版本：

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

块范围

使用 const 声明变量类似于 let 当涉及到块范围时。

在本例中，块中声明的 x 与块外声明的 x 不同：

例子

const x = 10;
// Here x is 10

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

// Here x is 10

自己尝试一下→

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

您可以在 JavaScript 作用域一章中了解有关块作用域的更多信息。

重新申报

允许重新声明 JavaScript var 变量 程序中的任何位置：

例子

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

重新声明现有的 var 或 let 在同一范围内，不允许将变量设置为 const：

例子

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
}

不允许在同一范围内重新分配现有的 const 变量：

例子

 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
}

允许在另一个作用域或另一个块中使用 const 重新声明变量：

例子

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

吊装

使用 var 定义的变量提升到顶部 并且可以随时初始化。

含义：您可以在声明变量之前使用该变量：

例子

还行吧：

 carName = "Volvo";
  var carName;

自己尝试一下→

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

如果您想了解有关提升的更多信息，请学习 JavaScript 提升一章。 <p>用 const 定义的变量也会被提升到顶部， 但未初始化。

含义：在声明之前使用 const 变量将导致 参考错误：

例子

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

自己尝试一下→

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