JS中的let、var和const的区别

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS中的let、var和const的区别，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3655字，纯文字阅读大概需要6分钟。

内容图文

ES6 提出了两个新的声明变量的命令：let和const。其中，let完全可以取代var，因为两者语义相同，而且let没有副作用。

作用域

let和const声明的变量属于块作用域、var声明的变量作用域是全局或者整个封闭函数。

举例

var x = 1 ?//声明在全局作用域
function foo(){
 ? ?var x = 2 //声明在函数作用域
 ? ?console.log('two',x)
}
console.log('one',x)
foo()
//output:one 1 two 2

var x = 1 ?//声明在全局作用域
function foo(){
 ? ?x = 2 //赋值给变量x
}
foo()
console.log(x)
//output:2

函数里没有声明x，而是赋值给全局作用域下的变量x。

var x = 1 
function foo(){
 ? ?y = 2 
}
foo()
console.log(global.y)
//output:2

如果赋值给没有声明的变量，该变量会隐式地创建为全局变量，成为顶层对象的属性。

所以var具有缺陷：所有未声明直接赋值的变量都会自动挂在顶层对象下，造成全局环境变量不可控、混乱。

{
 ? ?let x = 1
}
console.log(x)
//Uncaught ReferenceError: x is not defined

let 声明的是块作用域，块作用域变量在包含它们的块或for循环之外是不能访问的。

此外，使用let在全局作用域下声明的变量也不是顶层对象的属性。

变量提升

console.log(x)
let x = "hello world" 
//output:undefined
console.log(x)
let x = "hello world" 
//Uncaught ReferenceError: Cannot access 'x' before initialization
console.log(x)
const x = "hello world" 
//Uncaught ReferenceError: Cannot access 'x' before initialization

知识点

1、let和const声明的变量在声明之前不能被访问，所以会报错ReferenceError。var声明的变量在声明前是可以访问的，为undefined。

2、通过let、const声明的变量始终存在于它们的作用域里，不能在声明之前访问，称为暂时性死区。

再看下面的例子

var name = 'hello world';
function foo(){
 ? ?console.log(name); 
}
foo();
//output:hello world

变量在声明之后再打印，输出符合我们的预期。

var name = 'hello world';
function foo(){
 ? ?console.log(name); 
 ? ?var name = 'test';
}
foo();
//output:undefined

这个例子就让人看不懂了，为什么输出会是undefined呢，这里涉及知识点：var可以被重复声明以及声明提升的概念。

JS在编译阶段的解析会将所有的声明移动，只有声明会被提升，赋值和其他代码逻辑在原位置生效。

所以上一段输出undefined的代码在JS编译后，实际是这样的：

var name = 'hello world';
function foo(){
 ? ?var name //声明name提到作用域顶部，并被分配了一个undefined
 ? ?console.log(name); // undefined
 ? ?name = 'test';//变量进行初始化操作
}
foo();
//output:undefined

即JS先进行编译阶段的计息，函数foo中的var name = 'test'，其中变量声明被提升到作用域的顶端，但是变量的赋值还在原位置执行，所以打印变量输出为undefined。

此外，var声明可以在包含它的函数、模块、命名空间或全局作用域内部任何位置被访问，所以多次声明同一个变量并不会报错。这也是var的一个缺陷：允许多次声明同一个变量不报错，造成代码不容易维护。

var声明的变量存在变量提升，let和const不存在变量提升，即它们所声明的变量一定要在声明后使用。

声明和赋值

var可以重复声明和重复赋值

let不可以重复声明，可以重复赋值

const不可以重复声明，不可以重复赋值

var a = 1
var a = 2
console.log(a)
//output:2
let a = 1
let a = 2
//SyntaxError: Identifier 'a' has already been declared

以下在一个嵌套作用域里声明同一个变量名称是可以的。

{
 ? ?let a = 1
 ?  {
 ? ? ? ?let a = 2
 ? ? ? ?console.log(a)
 ?  }
}

const

const声明的是一个只读的常量，一旦声明，常量的值就不能改变。同时const一旦声明变量，就必须立即初始化，不能等到后面再赋值。

举例

const a = 1 
a = 2
//Uncaught TypeError: Assignment to constant variable.
//常量值不能改变
const b
//SyntaxError: Missing initializer in const declaration
//声明未赋值

const保证的不是变量的值不能改变，而是变量指向的内存地址不得改动。如果变量是基本类型，变量就保存在那个内存地址上，也就是常量。如果是引用类型，它的内部值是可以改变的。

举例

const user =  {
name:"Tom",
age:24
}
user.name = "Jerry"
console.log(user)
//output:{name: 'Jerry', age: 24}
const user =  {
 ? ?name:"Tom",
 ? ?age:24
 ?  }
?
user = {
 ? ?name:"Jerry",
 ? ?age:18
}
//Uncaught TypeError: Assignment to constant variable.

内容总结

以上是互联网集市为您收集整理的JS中的let、var和const的区别全部内容，希望文章能够帮你解决JS中的let、var和const的区别所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端