JavaScript 中有常量吗?

javascriptweb developmentfront end technology

是的,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 中的常量。


相关文章