JavaScript 变量


目录

    显示目录

变量是存储数据的容器

JavaScript 变量可以通过 4 种方式声明:

  • 自动地

  • 使用 var

  • 使用 let

  • 使用 const

在第一个示例中,xyz 是未声明的变量。

它们在第一次使用时会自动声明:

例子

x = 5;
y = 6;
z = x + y;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>

<p>In this example, x, y, and z are undeclared.</p>
<p>They are automatically declared when first used.</p>

<p id="demo"></p>

<script>
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>

</body>
</html>


笔记

在使用变量之前始终声明变量被认为是良好的编程习惯。

从例子中你可以猜到:

  • x 存储值 5

  • y 存储值 6

  • z 存储值 11

使用 var 的示例

var x = 5;
var y = 6;
var z = x + y;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>

<p>In this example, x, y, and z are variables.</p>

<p id="demo"></p>

<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>

</body>
</html>


笔记

从 1995 年到 2015 年,所有 JavaScript 代码中都使用了 var 关键字。

letconst 关键字于 2015 年添加到 JavaScript 中。

var 关键字只能在为旧版浏览器编写的代码中使用。

使用 let 的示例

let x = 5;
let y = 6;
let z = x + y;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>

<p>In this example, x, y, and z are variables.</p>

<p id="demo"></p>

<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>

</body>
</html>


使用 const 的示例

const x = 5;
const y = 6;
const z = x + y;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>

<p>In this example, x, y, and z are variables.</p>

<p id="demo"></p>

<script>
const x = 5;
const y = 6;
const z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>

</body>
</html>


混合示例

const price1 = 5;
const price2 = 6;
let total = price1 + price2;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>In this example, price1, price2, and total are variables.</p>

<p id="demo"></p>

<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>

</body>
</html>


两个变量 price1price2 使用 const 关键字声明。

这些是恒定值,无法更改。

变量 total 使用 let 关键字声明。

total 可以更改。

何时使用 var、let 或 const?

1. 始终声明变量

2. 如果不应更改值,请始终使用 const

3. 如果类型不应更改(数组和对象),请始终使用 const

4. 如果不能使用 const,则仅使用 let

5. 仅当您必须支持旧浏览器时才使用 var


就像代数一样

就像代数中一样,变量保存值:

let x = 5;
let y = 6;

就像代数中一样,变量在表达式中使用:

let z = x + y;

从上面的示例中,您可以猜测计算出的总数为 11。

笔记

变量是存储值的容器。



JavaScript 标识符

所有 JavaScript 变量 必须是 通过唯一名称识别

这些唯一的名称称为标识符

标识符可以是短名称(如 x 和 y)或更具有描述性的名称(年龄、总和、总成交量)。

构造变量名称(唯一标识符)的一般规则是:

  • 名称可以包含字母、数字、下划线和美元符号。

  • 名称必须以字母开头。

  • 名称也可以以 $和 _ 开头(但我们不会在本教程中使用它)。

  • 名称区分大小写(y 和 Y 是不同的变量)。

  • 保留字(如 JavaScript 关键字)不能用作名称。

笔记

JavaScript 标识符区分大小写。


赋值运算符

在 JavaScript 中,等号 (=) 是一个“赋值”运算符,而不是一个 “等于”运算符。

这与代数不同。以下内容没有意义 代数:

x = x + 5 

然而,在 JavaScript 中,它是完全有意义的:它将 x + 5 的值分配给 X。

(它计算 x + 5 的值并将结果放入 x 中。x 的值 增加 5。)

笔记

“等于”运算符的写法类似于 JavaScript 中的 ==


JavaScript 数据类型

JavaScript 变量可以保存像 100 这样的数字和像“John 美国能源部”。

在编程中,文本值称为文本字符串。

JavaScript 可以处理多种类型的数据,但现在只考虑数字和字符串。

字符串写在双引号或单引号内。数字被写了 不带引号。

如果将数字放在引号中,它将被视为文本字符串。

例子

const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>

<p id="demo"></p>

<script>
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>

</body>
</html>



声明 JavaScript 变量

在 JavaScript 中创建变量称为“声明”变量。

