JavaScript Const
ECMAScript 2015
ES2015 引入了两个重要的 JavaScript 新关键词:let 和 const。
通过 const 定义的变量与 let 变量类似,但不能重新赋值:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p>您无法更改原始值。</p>
<p id="demo">
<script>
try {
const PI = 3.141592653589793;
PI = 3.14;
}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>
块作用域
在块作用域内使用 const 声明的变量与 let 变量相似。
在本例中,x 在块中声明,不同于在块之外声明的 x:
<!DOCTYPE html>
<html>
<body>
<h2>使用 const 声明变量</h2>
<p id="demo">
<script>
var x = 10;
// 此处 x 是 10
{
const x = 2;
// 此处 x 是 2
}
// 此处 x 是 10
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
您可以在上一章 JavaScript Let 中学到更多有关块作用域的知识。
在声明时赋值
JavaScript const 变量必须在声明时赋值:
不正确
const PI;
PI = 3.14159265359;
正确
const PI = 3.14159265359;
const 不是真正的常数
关键字 const 有一定的误导性。
它没有定义常量值。它定义了对值的常量引用。
因此,我们不能更改常量原始值,但我们可以更改常量对象的属性。
原始值
如果我们将一个原始值赋给常量,我们就不能改变原始值:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p>您无法更改原始值。</p>
<p id="demo">
<script>
try {
const PI = 3.141592653589793;
PI = 3.14;
}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>
常量对象可以更改
您可以更改常量对象的属性:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p>声明常量对象不会使对象属性不可更改:</p>
<p id="demo">
<script>
// 创建对象:
const car = {type:"玛莎拉蒂", model:"总裁", color:"白色"};
// 更改属性:
car.color = "红色";
// 添加属性:
car.owner = "马斯克";
// 显示属性:
document.getElementById("demo").innerHTML = "车主是:" + car.owner;
</script>
</body>
</html>
但是您无法重新为常量对象赋值:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p>但是你不能重新赋值一个常量对象:</p>
<p id="demo">
<script>
try {
const car = {type:"玛莎拉蒂", model:"总裁", color:"white"};
car = {type:"宝马", model:"M5", color:"红色"};
}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>
常量数组可以更改
您可以更改常量数组的元素:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p>声明常量数组不会使元素不可更改:</p>
<p id="demo">
<script>
// 创建数组:
const cars = ["奥迪", "宝马", "保时捷"];
// 更改元素:
cars[0] = "丰田";
// 添加元素:
cars.push("本田");
// 显示数组:
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
但是您无法重新为常量数组赋值:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p>您无法重新赋值常量数组:</p>
<p id="demo">
<script>
try {
const cars = ["萨博", "沃尔沃", "宝马"];
cars = ["丰田", "沃尔沃", "奥迪"];
}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>
浏览器支持
Internet Explorer 10 或更早版本不支持 const 关键词。下表定义了第一个完全支持 const 关键词的浏览器版本:
关键词 | |||||
---|---|---|---|---|---|
Const | Chrome 49 | IE / Edge 11 | Firefox 36 | Safari 10 | Opera 36 |
2016 年 3 月 | 2013 年 10 月 | 2015 年 2 月 | 2016 年 9 月 | 2016 年 3 月 |
重新声明
在程序中的任何位置都允许重新声明 JavaScript var 变量:
var x = 2; // 允许
var x = 3; // 允许
x = 4; // 允许
在同一作用域或块中,不允许将已有的 var 或 let 变量重新声明或重新赋值给 const:
var x = 2; // 允许
const x = 2; // 不允许
{
let x = 2; // 允许
const x = 2; // 不允许
}
在同一作用域或块中,为已有的 const 变量重新声明声明或赋值是不允许的:
const x = 2; // 允许
const x = 3; // 不允许
x = 3; // 不允许
var x = 3; // 不允许
let x = 3; // 不允许
{
const x = 2; // 允许
const x = 3; // 不允许
x = 3; // 不允许
var x = 3; // 不允许
let x = 3; // 不允许
}
在另外的作用域或块中重新声明 const 是允许的:
const x = 2; // 允许
{
const x = 3; // 允许
}
{
const x = 4; // 允许
}