当前位置: 代码迷 >> 综合 >> 学习ES6(二)--变量(var let const 详解)
  详细解决方案

学习ES6(二)--变量(var let const 详解)

热度:87   发布时间:2023-10-24 11:50:11.0

根据定义,变量是“内存中的命名空间”,用于存储值。换句话说,它充当程序中值的容器。变量名称称为标识符。以下是标识符的命名规则-

  • 标识符不能是关键字。

  • 标识符可以包含字母和数字。

  • 除下划线(_)和美元($)符号外,标识符不能包含空格和特殊字符。

  • 变量名不能以数字开头。

类型语法

必须先声明变量,然后才能使用它。ES5语法使用var关键字实现相同的目的。声明变量的ES5语法如下。

    var  variable_name

ES6引入了以下变量声明语法-

  • 使用let。
  • 使用const。

变量初始化是指在变量中存储值的过程。可以在声明变量时或在以后的某个时间点初始化变量。

JavaScript和动态键入

JavaScript是一种非类型化语言。这意味着JavaScript变量可以保存任何数据类型的值。与许多其他语言不同,您无需在变量声明期间告诉JavaScript变量将持有哪种类型的值。变量的值类型可以在程序执行期间更改,JavaScript会自动对其进行处理。此功能称为动态键入

JavaScript变量范围

变量的范围是程序在其中定义的区域。传统上,JavaScript仅定义两个范围-全局和局部。

  • 全局范围 -可以从JavaScript代码的任何部分访问具有全局范围的变量。

  • Local Scope-具有局部作用域的变量可以从声明它的函数中访问。

 

全局变量与局部变量

下面的示例使用名称num声明两个变量-一个在函数外部(全局范围),另一个在函数内部(局部范围)。

var num = 10 
function test() { var num = 100 console.log("value of num in test() "+num) 
} 
console.log("value of num outside test() "+num) 
test()

在函数中引用变量时,将显示局部作用域变量的值。但是,变量num在函数外部访问时将返回全局范围的实例。

成功执行后将显示以下输出。

value of num outside test() 10
value of num in test() 100

ES6定义了一个新的变量范围-Block范围。

允许和禁止范围

块作用域限制了变量对声明它的块的访问。该VAR关键字分配一个功能范围可变。与var关键字不同,let关键字允许脚本将对变量的访问限制为最接近的封闭块。

function test() { var num = 100 console.log("value of num in test() "+num) { console.log("Inner Block begins") let num = 200 console.log("value of num : "+num)  } 
} 
test()

该脚本在函数的本地范围内声明变量num,并使用let关键字在块内重新声明它。当在内部块外部访问变量时,将打印局部作用域变量的值,而在内部块内部引用该块作用域变量。

注意 -严格模式是选择加入JavaScript的受限变体的一种方式。

成功执行后将显示以下输出。

value of num in test() 100 
Inner Block begins 
value of num : 200

示例:let  与 var 区分

var no = 10; 
var no = 20; 
console.log(no); //20

让我们使用let关键字重新编写相同的代码。

let no = 10; 
let no = 20; 
console.log(no);//上面的代码将引发错误:标识符'no'已经被声明。

使用let关键字声明的任何变量都被分配了块作用域。

允许和阻止级别安全

如果我们尝试在同一块中声明一次let变量两次,它将抛出错误。

<script>let balance = 5000 // number typeconsole.log(typeof balance)let balance = {message:"hello"} // changing number to object typeconsole.log(typeof balance)
</script>

上面的代码将导致以下错误--Uncaught SyntaxError: Identifier 'balance' has already been declared

但是,相同的let变量可以在不同的块级作用域中使用,而不会出现任何语法错误。

const

常量声明创建了一个只读的参照值。这并不意味着它拥有的值是不可变的,只是不能重新分配变量标识符。const块作用域的,非常类似于使用let语句定义的变量。常量的值不能通过重新分配而更改,也不能重新声明。

以下规则适用于使用const关键字声明的变量-

  • 无法为常量重新分配值。
  • 常量不能重新声明。
  • 常数需要初始化器。这意味着必须在声明期间初始化常量。
  • 分配给const变量的值是可变的。
const x = 10
x = 12 // will result in an error!! 代码将返回错误,因为不能为常量重新分配值。常量变量是不可变的。

const是不可变的

与使用let关键字声明的变量不同,常量是不可变的。这意味着其值无法更改。例如,如果我们尝试更改常量变量的值,将显示错误。

<script>let income = 100000const INTEREST_RATE = 0.08income += 50000 // mutableconsole.log("changed income value is ",income)INTEREST_RATE += 0.01console.log("changed rate is ",INTEREST_RATE) //Error: not mutable
</script>

上面的代码输出如下:

changed income value is 150000
Uncaught TypeError: Assignment to constant variable

const和数组

<script>const DEPT_NOS = [10,20,30,50]DEPT_NOS.push(40)console.log('dept numbers is ',DEPT_NOS)const EMP_IDS = [1001,1002,1003]console.log('employee ids',EMP_IDS)//re assigning variable employee idsEMP_IDS = [2001,2002,2003]console.log('employee ids after changing',EMP_IDS)
</script>

下面的示例演示如何创建不可变数组。可以将新元素添加到数组。但是,重新初始化数组将导致错误,如下所示-

<script>const DEPT_NOS = [10,20,30,50]DEPT_NOS.push(40)console.log('dept numbers is ',DEPT_NOS)const EMP_IDS = [1001,1002,1003]console.log('employee ids',EMP_IDS)//re assigning variable employee idsEMP_IDS = [2001,2002,2003]console.log('employee ids after changing',EMP_IDS)
</script>

上面代码的输出将如下所示-

dept numbers is (5) [10, 20, 30, 50, 40]
employee ids (3) [1001, 1002, 1003]
Uncaught TypeError: Assignment to constant variable.

var关键字

在ES6之前,var关键字用于在JavaScript中声明变量。使用var声明的变量不支持块级作用域。这意味着如果一个变量在一个循环中被声明,它可以在循环外访问或如果块。这是因为使用var关键字声明的变量支持提升。

变量提升允许甚至在声明变量之前在JavaScript程序中使用变量。默认情况下,此类变量将初始化为未定义。JavaScript运行时将扫描变量声明,并将其放在函数或脚本的顶部。用var关键字声明的变量被提升到顶部。考虑以下示例-

console.log(company); // using variable before declaring
var company = "TutorialsPoint"; // declare and initialized here
console.log(company);
上面代码的输出将如下所示
-undefined
TutorialsPoint

var 块范围

区块范围限制变量的在其声明块存取。该VAR关键字分配一个功能范围可变。使用var关键字声明的变量没有块作用域。考虑以下示例-

for (var i = 1;i <= 5;i++){console.log(i);}
console.log("after the loop i value is "+i);
上面的代码输出如下:
1 
2
3 
4 
5 
after the loop i value is 6

变量ivar循环中使用var关键字声明。变量i可以在循环外部访问。但是,有时可能需要限制变量在块内的访问。在这种情况下,我们不能使用var关键字。ES6引入了let关键字来克服此限制。

如果我们在一个块中使用var关键字两次声明相同的变量,则编译器不会抛出错误。但是,这可能会在运行时导致意外的逻辑错误。

var balance = 5000console.log(typeof balance)   //numbervar balance = {message:"hello"}console.log(typeof balance)  //object

 

  相关解决方案