JavaScript Const


ECMAScript 2015

ES2015 引入了两个重要的 JavaScript 新关键词:letconst

通过 const 定义的变量与 let 变量类似,但不能重新赋值:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript const</h2>
  5. <p>您无法更改原始值。</p>
  6. <p id="demo">
  7. <script>
  8. try {
  9. const PI = 3.141592653589793;
  10. PI = 3.14;
  11. }
  12. catch (err) {
  13. document.getElementById("demo").innerHTML = err;
  14. }
  15. </script>
  16. </body>
  17. </html>

块作用域

块作用域内使用 const 声明的变量与 let 变量相似。

在本例中,x 在块中声明,不同于在块之外声明的 x:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>使用 const 声明变量</h2>
  5. <p id="demo">
  6. <script>
  7. var x = 10;
  8. // 此处 x 是 10
  9. {
  10. const x = 2;
  11. // 此处 x 是 2
  12. }
  13. // 此处 x 是 10
  14. document.getElementById("demo").innerHTML = x;
  15. </script>
  16. </body>
  17. </html>

您可以在上一章 JavaScript Let 中学到更多有关块作用域的知识。


在声明时赋值

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

不正确
  1. const PI;
  2. PI = 3.14159265359;
正确
  1. const PI = 3.14159265359;

const 不是真正的常数

关键字 const 有一定的误导性。

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

因此,我们不能更改常量原始值,但我们可以更改常量对象的属性。


原始值

如果我们将一个原始值赋给常量,我们就不能改变原始值:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript const</h2>
  5. <p>您无法更改原始值。</p>
  6. <p id="demo">
  7. <script>
  8. try {
  9. const PI = 3.141592653589793;
  10. PI = 3.14;
  11. }
  12. catch (err) {
  13. document.getElementById("demo").innerHTML = err;
  14. }
  15. </script>
  16. </body>
  17. </html>

常量对象可以更改

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript const</h2>
  5. <p>声明常量对象不会使对象属性不可更改:</p>
  6. <p id="demo">
  7. <script>
  8. // 创建对象:
  9. const car = {type:"玛莎拉蒂", model:"总裁", color:"白色"};
  10. // 更改属性:
  11. car.color = "红色";
  12. // 添加属性:
  13. car.owner = "马斯克";
  14. // 显示属性:
  15. document.getElementById("demo").innerHTML = "车主是:" + car.owner;
  16. </script>
  17. </body>
  18. </html>

但是您无法重新为常量对象赋值:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript const</h2>
  5. <p>但是你不能重新赋值一个常量对象:</p>
  6. <p id="demo">
  7. <script>
  8. try {
  9. const car = {type:"玛莎拉蒂", model:"总裁", color:"white"};
  10. car = {type:"宝马", model:"M5", color:"红色"};
  11. }
  12. catch (err) {
  13. document.getElementById("demo").innerHTML = err;
  14. }
  15. </script>
  16. </body>
  17. </html>

常量数组可以更改

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript const</h2>
  5. <p>声明常量数组不会使元素不可更改:</p>
  6. <p id="demo">
  7. <script>
  8. // 创建数组:
  9. const cars = ["奥迪", "宝马", "保时捷"];
  10. // 更改元素:
  11. cars[0] = "丰田";
  12. // 添加元素:
  13. cars.push("本田");
  14. // 显示数组:
  15. document.getElementById("demo").innerHTML = cars;
  16. </script>
  17. </body>
  18. </html>

但是您无法重新为常量数组赋值:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript const</h2>
  5. <p>您无法重新赋值常量数组:</p>
  6. <p id="demo">
  7. <script>
  8. try {
  9. const cars = ["萨博", "沃尔沃", "宝马"];
  10. cars = ["丰田", "沃尔沃", "奥迪"];
  11. }
  12. catch (err) {
  13. document.getElementById("demo").innerHTML = err;
  14. }
  15. </script>
  16. </body>
  17. </html>

浏览器支持

Internet Explorer 10 或更早版本不支持 const 关键词。下表定义了第一个完全支持 const 关键词的浏览器版本:

关键词
ConstChrome 49IE / Edge 11Firefox 36Safari 10Opera 36
2016 年 3 月2013 年 10 月2015 年 2 月2016 年 9 月2016 年 3 月

重新声明

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

  1. var x = 2; // 允许
  2. var x = 3; // 允许
  3. x = 4; // 允许

在同一作用域或块中,不允许将已有的 varlet 变量重新声明或重新赋值给 const

  1. var x = 2; // 允许
  2. const x = 2; // 不允许
  3. {
  4. let x = 2; // 允许
  5. const x = 2; // 不允许
  6. }

在同一作用域或块中,为已有的 const 变量重新声明声明或赋值是不允许的:

  1. const x = 2; // 允许
  2. const x = 3; // 不允许
  3. x = 3; // 不允许
  4. var x = 3; // 不允许
  5. let x = 3; // 不允许
  6. {
  7. const x = 2; // 允许
  8. const x = 3; // 不允许
  9. x = 3; // 不允许
  10. var x = 3; // 不允许
  11. let x = 3; // 不允许
  12. }

在另外的作用域或块中重新声明 const 是允许的:

  1. const x = 2; // 允许
  2. {
  3. const x = 3; // 允许
  4. }
  5. {
  6. const x = 4; // 允许
  7. }