如何在 JavaScript 中使用"const"关键字?
我们在 JavaScript 中使用 const 关键字来声明变量,这些变量的值只能在声明时初始化。它与 JavaScript 中提供的其他关键字(即 var 和 let)声明变量的功能类似。const 是常量的缩写,这意味着变量中的值是不可更改的。
JavaScript 中的 const 关键字
它用于在 JavaScript 中声明变量。使用 const 创建的变量遵循某些规则。
变量是块作用域。这意味着变量的作用域(生命周期)取决于声明它的位置。这遵循与 let 关键字相同的作用域规则。
const 变量的值应仅在声明时提供。这是因为一旦声明,存储在 const 变量中的值就无法更改。
但是,使用 const 关键字声明的数组或对象可以修改。
在初始化之前修改或访问 const 变量的任何尝试都会导致 引用错误。如果声明行尚未执行,则该变量被称为处于 暂时死区 (TDZ)。此行为不同于 var 关键字。
const 关键字对变量具有只读权限。这意味着,在底层,变量而不是存储在该变量中的值被限制为不能改变。由于没有对变量的写入权限,任何写入变量的尝试都会引发错误。
语法
const NUM = 10;
这将创建一个常量变量 NUM,其值为 10。注意,将 const 变量写成大写是一种常见的惯例。这是为了强调变量是常量,不应被修改。
让我们通过一个例子来了解 const 关键字的工作原理。
示例 1
在这里,我们将创建一个 const 变量,然后尝试更改其值。这将引发错误"赋值给常量变量",我们将使用 try-catch 块来处理该错误。
让我们看看相同的代码。
<!DOCTYPE html> <html> <body> <div id="result"></div> </body> <script> const NUM = 10; var text = ""; for (let NUM = 0; NUM < 10; NUM++) { text += NUM + ","; } text += "<br>" try { NUM = 20; } catch (err) { text += err.message; } document.getElementById("result").innerHTML = text; </script> </html>
在上面的代码中,有两件主要的事情需要注意。一是 const 变量的块作用域性质。这让我们可以使用相同的名称 NUM 定义另一个变量而不会发生任何冲突。这是因为 let 创建了块作用域变量。因此 for 循环内的 NUM 是一个非常量变量,具有与 const 变量相同的标识符名称。循环内创建的 NUM 独立于 const 变量,后者是全局作用域的,因为它是在每个块之外声明的。
第二件需要注意的事情是当我们尝试重新初始化 const 变量 NUM 的值时抛出的错误。这符合 const 的工作方式。
请注意,如果我们尝试使用 var 关键字声明与 const 变量同名的变量,则会抛出错误,因为使用 var 关键字声明的变量具有全局作用域,这会产生冲突。
另请注意,如果我们尝试声明一个变量而不对其进行初始化,则会抛出"const 声明中缺少初始化程序"错误。
const 关键字经常用于声明数组和对象。这是因为它不允许重新分配对象变量,但同时允许灵活地修改对象的属性。
以下是如何在 JavaScript 中将 const 关键字与对象一起使用的示例。
示例 2
在这里,我们将使用 const 关键字创建一个具有两个属性 name 和 age 的对象。然后我们尝试修改 age 属性。这会很有效,因为我们处理的是对象而不是原始变量。让我们看看相同的代码。
<!DOCTYPE html> <html> <body> <div id="result"></div> </body> <script> var text = ""; const student = { name : "Jane Doe", age : 27 } student.age = 29; text += student.name + "<br>"; text += student.age + "<br>"; document.getElementById("result").innerHTML = text; </script> </html>
在上面的代码中,从输出中也可以看出,age 属性可以成功修改。
结论
const 关键字对于防止不需要的用户更改变量以及跟踪在程序执行过程中保持不变的值有很大帮助。