JavaScript 变量

编程就是操纵和显示数据，这些数据可以是计算机程序中使用的任何类型的信息，例如社交媒体用户名、年龄和个人资料照片。为了处理这些数据并创造有趣的东西，程序员需要一种方法来存储和跟踪它。这就是变量概念的用武之地。

变量在几乎所有编程语言中都是一个基本概念，关于它有很多需要了解和理解的地方。对我们来说，对这些与变量相关的概念有一个清晰而深刻的理解是很重要的。

在这篇文章中，我们将从初学者的角度探讨几乎所有与编程变量相关的概念。我们将保持简单易懂，并使用示例来探索一切。

即使您是编程新手并且对 JavaScript 没有太多了解，您也可以理解我们涵盖的所有概念。

所以，让我们开始吧！

JavaScript 中的变量

在 JavaScript 中，变量是对内存位置的命名引用，可以保存不同类型的数据，例如数字、字符串、布尔值、对象或函数。要访问或修改存储在变量中的数据，我们使用其名称。

这有点令人困惑，对吧？

让我们看一下计算机内存。

如果你对计算机内存有基本的了解，那么你一定知道计算机内存上有数百万个单元格，每个单元格都有自己的地址。

 

计算机内存：Javascript中的变量初学者思维

在我们的程序中，如果我们想存储值以便稍后在整个程序中访问它，我们必须将其保存在计算机内存中的某个位置，并且我们需要一种方法来在需要时调用该值。在将数据存储在内存中后，我们本可以使用内存地址来完成此操作。
问题是我们不能直接在我们的程序中使用此地址。因为你知道计算机在二进制系统中工作，而在二进制系统中，这个内存地址看起来太奇怪和混乱了。此外，几乎不可能记住。

这里变量可以解决这个问题。

变量为我们提供了最简单的解决方案来处理它。我们可以简单地创建一个变量并将其分配给我们要存储的值。我们不需要记住奇怪和混乱的记忆地址;我们可以使用简单且人类可读的名称来做同样的事情。

当我们创建一个变量并为其赋值时，在 since 后面，编译器和解释器将数据存储在内存中，并将变量的符号名称替换为实际数据位置/内存地址。

 

在计算机内存单元中赋值：JavaScript 中的变量初学者思维

注意：在实际场景中，内存分配并不像我在这里讨论的那么简单。此外，在 JavaScript 中将基元类型和引用类型值分配给变量时，它们的处理方式也不同。但是对于这篇文章，我避免了高级的东西，并保持简单，这样你就可以全面了解幕后是如何运作的。

如果您仍然对它感到困惑，只需将变量视为保存信息的命名容器，并且只需命名容器即可引用数据。

这意味着：

• 创建变量。
• 为变量指定标准名称。
• 为其赋值。

可以将这些步骤视为：

• 拿一个容器
• 标记它
• 在这个容器里放一些东西。

 

变量作为容器：JavaScrip t 中的变量初学者思维

注意：JavaScript 变量是一个容器，而不是一个值，这意味着变量本身不是值;它们是值的命名容器。

声明变量

在 JavaScript 程序中使用变量之前，必须创建它;我们称之为声明变量。

我们可以使用 或 'let' 声明一个 JavaScript 变量：var

JavaScript
1

var name; 

2

let age;

 

在这里，我们创建了两个变量，一个使用“var”，一个使用“let”。

Var 和 let 是告诉 JavaScript 你正在声明一个变量的关键字。

名称和年龄是这些变量的名称。

在 JavaScript 中，分号（;)是完全可选的（当然，除非您希望在一行中包含多个语句）。（类似于英语中的句号（.）。

注意：虽然分号（;)在 JavaScript 中是可选的，有许多语言其中分号（;)是一个重要因素。在这些语言中，您必须使用分号结束该行，否则您的程序将出现错误。

您还可以使用相同或“let”关键字声明多个变量：var

JavaScript
1

var name, age;

2

let birthYear, address;

在 JavaScript 中还有另一个关键字来声明变量，即 const。这用于在 JavaScript 中声明常量变量。

JavaScript
1

const  Pi = 3.1416

我们将在任何其他博客中讨论这一点。

命名变量

不仅在 JavaScript 中，而且在所有其他语言中，变量必须按照一些规则和规定用唯一的名称来标识。这些唯一名称称为标识符。这些标识符或名称可以简短（如a，“b”和“c”）或更具描述性（“年龄”，“名称”，“用户名”）。

变量名规则

当我们为变量选择名称（唯一标识符）时，需要遵循一些一般规则。

以下是规则：

• 名称可以包含字母、数字（0-9）、下划线“_”、“和美元符号”$“，但不允许在变量名称中使用空格和特殊符号/标点字符（如 @、！ # 等）。

