详解JavaScript中的变量、范畴和晋升
变量是很多编程说话的根本组成部分,也是新手需要学习的第一个也是最重要的概念。JavaScript中有很多不一样的变量属性,乃至命名变量时必需遵照的一些规则。在JavaScript中,有三个关键字用于声明变量——var、let和const——每个关键字都会影响代码对变量的不一样说明。
本教程将介绍什么是变量,怎样声明和命名变量,并进一步研讨var、let和const之间的不同。我们还将回忆晋升的影响乃至全局和部分作用域对变量行动的重要性。
懂得变量
变量是用于储备值的命名容器。我们大概屡次援用的一条信息可以储备在一个变量中,供今后使用或修改。在JavaScript中,变量中包括的值可以是任何JavaScript数据类型,包罗数字、字符串或对象。
在今天的JavaScript所基于的ECMAScript 2015 (ES6)说话标准此前,只要一种办法来声明变量——使用var关键字。因此,大多数较老的代码和学习资源将只对变量使用var。我们将鄙人面独自一节计议var、let和const关键字之间的不同。
我们可以使用var来演示变量本身的概念。鄙人面的示例中,我们将声明一个变量,并为其赋值。
// Assign the string value Sammy to the username identifier var username = "sammy_shark";
本声明由以下几部分组成:
使用var关键字声明变量
变量名(或标识符),会员名
赋值操纵,由=语法表示
分配的值“sammy_shark”
此刻我们可以在代码中使用username。JavaScript将记住username表示字符串值sammy_shark。
// Check if variable is equal to value if (username === "sammy_shark") { console.log(true); }
输出:
true
如前所述,变量可以用来表示任何JavaScript数据类型。在本例中,我们将使用字符串、数字、对象、布尔值和null值声明变量。
// Assignment of various variables var name = "Sammy"; var spartans = 300; var kingdoms = [ "mammals", "birds", "fish" ]; var poem = { roses: "red", violets: "blue" }; var success = true; var nothing = null;
使用console.log,我们可以看到特定变量中包括的值。
// Send spartans variable to the console console.log(spartans);
输出:300
变量将数据储备在内存中,稍后可以拜访和修改这些数据。变量也可以从新分配,并给定一个新值。下面的简化示例演示了怎样将密码储备到变量中,然后停止更新。
//为password变量赋值 var password = "hunter2"; //用一个新值从新分配变量值 password = "hunter3"; console.log(password);
输出:
'hunter3'
在实际的程序中,密码很大概平安地储备在数据库中。然而,这个例子说明了一种状况,在这种状况下,我们大概需要更新变量的值。password的值是hunter2,但是我们将其从新分配给了hunter3,这是JavaScript从那时起可以识别的值。
命名变量
变量名在JavaScript中称为标识符。我们计议了在懂得JavaScript语法和代码构造时命名标识符的一些规则,总结如下:
变量名只能由字母(a-z)、数字(0-9)、美圆符号($)和下划线(_)组成
变量名不克不及包括任何空白字符(制表符或空格)
数字不克不及是任何变量的名称开头
保存的关键字不克不及用作变量的名称
变量名区分大小写
JavaScript还习惯在使用var或let声明的函数和变量的名称中使用驼峰大小写(有时作为驼峰大小写停止样式化)。这是一种将第一个单词小写,然后将后面每个单词的第一个字母大写,中心没有空格的做法。除了一些例外,大多数非常量的变量都遵照这种约定。使用const关键字声明的常量变量的名称平常都是大写的。
这大概看起来像要学习许多规则,但很快就会成为编写有效和常规变量名称的第二本性。
var、let和const之间的不同
JavaScript有三个不一样的关键字来声明变量,这给说话增添了额外的复杂性。三者之间的不同是基于范畴、晋升和从新分配。
关键字 | 范畴 | 变量晋升 | 可以从新分配 | 可以从新定义 |
---|---|---|---|---|
var | 功效范畴 | Yes | Yes | Yes |
let | 阻挠范畴 | No | Yes | No |
const | 阻挠范畴 | No | No | No |
您大概想知道应当在本人的程序中使用这三种办法中的哪一种。一个遍及接受的做法是尽大概多地使用const,并在轮回和从新分配的状况下使用let。平常,在处置遗留代码之外可以幸免var。
变量作用域
JavaScript中的作用域是指代码的当前上下文,它决议了变量对JavaScript的可拜访性。范畴的两品种型是部分的和全局的:
全局变量是在块之外声明的变量
部分变量是在块内声明的变量
鄙人面的示例中,我们将创立一个全局变量。
//初始化一个全局变量 var creature = "wolf";
我们知道变量可以从新分配。使用部分作用域,我们实际上可以创立与外部作用域中的变量同名的新变量,而无需更换或从新分配原始值。
鄙人面的示例中,我们将创立一个全局species变量。函数内部是一个具有雷同名称的部分变量。通过将它们发送到操纵台,我们可以看到变量的值怎样按照范畴而不一样,并且原始值不会更换。
//初始化一个全局变量 var species = "human"; function transform() { //初始化一个部分的、函数作用域的变量 var species = "werewolf"; console.log(species); } //记载全局和部分变量 console.log(species); transform(); console.log(species);
输出:
human werewolf human
在本例中,部分变量是函数作用域的。使用var关键字声明的变量总是函数作用域,这意味着它们将函数识别为具有独立作用域。因此,这个部分作用域的变量不克不及从全局作用域拜访。
然而,新的关键字let和const是块范畴的。这意味着从任何类型的块(包罗函数块、if语句、for和while轮回)创立一个新的当地范畴。
为了说明函数作用域变量和块作用域变量之间的不同,我们将使用let在if块中分配一个新变量。
var fullMoon = true; //初始化一个全局变量 let species = "human"; if (fullMoon) { //初始化一个块范畴的变量 let species = "werewolf"; console.log(`It is a full moon. Lupin is currently a ${species}.`); } console.log(`It is not a full moon. Lupin is currently a ${species}.`);
输出:
It is a full moon. Lupin is currently a werewolf. It is not a full moon. Lupin is currently a human.
在此示例中,species变量具有一个值global(human),另一个值local(werewolf)。var但是,假如我们使用,则会有不一样的结果。
//使用var初始化一个变量 var species = "human"; if (fullMoon) { //尝试在一个块中创立一个新变量 var species = "werewolf"; console.log(`It is a full moon. Lupin is currently a ${species}.`); } console.log(`It is not a full moon. Lupin is currently a ${species}.`);
输出:
It is a full moon. Lupin is currently a werewolf. It is not a full moon. Lupin is currently a werewolf.
在这个例子的结果中,全局变量和块范畴的变量都以雷同的值完毕。这是由于您不是使用var创立一个新的当地变量,而是在雷同的范畴内从新分配雷同的变量。var不克不及识别可否属于不一样的新范畴。平常倡议声明块范畴的变量,由于它们生成的代码不太大概无意中覆盖变量值。
变量晋升
到当前为止,在大多数示例中,我们已经使用var声明了一个变量,并使用一个值初始化了它。在声明和初始化之后,我们可以拜访或从新分配变量。
假如我们试图在变量被声明和初始化此前使用它,它将返回undefined。
//在声明变量此前尝试使用它 console.log(x); / /变量赋值 var x = 100;
输出:
undefined
但是,假如省略var关键字,就不再声明变量,而是初始化它。它将返回一个ReferenceError并休止足本的施行。
//在声明变量此前尝试使用它 console.log(x); //没有var的变量赋值 x = 100;
输出:
ReferenceError: x is not defined
缘由在于晋升,这是JavaScript的一种行动,其中变量和函数声明被移到它们作用域的顶部。由于只挂起实际声明,而没有初始化,因此第一个示例中的值返回不决义的值。
为了更分明地演示这个概念,下面是我们编写的代码乃至JavaScript怎样说明它。
// The code we wrote console.log(x); var x = 100; // How JavaScript interpreted it var x; console.log(x); x = 100;
JavaScript在施行足本此前将x留存为内存作为变量。 由于它在定义此前依然被调取,因此结果是不决义的而不是100.但是,它不会致使ReferenceError并休止足本。
尽管var关键字实际上并未更换var的位置,但这有助于表示晋升的工作道理。 但是,这种行动大概会致使问题,由于编写此代码的程序员大概但愿x的输出为true,而不是undefined。
鄙人一个例子中,我们还可以看到晋升是怎样致使不成猜测的结果的:
//在全局范畴内初始化x var x = 100; function hoist() { //不该影响编码结果的前提 if (false) { var x = 200; } console.log(x); } hoist();
输出:
undefined
在本例中,我们声明x全局为100。按照if语句,x可以更换为200,但是由于前提为false,所以它不该该影响x的值。
这种不成猜测的行动大概会在程序中引发bug。由于let和const是块范畴的,所以它们不会以这种方式晋升,如下所示。
//在全局范畴内初始化x let x = true;function hoist() { //在函数作用域中初始化x if (3 === 4) { let x = false; } console.log(x); } hoist();
输出:
true
变量的反复声明(这在var中是大概的)将在let和const中抛出一个错误。
//试图覆盖用var声明的变量 var x = 1; var x = 2; console.log(x);
输出:2
//试图覆盖用let声明的变量 let y = 1; let y = 2; console.log(y);
输出:
Uncaught SyntaxError: Identifier 'y' has already been declared
总之,使用var引入的变量有大概受到晋升的影响,晋升是JavaScript中的一种机制,其中变量声明被留存到内存中。这大概致使代码中显现不决义的变量。let和const的引入解决了这个问题,它在试图在声明变量此前使用该变量或屡次声明该变量时抛出一个错误。
常量
很多编程说话都有常量,这些常量是不克不及修改或更换的值。在JavaScript中,const标识符是按照常量建模的,不克不及从新分配分配给const的值。
将所有const标识符都写成大写是常见的约定。这将它们与其他变量值区分开来。
鄙人面的示例中,我们使用const关键字将变量SPECIES初始化为常量。试图从新分配变量将致使错误。
//给const赋值 const SPECIES = "human"; //尝试从新分配值 SPECIES = "werewolf"; console.log(SPECIES);
输出:
Uncaught TypeError: Assignment to constant variable.
由于不克不及从新分配const值,所以需要同时声明和初始化它们,不然也会抛出错误。
//声明,但不初始化const const TODO; console.log(TODO);
输出:
Uncaught SyntaxError: Missing initializer in const declaration
不克不及在编程中更换的值称为不成变值,而可以更换的值是可变的。虽然const值不克不及从新分配,但是它们是可变的,由于可以修改用const声明的对象的属性。
//创立一个具有两个属性的CAR对象 const CAR = { color: "blue", price: 15000} //修改CAR的属性 CAR.price = 20000; console.log(CAR);
输出:
{ color: 'blue', price: 20000 }
常量非常有用,可以让未来的本人和其他程序员分明地认识到,不该该从新分配预测的变量。假如您但愿未来修改某个变量,那么您大概但愿使用let来声明该变量。
相关免费学习引荐:JavaScript视频教程
以上就是详解JavaScript中的变量、范畴和晋升的具体内容,更多请关注百分百源码网其它相关文章!