JavaScript 中有常量吗?
是的,JavaScript 中有常量。我们使用关键字 const 表示常量。const 的值保持不变;您不能更改并再次声明它。使用 const 声明创建只读引用。
ES6 中引入了 const。在 ES6 之前,我们过去只使用 var 关键字声明变量。后来,引入了 let 和 const。现在,我们将详细了解 const。
const value = "some-value";
使用 const,您可以声明具有块作用域而不是函数作用域的局部变量。假设我们有一个常量变量 a。在声明一个值(如常量变量)后,您不能为其分配新值
// 将"a"声明为常量变量。 const a = 150; // 为"a"分配新值将失败,因为"a"是常量 变量 a= 0; a++; // 以下声明不起作用 var a = 0;
常量是块作用域的,与使用 const 关键字声明的变量非常相似。常量不能通过分配来更改,也不能再次声明。但是,如果我们将数组和对象作为常量,我们可以修改和删除元素,但不能再次声明它们。
示例 1
我们可以用大写字母开头变量名,也可以用小写字母开头 const。
<!DOCTYPE html> <html> <body> <h2>Const</h2> <p id="demo"></p> <script> const num = 34; document.getElementById("demo").innerHTML = num; </script> </body> </html>
Const 值无法重新赋值
我们无法将常量重新赋值给新值。当我们尝试重新赋值时,它会抛出一个错误。让我们看一个例子
示例 2
在下面的例子中,我们尝试重新赋值一个 const 值。看看输出是什么样子的。
<!DOCTYPE html> <html> <body> <h2>Reassigning const Value</h2> <p id="demo"></p> <script> try{ const num = 34; num = 35; document.getElementById("demo").innerHTML =num; } catch(e){ document.getElementById("demo").innerHTML =e; } </script> </body> </html>
如我们所见,每当我们尝试重新分配一个常量时,它都会抛出 TypeError。
必须赋值
声明常量时必须为其赋值。否则,它将抛出错误。
错误的赋值方式 −
const num; num = 35;
正确的赋值方式 −
const num = 35
示例 3
让我们看看下面的例子。它将通过语法错误,因为 num 被声明为 const 变量但未赋值。
<!DOCTYPE html> <html> <body> <h2>Must be assigned</h2> <p id="demo"></p> <script> const num; num = 35; document.getElementById("demo").innerHTML = num; </script> </body> </html>
Uncaught SyntaxError: Missing initializer in const
这里我们可以看到,如果我们在声明时没有赋值,它将抛出 SyntaxError。
JavaScript 中没有 Const 提升
使用 var 关键字进行提升是将声明移到顶部。即,我们可以在定义变量之前使用它。
让我们使用 const 关键字检查提升。
示例 4
<html> <body> <h2>JavaScript Hoisting</h2> <p id="demo"></p> <script> try{ num; const num = 23; document.getElementById("demo").innerHTML = num; } catch(e){ document.getElementById("demo").innerHTML = e; } </script> </body> </html>
使用 const,我们不能在声明变量之前使用它。如果我们尝试这样做,它会抛出 ReferenceError。
const 的块作用域
检查 const 的块作用域很重要。当进入块作用域时,对于 let 和 const,声明是相同的。让我们看看
示例 5
<!DOCTYPE html> <html> <body> <h2>Block scope</h2> <p id="demo1"></p> <p id="demo2"></p> <script> const value = 10;{ const value = 20; document.getElementById("demo1").innerHTML = "Inside Block:" + value; } document.getElementById("demo2").innerHTML = "Outsite Block:" + value; </script> </body> </html>
让我们看看块作用域的另一个示例。
示例 6
<html> <body> <h2>Block scope</h2> <p id="result1"></p> <p id="result2"></p> <p id="error"></p> <script> try{ const value1 = 10;{ const value2 = 20; document.getElementById("result1").innerHTML = value1 } document.getElementById("result2").innerHTML = value1 + value2; } catch(e){ document.getElementById("error").innerHTML = e } </script> </body> </html>
在这里,我们无法在块外访问 value2。每当我们尝试访问块范围之外的变量时,它都会抛出 ReferenceError。
常量数组
我们可以修改和向 const 数组添加元素。但是,我们不能重新分配它。让我们看一个例子
示例 7
<!DOCTYPE html> <html> <body> <h2>Constant array</h2> <p id="demo"></p> <script> const arr = [1,2,3,4,5]; arr.push(6); arr[0] = 0; document.getElementById("demo").innerHTML = arr; </script> </body> </html>
现在,我们将检查重新分配数组
示例 8
<html> <body> <h2>Constant array</h2> <p id="demo"></p> <script> try { const arr = [1, 2, 3, 4, 5]; arr = [0, 1, 2, 3, 4] document.getElementById("demo").innerHTML = arr; } catch (e) { document.getElementById("demo").innerHTML = e; } </script> </body> </html>
如果我们尝试重新分配一个数组,它会抛出 TypeError。
常量对象
我们可以更改和添加对象的属性。但是,我们不能重新分配它。让我们看一个例子
示例 9
<html> <body> <h2>Constant object</h2> <p id="demo"></p> <script> const obj = { id: 1, name: "Tara", gender: "female", age: 25 }; obj.age = 26; obj.designation="Web developer"; document.getElementById("demo").innerHTML = obj.name + " is " + obj.age + " years old and working as " + obj.designation; </script> </body> </html>
现在,我们将使用一个重新分配对象的示例。
示例
<html> <body> <h2>Constant object</h2> <p id="demo"></p> <script> try { const obj = { id: 1, name: "Tara", gender: "female", age: 25 }; obj = { id: 1, name: "Tara", gender: "female", age: 26, designation: "Web developer" }; document.getElementById("demo").innerHTML = obj.name + " is " + obj.age + " old and working as " + obj.designation; } catch (e) { document.getElementById("demo").innerHTML = e; } </script> </body> </html>
现在我们可以看到,每当我们尝试重新分配一个对象时,它都会抛出 TypeError。
我们已经了解了使用 const 的所有功能。希望本教程能够阐明 JavaScript 中的常量。