注意：在 JavaScript 中，“_”和“$”就像字母一样。它们没有任何特殊意义。

• 变量名称必须以字母、下划线“_”、“或美元符号开头。不允许使用数字 （0-9） 创建变量名称。$
• JavaScript 名称/标识符区分大小写（名为“apple”和“APPLE”的变量是两个不同的变量）。
• 有一些保留字不能用作程序中的变量名称，因为它们是由语言本身使用的。

For example: let, var, for, and function are reserved.

下面的代码给出了一个未捕获的语法错误：

JavaScript
1

let var = 5;   //  Uncaught SyntaxError: Unexpected token 'var'

2

let function = 5; // Uncaught SyntaxError: Unexpected token 'function'

 

• 在 JavaScript 中，当变量名包含多个单词时，一般用 camelCase 编写。

也就是说：单词一个接一个，除了第一个单词之外，每个单词都以大写字母开头。

For example, firstName, lastName, birthYear, etc.

• 可以在变量名称中使用几乎任何语言，但不建议使用。我们应该在变量名称中使用英语，即使我们正在编写一个小脚本。这样，如果其他国家的人需要阅读它，他们就可以阅读它。因为我们将为全球开发人员编写代码，而不仅仅是为我们的地区编写代码。

以下是一些有效和无效的变量名称：

JavaScript
1

// Example of valid variables names

2

let camelCased         //  first word is lowercase any additional word starts with an uppercase letter

3

let here2num                  // number in the middle, but not starting with numbers

4

let JAVASCRIPT_IN_UPPERCASE       // uppercase letters with underscores

5

let _Javascript_              //start and end with an underscore, with letters in the middle

6

let $_$                       // dollar signs and underscores

7

let $_foo3                // mix the dollar sign, underscores, letters and numbers

8

let _12foo           //start with underscores and contain numbers and letters

9

let _                 //   contains only underscore

10

let $             // contain only a dollar sign

11

​

12

​

13

// Example of invalid variables names

14

​

15

let random%         //  Don't use the percentage symbol

16

let 11years           //  Don't start with number(s)

17

let some-let      //  Don't use dashes

18

let one variable   //  Don't use spaces

19

let function           //  Don't use reserved keywords

 

命名变量良好做法

给变量起一个好名字是编程中最重要和最复杂的技能之一。正确的描述性变量名称可以在观众眼中为程序员留下良好的印象。

在实际项目中，大多数时候，程序员花费在修改和扩展现有代码库上，而不是编写全新的东西。当我们在执行其他操作一段时间或很长一段时间后返回代码时，对于那些标记良好的代码，回到流中要容易得多。或者，换句话说，当变量已使用良好名称声明时。

因此，请在声明变量时花时间考虑正确的名称。这样做将使您将来受益。

• 尽管变量名称可以以您想要的任何方式创建，但最好使用人类可读的、明显的含义和最大程度的描述性（变量引用的值）。如果我们将一个变量命名为“user”，那么我们应该将相关变量命名为currentUser或newUser。
• 远离 a、b 和 c 等短名称。这些类型的短名称很容易键入。但这些仅在小程序中有用。当你在一个大项目上工作时，会忘记这些名字的上下文。

注意：虽然变量名称的长度没有限制，并且长度几乎不受限制，但应避免创建过长的变量名称。较短的变量名称有助于 JavaScript 引擎更快地执行程序。

• 由于 JavaScript 区分大小写，Apple 和 Apple 是两个不同的标识符。但是我们不应该在我们的程序中同时使用它们。因为从长远来看，这会产生混乱。
• 创建变量的最佳方法是在 camelCase 中使用多个单词。（例如，“myVarName”）。

变量的未定义值

当我们声明一个变量而不给它赋值时，它将具有该值。.undefined

这是 JavaScript 的默认行为。虽然这个容器应该是空的，但事实并非如此。它仍然包含一个“未定义”的值。

注意：是javascript中的一种数据类型。我们将在任何其他博客中详细查看“关于”和其他数据类型。undefinedundefined

如果你想看到它们的值，你可以通过在Web浏览器的控制台中执行“console.log（）”来做到这一点，输出将是“未定义的”。

JavaScript
1

let name, age, birthYear;

2

console.log(name);          // undefined

3

console.log(age);           // undefined

4

console.log(birthYear);     // undefined

 

未声明/未赋值变量

假设您想在语句中使用变量，但尚未声明此变量。在这种情况下，您的代码将抛出一个“引用错误”，表明未定义变量。简而言之，如果我们想访问一个未声明的变量，代码将抛出运行时错误。

例：

JavaScript
1

console.log(xyz);  // ReferenceError: xyz is not defined

 

尝试在浏览器控制台中运行上述行。

在实际程序中，您永远不应该尝试在不声明变量的情况下访问它。

