可以使用变量存储值。在本文中,我将解释如何在 JavaScript 中使用变量
目录
8-1 你可以用变量做什么
8-2 声明一个变量
8-3 声明常量(不能重新分配的变量)
8-4 变量名称规则和通用命名约定
8-5 为变量赋值和初始化变量
8-6 确定变量的值是否未定义
8-7 给变量赋值是按值传递还是按引用传递
你可以用变量做什么
JavaScript 等编程语言使用一种叫做变量的东西来存储值。变量用于以后引用和存储数字和字符串。
例如,在下面的示例中,产品的销售价格被计算为价格 x 法人税并输出到屏幕。
<script>
console.log("球的价格是" + (800 * 1.1));
console.log("球拍的价格是" + (1200 * 1.1));
console.log("球网的价格是" + (1700 * 1.1));
</script>
如果你每次都描述法人税,你可能会犯一个粗心的错误,当税率发生变化时你必须改变一切。在这种情况下使用变量很方便。
它定义了一个名为 tax 的变量,并为其指定了 1.1 的税率。
<script>
let tax = 1.1;
</script>
通过描述已赋值的变量而不是直接描述数值或字符串,结果将与写入赋值给该变量的值相同。让我们用变量重写前面的例子。
<script>
let tax = 1.1;
console.log("球的价格是" + (800 * tax));
console.log("球拍的价格是" + (1200 * tax));
console.log("球网的价格是" + (1700 * tax));
</script>
通过使用变量,比直接写数字更不容易出现粗心的错误,并且当税率发生变化时,您只需更改分配给变量的值即可。
变量对于存储计算结果也很有用。例如,考虑计算英语、数学和语文成绩的总分和平均分的示例。
<script>
console.log("总成绩为"" + (70 + 82 + 84));
console.log("平均成绩为" + ((70 + 82 + 84) / 3));
</script>
如果每次都进行70 + 82 + 84 的运算,我们就使用变量就会很方便。
<script>
let sum = 70 + 82 + 84;
console.log("总考试成绩为" + sum);
console.log("平均考试成绩为" + (sum / 3));
</script>
它定义了一个名为 sum 的变量,并计算和分配测试的总和。输出合计时,直接输出变量的值,输出平均值时,输出分配给变量的总分的结果。它不仅消除了一遍又一遍地计算测试总数的需要,还使程序更易于阅读和修改。
可以看到,变量在编写程序时非常有用,不可或缺。
要在 JavaScript 中使用变量,您必须首先声明它们。在这里,我将解释如何在 JavaScript 中声明变量。
如何声明变量
我们过去在声明变量时使用 var,但是自从 ECMAScript 2015 (ES6) 之后,我们现在除了 var 之外还可以使用 let 和 const。所以变量声明使用:
var 变量名;
let 变量名;
const 变量名=初始值;
用于声明变量的三个关键字中,const在声明变量时必须始终设置一个初始值,以后不能再赋值。因此,在使用像常量这样的变量时会用到它。
例如,你可以写:
var height;
let width;
本页末尾解释了 let 和 var 之间的区别。一般情况下,使用let是没有问题的。
您也可以一起声明多个变量。在这种情况下,描述以逗号 (,) 分隔的变量名称。
var 变量名1, 变量名2, ...;
let 变量名1, 变量名2, ...;
例如,你可以写:
let width, height;
这与编写相同:
let width;
let height;
如果省略变量声明
使用变量而不声明它可能会或可能不会导致错误。
如果您引用未声明的变量的值,则会发生错误。在下面的示例中,我们试图引用尚未声明的变量 weight 的值。
console.log(weight);
>> Uncaught ReferenceError: weight is not defined
如果为尚未声明的变量存储值,则不会发生错误。这是因为当一个值存储在一个尚未声明的变量中时,它被假定为声明为全局范围变量。
weight = 72;
console.log(weight);
>> 72
但是,在严格模式下,如果将值存储在未声明的变量中,则会发生错误。(严格模式是一种模式,在这种模式下,像这样的不那么推荐的写入方法将被视为错误)。
"use strict";
weight = 72;
>> Uncaught ReferenceError: weight is not defined
如您所见,并不总是需要声明变量。但是我们在工作中强烈推荐声明变量。
let 与 const 和 var 的区别
虽然 var 长期以来一直用于声明变量,但 let 和 const 是 ECMAScript 2015 (ES6) 中的新增内容。让我们快速了解一下这三者之间的区别。
禁止再申报
如果您使用 var 声明一个变量,再次声明同一个变量不会导致错误。
var num;
num = 10;
var num;
如果您使用 let 或 const 声明一个变量,则使用相同的变量名再次声明它是错误的。
let num;
num = 10;
let num;
>> Uncaught SyntaxError: Identifier 'num' has already been declared
范围差异
当使用 var 声明变量时,变量的作用域变为函数作用域。在函数中声明的变量可以在函数中的任何地方被引用。
考虑以下示例。变量 msd 是在 if 块内声明的变量,但使用 var 声明的变量具有函数作用域,因此可以在同一函数内的任何位置引用它们。
function test(num){
if (num >= 20){
var msg = '成年人';
}else{
var msg = '未成年人';
}
console.log(msg); // 在同一个函数中引用
}
test(10);
>> 未成年人
另一方面,当使用 let 或 const 声明变量时,变量的作用域变为块作用域。在块内声明的变量可以在块内的任何地方引用。
考虑以下示例。变量 msd 是在 if 块内声明的变量。由于使用 let 声明的变量的作用域是一个块,因此即使在同一个函数内从块外引用它也会出错。
function test(num){
if (num >= 20){
let msg = '成年人';
}else{
let msg = '未成年人';
}
console.log(msg); // 在声明变量的块外引用
}
test(10);
>> Uncaught ReferenceError: msg is not defined
我们将在另一页上更详细地介绍变量声明和范围。
在 JavaScript 中,如果你使用 const 声明一个变量,你可以像常量一样使用它。如果使用const,则必须在声明时设置初始值,并且设置的值不能改变。在这里,我将解释如何在 JavaScript 中声明常量。
如何声明常量
正如“在 JavaScript 中声明变量”中简要介绍的那样,除了 JavaScript 中常规的 var 之外,现在 let 和 const 可以在 ECMAScript 2015 (ES6) 及更高版本中使用。
var 变量名;
let 变量名;
const 变量名=初始值;
在使用const声明变量时,必须在声明时始终指定初始值。而且您以后不能再分配另一个值。因此,由于声明时存储的值没有改变,因此可以像常量一样使用。当然,它可以不作为常量使用,也可以作为值不改变初始值的变量使用。
实际上会这样写:
const branchName = '山东省青岛市';
如果在用 const 声明时没有指定初始值,则会出错。
const rate;
>> Uncaught SyntaxError: Missing initializer in const declaration
如果稍后尝试在声明的常量中存储另一个值,也会发生错误。
const plusPoint = 120;
plusPoint = 90;
>> Uncaught TypeError: Assignment to constant variable.
一起声明多个常量
您也可以一起声明多个常量。在这种情况下,描述以逗号 (,) 分隔的变量名称。
const 变量名1=初值1,变量名2=初值2;
例如,你可以写:
const maxWidth = 720, minWidth = 320;
这与编写相同:
const maxWidth = 720;
const minWidth = 320;
通过使用 const 来定义这样的变量,您可以像使用常量一样使用它。如果您将一个值存储在您不打算更改的变量中,请使用 const 声明它以防止该值被错误更改。
在JavaScript中,一个程序中可以使用多个变量,每个变量中可以存放不同的值。要识别多个变量,请为每个变量指定一个变量名称。在这里,我将解释如何在 JavaScript 中命名变量。
变量命名规则
解释可在 JavaScript 变量名中使用的字符和规则。在 JavaScript 中,诸如变量名和函数名之类的名称称为标识符。
・可以使用的字符是 Unicode 字符、下划线 (_) 和美元符号 ($)。
・区分大小写。
・数字(0 到 9)不能用作第一个字符。
・JavaScript 变量名的保留字。它不能使用
我们会检查每一个。
除了 Unicode 字符外,变量名中还可以使用下划线 (_) 和美元符号 ($)。例如,您可以使用以下变量名称:
num
sales2020
user_id
$count
以下四个变量被视为单独的变量,因为它们区分大小写。
myname
MyName
myName
MYNAME
Unicode 字符包括日文和其他字符,因此您可以在变量名称中使用日文字符。但是,一般来说,我认为只使用半角字母数字字符。
let 身高 = 180;
console.log(身高 );
>> 180
数字也可以用在变量名中,但是如果第一个字符是数字就会出错。
let 5box = 10;
>> Uncaught SyntaxError: Invalid or unexpected token
变量名中不能使用 JavaScript 保留字。保留字是指在 JavaScript 中预先注册为具有特殊含义的字,例如 do 或 switch。
let switch = 'red';
>> Uncaught SyntaxError: Unexpected token 'switch'
变量名称的命名符号
变量名只要遵循前面解释的变量名规则就可以自由赋值,但是如果程序中变量名赋值的方法一致的话,会更容易理解。下面是三种常用的变量名和函数名的命名约定。
CamelCase(lowCamelCase)
CamelCase 是指第一个单词全部小写,第二个及以后的单词首字母大写,其余字母小写。
let userName;
let totalScore;
Upper Camel Case/Pascal Case
PascalCase 表示所有单词的第一个字母大写,其余字母小写。
let UserName;
let TotalScore;
snake case
Snake case 是一种将所有单词写成小写并用下划线(_)连接单词的方法。
let user_name;
let total_score;
定数
常量名称的通用约定是全部使用大写字母并使用下划线 (_) 分隔单词。
const MAX_SIZE = 10;
还有一种叫做kebab case的方法,它用连字符(-)连接单词,但是我们在JavaScript中变量名中不使用连字符(-)。
没有所谓哪种描述方式更好,但是我觉得在同一个程序中使用统一的描述方式会让代码在后面更容易阅读和理解。
声明变量后,您可以为其赋值。分配的值可以在以后检索和使用,或者可以分配另一个值(不允许声明为 const 的变量)。变量也可以在声明的时候赋值。本节讲解如何在JavaScript中为变量赋值,以及在声明变量时如何赋值和初始化。
给变量赋值
将值存储在变量中称为为变量赋值。格式如下。
変数 = 値;
“=”是称为赋值运算符的运算符之一。将写在“=”右边的值赋给写在左边的变量。
例如:
let old;
let name;
old = 18;
name = 'Yuhua';
它声明了变量old和name,然后给每个变量赋值。JavaScript 允许您将任何数据类型的值赋给变量。
在声明变量时初始化
变量一经声明就可以通过为其赋值来初始化。格式如下。
let 変数 = 値;
声明一个变量并为其赋值。
例如:
let old = 18;
let name = 'Yuhua';
使用 const 声明变量时,必须始终在声明变量时为其赋值。
const minHeight = 100;
从变量中获取值
如果你写一个变量名而不是写一个值,如数字或字符串,你可以检索和使用存储在变量中的值。请参见以下示例。
let name = 'Yuhua';
console.log(name);
指定一个变量作为 log 方法的参数,然后检索存储在变量中的值并将其作为参数传递给日志方法。当我实际运行它时,我在控制台得到以下输出:
let name = 'Yuhua';
console.log(name);
>> Yuhua
从变量中检索值不会从变量中删除值。可以多次检索存储在变量中的值。
let name = 'Yuhua';
console.log(name);
>> Yuhua
console.log(name);
>> Yuhua
还可以将存储在变量中的值分配给另一个变量。
let num1, num2;
num1 = 10;
num2 = num1;
console.log(num2);
>> 10
在将值 10 赋给变量 num1 之后,变量 num1 被赋给变量 num2。由于变量 num1 包含值 10,因此将值 10 赋给变量 num2。
※ 在 JavaScript 中,当你实际给一个变量赋值时,变量存储了一个指向存储值的位置的引用。对于数字、字符串等原始类型的值,可以认为是将值简单地存储在一个变量中,但是如果赋给变量的值是对象类型,则需要稍微小心一点。
赋值
您可以将另一个值分配给保存值的变量。例如:
let highScore;
highScore = 78;
highScore = 86;
变量 highScore 最初被赋予值 78,但后来被赋予另一个值 86。分配新值时,变量将仅包含新值。
let highScore;
highScore = 78;
console.log(highScore);
>> 78
highScore = 86;
console.log(highScore);
>> 86
如果你使用 const 声明一个变量,你以后不能给它赋另一个值。分配不同的值将导致错误。
const minHeight = 100;
minHeight = 88;
>> Uncaught TypeError: Assignment to constant variable.
在 JavaScript 中,如果在声明变量后从未存储值,则会存储未定义的值 undefined。这里我将解释如何判断变量是否仍然是undefined,并存储undefined。
存储在声明变量中的值
使用变量时,声明该变量,然后为其赋值。如果您只声明一个变量而从未为其赋值,那么它有一个特殊的值,称为 undefined 。
如果在存储值之前实际声明变量并将变量的值打印到控制台,则会打印 undefined 。
let num;
console.log(num);
>> undefined
这个 undefined 不是字符串。所以你不能通过下面的方式来判断一个变量中存储的值是否是未定义的。
let num;
if (num === 'undefined'){
console.log('undefined');
}else{
console.log('not undefined');
}
>> not undefined
现在,我将介绍两种判断存储在变量中的值是否为未定义值的方法。
全局变量与undefined比较
JavaScript 定义了一个名为 undefined 的全局变量。而 undefined 存储原始值 undefined 作为初始值。(这很混乱,因为名称相同)。
console.log(undefined);
>> undefined
全局变量 undefined 总是以 undefined 存储,因为不可能在其中存储新值。
undefined = 'Yes';
console.log(undefined);
>> undefined
判断一个变量中存储的值是否为undefined值,可以通过与全局变量undefined进行比较来判断。
let num;
if (num === undefined){
console.log('undefined');
}else{
console.log('not undefined');
}
>> undefined
使用 typeof 运算符
typeof 运算符接受一个参数并返回表示参数数据类型的字符串。
console.log(typeof 100);
>> number
console.log(typeof 'abc');
>> string
如果指定一个包含未定义值的变量作为 typeof 运算符的参数,则返回“undefined”。
let num;
console.log(typeof num);
>> undefined
由于 typeof 运算符的返回值是一个字符串,您可以将其与字符串 ‘undefined’ 进行比较,以确定变量中存储的值是否未定义。
let num;
if (typeof num === 'undefined'){
console.log('undefined');
}else{
console.log('not undefined');
}
>> undefined
当分配给变量的值是原始类型值(如数字或字符串)时,将执行称为“按值传递”的过程。此外,当分配给变量的值是对象类型(例如数组或函数)时,将执行称为“通过引用传递”的过程。这里我们描述当原始类型和对象类型的值被赋值给变量时实际发生了什么。
将原始类型的值分配给变量
原始值是数字(如 10 )、字符串(如 ‘Cup’ )、布尔值(如 true )、 undefined 、 null 和符号。考虑将这些值赋给变量。
给一个变量赋一个值,然后再赋另一个值
声明一个变量 a 并为其赋值 10。
let a;
a = 10;
然后预留一个地方存放数字10,并将那个地方的位置存放在变量a中。
将另一个值 20 赋给之前的变量 a。
let a;
a = 10;
a = 20;
然后为数字 20 保留一个新位置,并将该位置的位置存储在变量 a 中。
请注意,提供了一个新位置,而不是将新值存储在原始值的存储位置。
複数の変数に同じ値を代入する
为多个变量分配相同的值
let a, b;
a = 10;
b = 10;
然后我们有一个地方存储数字10,那个地方的位置存储在变量a中,然后我们有另一个地方存储数字10,那个地方的位置存储在变量b中。
即使值相同,如果分别给变量赋值,也会提供不同的存储位置。
将一个变量赋值给另一个
现在将 10 赋值给变量 a,并将变量 a 赋值给变量 b。
let a, b;
a = 10;
b = a;
然后你有一个存放数字10的地方,那个地方的位置存放在变量a中,然后变量a存放的位置存放在变量b中。
将另一个值 20 赋给之前的变量 b。
let a, b;
a = 10;
b = a;
b = 20;
然后为数字 20 保留一个新位置,并将该位置的位置存储在变量 b 中。由于变量a存放的位置没有变化,所以变量a引用的值也没有变化。
将原始类型的值赋给变量时,多个变量可能会临时引用同一个值,但对变量的操作不会影响其他变量引用的值。
将对象类型的值赋给变量
对象类型值是原始类型值以外的任何值,例如数组、对象、函数、正则表达式等。考虑将这些值赋给变量。
给一个变量赋一个值,然后再赋另一个值
声明一个变量 a 并将数组 [10, 20] 赋值给它。
let a;
a = [10, 20];
然后它会预留一个地方存放数组[10, 20],并将那个地方的位置存放在变量a中。
将另一个数组 [30, 40] 分配给之前的变量 a。
let a;
a = [10, 20];
a = [30, 40];
然后为数组 [30, 40] 分配一个新位置,并将该位置的位置存储在变量 a 中。
将上面变量 a 引用的数组中索引 0 处的元素的值替换为 50。
let a;
a = [10, 20];
a = [30, 40];
a[0] = 50;
这会将数组 [30, 40] 的第 0 个元素的值更改为 50。存储在变量 a 中的位置保持不变。
如果将另一个值分配给原始值,它与原始类型相同,因为它准备了一个新位置,但在对象类型的情况下,存储的值本身可以用另一个值替换,如数组元素。您也许可以更换它。在那种情况下,变量存储的位置保持不变,但实际存储的值可能会改变。
将一个变量赋值给另一个
现在将数组 [10, 20] 赋值给变量 a,并将变量 a 赋值给变量 b。
let a, b;
a = [10, 20];
b = a;
然后我们有一个存放数组 [10, 20] 的地方,那个地方的位置存放在变量 a 中,然后变量 a 存放的地方的位置存放在变量 b 中。
将上面变量 a 引用的数组中索引 0 处的元素的值替换为 50。
let a, b;
a = [10, 20];
b = a;
b[0] = 50;
这会将数组 [10, 20] 的第 0 个元素的值更改为 50。变量 a 和 b 中存储的位置保持不变。由于对变量 b 的操作,变量 a 引用的值也发生了变化。
当我实际运行下面的代码时,不仅变量b引用的值被重写了,变量a引用的值也被重写了。
let a, b;
a = [10, 20];
b = a;
b[0] = 50;
console.log(a);
>> [50, 20]
console.log(b);
>> [50, 20]
将另一个数组 [30, 40] 分配给之前的变量 b。
let a, b;
a = [10, 20];
b = a;
b[0] = 50;
b = [30, 40];
然后我们分配一个新的地方来存放数组 [30, 40] 并将那个地方的位置存储在变量 b 中。变量 a 的存储位置不变。
如果你实际运行下面的代码,你会看到只有变量 b 引用了另一个值。
let a, b;
a = [10, 20];
b = a;
b[0] = 50;
b = [30, 40];
console.log(a);
>> [50, 20]
console.log(b);
>> [30, 40]
给一个对象类型赋值给一个变量时,和原始类型一样,多个变量可能会临时引用同一个值。注意对变量的操作会影响其他变量引用的值,比如替换.