您可以使用 varlet 关键字声明 JavaScript 变量:

var carName;
let carName;

声明后,该变量没有值(从技术上讲,它是未定义)。

要为变量分配值,请使用等号:

carName = "Volvo";

您还可以在声明变量时为其赋值:

let carName = "Volvo";

在下面的示例中,我们创建一个名为 carName 的变量并分配值 “沃尔沃”吧。

然后我们将值“输出”到 id="demo" 的 HTML 段落中:

例子

<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName; 
</script>

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>Create a variable, assign a value to it, and display it:</p>

<p id="demo"></p>

<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

笔记

在脚本开头声明所有变量是一种很好的编程习惯。


一个陈述,许多变量

您可以在一条语句中声明多个变量。

开始声明 使用 let 并用逗号分隔变量:

例子

let person = "John Doe", carName = "Volvo", price = 200;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>

<p>You can declare many variables in one statement.</p>

<p id="demo"></p>

<script>
let person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>


一个声明可以跨越多行:

例子

let person = "John Doe",
carName = "Volvo",
price = 200;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>You can declare many variables in one statement.</p>

<p id="demo"></p>

<script>
let person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>



值=未定义

在计算机程序中,变量声明时通常不带值。价值 可以是必须计算的东西,或者将提供的东西 后来,就像用户输入一样。

没有值声明的变量将具有值 未定义。

执行此语句后,变量 carName 将具有值 undefined

例子

let carName;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>A variable without a value has the value of:</p>
<p id="demo"></p>

<script>
let carName;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>



重新声明 JavaScript 变量

如果您重新声明使用 var 声明的 JavaScript 变量,它不会丢失其值。

执行这些语句后,变量 carName 仍将具有值“Volvo”:

例子

var carName = "Volvo";
var carName;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>If you re-declare a JavaScript variable, it will not lose its value.</p>

<p id="demo"></p>

<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>


笔记

您不能重新声明使用 letconst 声明的变量。

这是行不通的:

let carName = "Volvo";
let carName;

JavaScript 算术

与代数一样,您可以使用 JavaScript 变量进行算术运算,使用 运算符,例如 =+

例子

let x = 5 + 2 + 3;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>The result of adding 5 + 2 + 3 is:</p>
<p id="demo"></p>

<script>
let x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

您还可以添加字符串,但字符串将被连接:

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>The result of adding "John" + " " + "Doe" is:</p>
<p id="demo"></p>

<script>
let x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

也试试这个:

例子

let x = "5" + 2 + 3;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>The result of adding "5" + 2 + 3 is:</p>
<p id="demo"></p>

<script>
let x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

笔记

如果将数字放在引号中,则其余数字将被视为字符串并连接起来。

现在试试这个:

例子

let x = 2 + 3 + "5";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>The result of adding 2 + 3 + "5" is:</p>
<p id="demo"></p>

<script>
let x = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript 美元符号 $

由于 JavaScript 将美元符号视为字母,因此包含 $的标识符是有效的变量名称:

例子

let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>The dollar sign is treated as a letter in JavaScript names.</p>

<p id="demo"></p>

<script>
let $$$ = 2;
let $myMoney = 5;
document.getElementById("demo").innerHTML = $$$ + $myMoney;
</script>

</body>
</html>

在 JavaScript 中使用美元符号并不常见, 但专业程序员经常使用它 作为 JavaScript 库中 main 函数的别名。

以 JavaScript 库 jQuery 为例,main 函数 $ 用于选择 HTML 元素。 在 jQuery 中 $ ("p"); 表示“选择所有 p 元素”。


JavaScript 下划线 (_)

由于 JavaScript 将下划线视为字母,因此包含 _ 的标识符是有效的变量名称:

例子

let _lastName = "Johnson";
let _x = 2;
let _100 = 5;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>The underscore is treated as a letter in JavaScript names.</p>

<p id="demo"></p>

<script>
let _x = 2;
let _100 = 5;

document.getElementById("demo").innerHTML = _x + _100;
</script>

</body>
</html>

在 JavaScript 中使用下划线并不常见, 但专业程序员之间的一个约定是使用它作为别名 “私有(隐藏)”变量。