注意：不要与未定义和未分配/未声明的变量混淆 - 它们是非常不同的东西。未定义的变量是已在程序中声明但尚未使用值初始化的变量。相反，未声明的变量是尚未声明的变量。

为变量赋值

声明完成后，我们可以使用 equal（'='） 符号为变量赋值：

例：

JavaScript
1

let age;

2

age = 22;

 

其中 是变量的名称，为其赋值 。age22

注意：在 JavaScript 中，等号 （'='） 是一个“赋值”运算符，而不是像代数中那样的“等于”运算符。虽然以下内容在代数中没有意义：

JavaScript
1

x = x + 10;

 

但是在JavaScript中，这是完全有意义的：

首先，它计算 的值并将结果分配给变量 'x。简单来说，的值递增 .x + 10x10

注意：在 JavaScript 中，“等于”运算符写成 .==

此外，变量声明和初始化可以组合在一起，这意味着变量初始化可以在声明中完成：

JavaScript
1

var greetings = "Hello";

2

let name = "Robiul"

3

​

4

// or,

5

var greetings = "Hello", name = "Robiul";

6

​

7

//The same declaration can even span across multiple lines using comma(,):

8

​

9

var greetings = "Hello", 

10

      name = "Robiul";

 

注意：我们可以从用户输入中分配一个变量值。

JavaScript
1

// Gets user input

2

var name = prompt("What is your name?");

3

var age = prompt("What is your favorite age? ");

4

console.log(name)  

5

console.log(age)

 

更改/更新/重新赋值变量的值

“变量”一词的含义是任何可以变化的东西。这意味着一旦初始化完成，如果需要，我们可以稍后在程序中更改或更新变量的值。

它类似于重新初始化变量。我们可以通过键入变量的名称后跟等号（'='），然后跟我们希望它存储的新值来更新/更改值。

JavaScript
1

var greetings = "Hello";

2

let myHobby = "Drawing";

3

console.log(greetings);   // Hello

4

console.log(myHobby);   // Drawing

5

​

6

// changing the value 

7

greetings = "Hi";

8

myHobby = "Programming"

9

console.log(greetings);   // Hi

10

console.log(myHobby);   // Programming

11

​

12

//   also, we can change the value as many times as we want:

13

​

14

let message;

15

message = "Hello";

16

console.log(message);  // Hello

17

message = "World"; 

18

console.log(message);  // World

 

javascript variable doesn't contain the history of the variable, which means when we change the value of a variable it removes the old data and stores the new one.

注意：有一些函数式编程语言，如 Scala 或 Erlang，不允许更改变量值。
在这样的语言中，一旦在变量中赋值，它就会永远存在。如果我们想重新赋值变量或想要更改变量的值，语言会强制我们创建一个新变量（声明一个新变量）。我们不能重用旧的。

访问 JavaScript 变量

作为初学者，您可能正在考虑访问/使用存储在特定变量中的值的过程是什么。这比声明和赋值变量更简单。您只需要编写包含要访问的值的变量的名称，即可完成。这也称为“引用变量”。

JavaScript
1

// Declare and initialize the variable

2

var myNumVariable = 85

3

let myTextVariable = 'This is text.'

4

​

5

// Access the values in myNumVariable and myTextVariable

6

myNumVariable

7

// 85

8

myTextVariable

9

//  'This is text.'

10

​

11

​

12

// Re-assign myNumVariable and myTextVariable

13

myNumVariable = 50

14

myTextVariable = 'This is a updated Text'

15

​

16

​

17

// Access the values in myNumVariable and myTextVariable again

18

myNumVariable

19

// 50

20

myTextVariable

21

// 'This is a updated Text'

 

变量的基本用法

声明变量并初始化它后，可以在代码中其他位置按名称引用此变量。

JavaScript
1

var x = 10;

2

x + 2;

3

console.log(x)   // 12

 

声明新变量时，可以使用已声明的变量。

JavaScript
1

var x = 100;

2

var y = x + 102;

3

console.log(y)  // 202

 

您可以使用 JavaScript 变量进行各种算术运算，使用“=”、“+”、“*”等运算符。:

JavaScript
1

let x = 5 + 2 + 3;

2

console.log(x)  // 10

 

您也可以将一个字符串添加到另一个字符串，但字符串将被连接起来：

JavaScript
1

let x = "John" + " " + "Doe";

2

console.log(x)   // John Doe

 

注意：在算术运算期间 如果将数字放在引号中，则其余数字将被视为字符串，并且所有数字都将连接起来。现在试试这个：

JavaScript
1

let y = "5" + 2 + 3;

2

console.log(y)   // 523

 

这在 JavaScript 中称为强制。

为什么我们应该使用变量

到目前为止，我们已经讨论了什么是变量，如何创建它，以及它如何在我们的程序中工作。但是还没有讨论为什么这如此重要以及为什么要使用变量。

