JavaScript - 变量



JavaScript 变量

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

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

  • 不使用任何关键字。

  • 使用 'var' 关键字。

  • 使用 'let' 关键字。

  • 使用 'const' 关键字。

letconst 关键字是在 2015 年(ES6)引入 JavaScript 的。在 ES6 之前,只有 var 关键字用于在 JavaScript 中声明变量。在本节中,我们将讨论 'var' 关键字。我们将在后续章节中介绍 'let' 和 'const' 关键字。

JavaScript 中的变量声明

您可以按照以下语法在不使用任何关键字的情况下声明变量。

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

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

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

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

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

使用赋值运算符初始化变量

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

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

<script>
   var name = "Ali";
   var money;
   money = 2000.50;
</script>

注意 - 仅在声明或初始化时使用 var 关键字,在文档中任何变量名称的生命周期中只使用一次。您不应该重新声明同一个变量两次。

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

JavaScript 数据类型

在 JavaScript 中,变量可以保存动态数据类型的值。例如,您可以在 JavaScript 变量中存储数字、字符串、布尔值、对象等数据类型的值。

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

您将在 JavaScript 数据类型 章节中详细了解数据类型。

JavaScript 变量名(标识符)

在 JavaScript 中,一个唯一的字符序列用于命名变量,称为标识符。

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

  • 有效字符 - 在 JavaScript 中,变量名可以包含数字、字母字符和特殊字符,如下划线 (_) 和美元符号 ($)。JavaScript 变量名不能以数字 (0-9) 开头。它们必须以字母或下划线字符开头。例如,123test 是无效的变量名,但 _123test 是有效的变量名。

  • 区分大小写 - 变量名区分大小写。这意味着 Namename 是不同的标识符。

  • Unicode 支持 - 标识符还可以包含 Unicode。因此,开发人员可以使用任何语言定义变量。

  • 保留关键字 - 您不应使用任何 JavaScript 保留关键字作为变量名。例如,breakboolean 变量名无效。在这里,我们提供了 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 中的未定义变量值

当你在声明变量后没有初始化它时,它包含未定义的值。但是,你也可以将未定义的值赋给变量。

让我们看看下面的例子。

示例

<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变量包含字符串类型的值,number变量包含浮点数据类型的值。

当我们定义变量而不使用任何关键字时,JavaScript 将它们视为全局变量,并且可以在代码中的任何地方使用它们。

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

这产生以下结果:

name = tutorialspoint, 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
广告