JavaScript - 变量

上一页
下一页

JavaScript 变量用于存储以后可以更改的数据。这些变量可以被视为命名容器。您可以将数据放入这些容器中，然后只需命名容器即可引用数据。

在 JavaScript 程序中使用变量之前，必须声明它。在 JavaScript 中，您可以通过 4 种方式声明变量 -

  • 不使用任何关键字。
  • 使用 'var' 关键字。
  • 使用 'let' 关键字。
  • 使用 'const' 关键字。

let 和 const 关键字于 2015 年引入 JavaScript （ES6）。在 ES6 之前，在 JavaScript 中仅使用 var 关键字来声明变量。在本节中，我们将讨论 'var' 关键字。我们将在后续章节中介绍 'let' 和 'const' 关键字。

JavaScript 中的变量声明

您可以按照以下语法声明变量，而无需使用任何关键字。


<script>
	 	Money = 10;
	 	Name = "qikepucom";
</script>

此外，您可以使用 var 关键字来声明变量，如下所示。


<script>
	 	var money;
	 	var name;
</script>

您还可以使用相同的 var 关键字声明多个变量，如下所示 -


<script>
	 	var money, name;
</script>

使用 Assignment 运算符进行变量初始化

在变量中存储值称为变量初始化。您可以在创建变量时或在以后需要该变量的时间点进行变量初始化。

例如，您可以创建一个名为 money 的变量，并在稍后为其分配值 2000.50。对于另一个变量，您可以在初始化时分配一个值，如下所示。


<script>
	 	var name = "Ali";
	 	var money;
	 	money = 2000.50;
</script>
注意 − 仅将 var 关键字用于声明或初始化，在文档中的任何变量名称的生命周期内使用一次。您不应两次重新声明相同的变量。

JavaScript 是无类型语言。这意味着 JavaScript 变量可以保存任何数据类型的值。与许多其他语言不同，在变量声明期间，你不必告诉 JavaScript 变量将保存什么类型的值。变量的值类型可以在程序执行期间更改，JavaScript 会自动处理它。

JavaScript 数据类型

在 JavaScript 中，变量可以保存 dynamic 数据类型的值。例如，您可以将 number、string、boolean、object 等数据类型值存储在 JavaScript 变量中。


<script>
	 	var num = 765; // Number
	 	var str = "Welcome"; // String
	 	var bool = false; // Boolean
</script>

您将在 JavaScript 数据类型 章节中详细学习数据类型。

JavaScript 变量名称（标识符）

在 JavaScript 中，使用唯一的字符序列来命名称为 identifiers 的变量。

以下是 JavaScript 中标识符命名的一些规则 -

  • 有效字符 − 在 JavaScript 中，变量名称可以包含数字、字母字符和特殊字符，如下划线 （_） 和美元符号 （$）。JavaScript 变量名称不应以数字 （0-9） 开头。它们必须以字母或下划线字符开头。例如，123test 是无效的变量名称，但 _123test 是有效的变量名称。
  • 区分大小写 − 变量名称区分大小写。这意味着 Name 和 name 是不同的标识符。
  • Unicode 支持 − 标识符也可以包含 Unicode。因此，开发人员可以用任何语言定义变量。
  • 保留关键字 - 您不应将任何 JavaScript 保留关键字用作变量名称。例如，break 或 boolean 变量名称无效。在这里，我们给出了 JavaScript 受人尊敬的关键字的完整列表。

JavaScript 美元符号 （$） 和低于分数 （_）

您可以使用 $ 和 _ 在 JavaScript 中定义变量，因为 JavaScript 引擎会将其视为有效字符。

示例（演示标识符）

在此示例中，我们使用 var 关键字定义了变量。第一个变量名称以下划线开头，第二个变量名称以美元符号开头。程序员可以取消注释第三个变量声明，以检查当我们以数字开头任何标识符时 JavaScript 产生的错误。


<html>
<head>
	 	 <title> Variables in JavaScript </title>
</head>
<body>
	 	<script>
	 	 	 	 var _abc = "Hi!";
	 	 	 	 var $abc = "Hello!";
	 	 	 	 // 	var 9abc = "Bye!"; 	// This is invalid
	 	 	 	 document.write("_abc " + _abc + "<br>");
	 	 	 	 document.write("$abc = " + $abc + "<br>");
	 	 </script>
</body>
</html>

它会产生以下结果 -

_abc Hi!
$abc = Hello!

JavaScript 中未定义的变量值

如果在声明后未初始化变量，则它包含 undefined 值。但是，您也可以将 undefined 值分配给变量。

让我们看看下面的示例。

例


<html>
<body>
	 	<script>
	 	 	 var num;
	 	 	 document.write("The value of num is: " + num + "<br/>");
	 	</script>
</body>
</html>

这将产生以下结果 -

The value of num is: undefined

JavaScript 变量范围

变量的作用域是定义变量的程序区域。JavaScript 变量只有两个范围。

  • 全局变量 − 全局变量具有全局范围，这意味着它可以在 JavaScript 代码中的任何位置定义。
  • 局部变量 − 局部变量仅在定义它的函数中可见。函数参数始终是该函数的本地参数。

在函数体中，局部变量优先于具有相同名称的全局变量。如果声明与全局变量同名的局部变量或函数参数，则实际上会隐藏全局变量。请看下面的例子。

例

在下面的示例中，我们在函数外部定义了名为 myVar 的变量，并使用 'global' 值对其进行初始化。此外，我们还在 checkscope（） 函数中定义了具有相同标识符的变量，并使用 'local' 值对其进行初始化。

我们在函数中打印 myVar 变量的值。因此，局部变量优先于全局变量，并在输出中打印 'local'。


<html>
<head>
	 	<title> JavaScript Variable Scope Example</title>
</head>
<body onload = checkscope();> 		
	 	<script>
		 	 	var myVar = "global"; 	 	 	// Declare a global variable
		 	 	function checkscope( ) {
		 			 	 var myVar = "local"; 	 	// Declare a local variable
		 			 	 document.write(myVar);
		 	 	}
	 	</script> 	 		
</body>
</html>

这将产生以下结果 -

local

例

在下面的示例中，我们在不使用 var 关键字的情况下定义了变量。name 变量包含 string 类型的值，number 变量包含 float 数据类型的值。

当我们在不使用任何关键字的情况下定义变量时，JavaScript 会将它们视为全局变量，并且可以在代码中的任何位置使用它们。


<html>
<head>
	 	<title> Variables without var keyword </title>
</head>
<body>
	 	<script>
	 	 	 name = "qikepucom"; // String type variable
	 	 	 number = 10.25; // Number type variable
	 	 	 document.write("name = " + name + ", number = " + number + "<br>");
	 	</script>
</body>
</html>

这将产生以下结果 -

name = qikepucom, number = 10.25

此外，如果我们使用带有值的 var 关键字声明变量，并在不初始化的情况下重新声明相同的标识符，则标识符不会丢失以前的值。让我们通过下面的示例来理解它。

例

在下面的示例中，我们声明了 age 变量并用 10 初始化它。同样，我们已经声明了 age 变量，但尚未初始化它。尽管如此，它在输出中打印 10，因为它不会丢失前一个初始化的值。但是，如果我们更新 age 变量的值，它会成功更新它。


<html>
<head>
	 	<title> Variables with var keyword </title>
</head>
<body>
	 	<script>
	 	 	 var age = 10;
	 	 	 var age;
	 	 	 document.write("age = " + age + "<br>");
	 	</script>
</body>
</html>

这将产生以下结果 -

age = 10
本页
上一页
下一页