让我们也来看看这个。我们将讨论变量如何帮助程序员编写优化和高效的代码：

为了理解这些要点，让我们看一个非常简单且状态前向游戏的程序，称为“猜我的号码”。这个游戏逻辑很简单，我们会在代码中使用一个数字，用户就得猜出这个数字;如果用户猜对了数字，我们的程序将显示一条成功消息，如果用户猜错了，程序将显示一条失败的消息。

JavaScript
1

if(userInput==20){

2

  console.log("Hurrah, You guess the correct number.");

3

}else if(userInput<20){

4

  console.log("Sorry, Your guessed number is small. Please try a bigger one.")

5

}else if(useInput>20){

6

  console.log("Sorry, Your guessed number is Big. Please try a bigger one.")

7

}

 

在这个程序中，我们使用数字来制作我们的程序逻辑。该程序将执行良好，但该程序编码不佳。20

让我们看看这个程序有什么问题，为什么它没有很好地编码，以及变量如何让我们的生活变得轻松，并帮助我们使代码更高效和优化：

该程序的第一个问题是我们必须记住数字，或者每当我们在程序中使用它时，都必须一次又一次地检查数字。也许对于一个小程序和这样的简单值来说，这似乎不是什么大问题，但想象一个程序有一千行代码，也许有几百个像这个数字这样的值，或者像这样的一些大数字，我们不能全部记住。2020402502112242250221

在这里，变量通过给出一个简单的解决方案来处理此类问题来帮助我们。我们可以简单地将值存储在变量上，只使用一个简单的描述性名称，而不是每次需要时使用可怕和丑陋的数字。所以，现在我们不必记住数字或任何种类的值;我们可以记住我们给变量命名的名称，并在程序的任何地方使用它。

JavaScript
1

let myNum = 20;

2

if(userInput==myNum){

3

  console.log("Hurrah, You guess the correct number.");

4

}else if(userInput<myNum){

5

  console.log("Sorry, Your guessed number is small. Please try a bigger one.")

6

}else if(useInput>myNum){

7

  console.log("Sorry, Your guessed number is Big. Please try a bigger one.")

8

}

 

现在这是此代码的第二个问题。那时我们将尝试更改数字。我们必须从使用号码的每个地方更改号码。想象一下，当我们要处理一个大项目时，如果我们需要更改所有位置的值，则必须在多个位置使用变量;这将是多么痛苦和耗时。

在这里，变量让我们有机会通过在一个地方更改变量来更改所有位置的变量。我们可以将我们的值存储在变量中，并在程序的任何地方使用它。每当我们需要改变它时，我们可以简单地从一个地方改变它，而这个地方都会改变。

JavaScript
1

let myNum = 20;

2

console.log(myNumber) // 20

3

if(userInput==myNum){

4

console.log(myNumber) // 20

5

  console.log("Hurrah, You guess the correct number.");

6

}else if(userInput<myNum){

7

  console.log(myNumber) // 20

8

  console.log("Sorry, Your guessed number is small. Please try a bigger one.")

9

}else if(useInput>myNum){

10

  console.log(myNumber) // 20

11

  console.log("Sorry, Your guessed number is Big. Please try a bigger one.")

12

}

13

// change the value

14

myNum = 30;

15

console.log(myNumber) // 30

16

if(userInput==myNum){

17

  console.log(myNumber) // 30

18

  console.log("Hurrah, You guess the correct number.");

19

}else if(userInput<myNum){

20

  console.log(myNumber) // 30

21

  console.log("Sorry, Your guessed number is small. Please try a bigger one.")

22

}else if(useInput>myNum){

23

  console.log(myNumber) // 30

24

  console.log("Sorry, Your guessed number is Big. Please try a bigger one.")

25

}

 

这是多么简单！右？

该程序的另一个程序是我们静态使用该数字。这意味着我们的程序现在不是动态的。如果我们需要任何更改的值，我们必须编辑源代码，这是非常糟糕的。要编写现代程序，我们应该具有动态更改值的功能。

在这里，变量为我们提供了最佳和最简单的方法。我们可以简单地创建一个变量，并从用户输入中分配变量的值，而不是静态分配它。
 

JavaScript
1

  let myNum =  prompt("enter a number?");

2

if(userInput==myNum){

3

  console.log("Hurrah, You guess the correct number.");

4

}else if(userInput<myNum){

5

  console.log("Sorry, Your guessed number is small. Please try a bigger one.")

6

}else if(useInput>myNum){

7

  console.log("Sorry, Your guessed number is Big. Please try a bigger one.")

8

}

 

现在我们的代码是动态的;我们可以随时更改值，而无需更改或编辑源代码。

因此，变量帮助我们编写优化的、开发人员友好且易于理解的代码。

标签：JavaScript,编程,变量
来源：