2015 年,JavaScript 引入了一个重要的新关键字:const
。
使用 const
声明数组已成为一种常见做法:
const cars = ["Saab", "Volvo", "BMW"];
自己尝试一下 →
<!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>
使用 const
声明的数组无法重新分配:
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>
关键字 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>
Internet Explorer 10 或更早版本不支持 const
关键字。
下表定义了完全支持 const
关键字的第一个浏览器版本:
Chrome 49 | IE 11 / Edge | Firefox 36 | Safari 10 | Opera 36 |
Mar, 2016 | Oct, 2013 | Feb, 2015 | Sep, 2016 | Mar, 2016 |
JavaScript const
变量在声明时必须赋值: <p>含义:使用 const
声明的数组在声明时必须进行初始化。
使用 const
而不初始化数组是一种语法 错误:
这是行不通的:
const cars;
cars = ["Saab", "Volvo", "BMW"];
使用 var
声明的数组可以随时初始化。
您甚至可以在声明数组之前使用该数组:
还行吧:
cars = ["Saab", "Volvo", "BMW"];
var cars;
自己尝试一下→
<!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
声明的数组具有块作用域。
在块中声明的数组与在块外声明的数组不同:
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"
自己尝试一下 →
<!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
声明的数组没有块作用域:
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"
自己尝试一下→
<!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>
您可以在“JavaScript 作用域”一章中了解有关块作用域的更多信息。
程序中的任何位置都允许重新声明使用 var
声明的数组:
var cars = ["Volvo", "BMW"]; // Allowed
var cars = ["Toyota", "BMW"]; // Allowed
cars = ["Volvo", "Saab"]; // Allowed
在相同范围内或在 同一块,不允许:
var cars = ["Volvo", "BMW"]; // Allowed
const cars = ["Volvo", "BMW"]; // Not allowed
{
var cars = ["Volvo", "BMW"]; // Allowed
const cars = ["Volvo", "BMW"]; // Not allowed
}
在相同范围内或在其中重新声明或重新分配现有 const
数组 同一块,不允许:
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
}
允许在另一个作用域或另一个块中使用 const
重新声明数组:
const cars = ["Volvo", "BMW"]; // Allowed
{
const cars = ["Volvo", "BMW"]; // Allowed
}
{
const cars = ["Volvo", "BMW"]; // Allowed
}
有关完整的数组参考,请访问我们的:
完整的 JavaScript 数组参考。
该参考包含所有数组的描述和示例 属性和方法。