一篇文章快速搞懂JS中var、let、const的异同之处

最新推荐文章于 2024-08-16 17:35:00 发布

wxd_97

最新推荐文章于 2024-08-16 17:35:00 发布

阅读量572

点赞数 3

文章标签： javascript js

本文链接：https://blog.csdn.net/wxd_97/article/details/104725651

版权

var、let、const的异同之处

在ES6中新增的两个声明关键字let、const，它们和var一样都是用来声明的。let和var两个声明关键字非常的相似，但是实际上他们之间有明显的不同。而const和let非常相似。但是又有一个明显的不同点，下边我们就看一下它们之间的区别与联系吧：

一、var和let的异同

在写法方面：

//在写法上，两者是相同的
 var a = 10;
 console.log(a)			//10
 let b = 20;
 console.log(b)			//20

在预解析方面：

//声明出来的变量的特性
//1.var存在预解析（有提升）
 console.log(a);		//undefined
 var a = 10;
 console.log(a);		//10
//相当于下边的代码↓↓↓↓
 var a;				   //声明了但未赋值
 console.log(a);		
 a = 10;
 console.log(a);

//2.let不存在预解析（没有提升）
 console.log(a);		//a is not defined
 let a = 10;
 console.log(a);		//10

在重复声明方面：

//1.var允许重复声明
 var a = 10;
 var a = 20;
 console.log(a); 
 //2.let不允许重复声明,就相当于在严格模式下
 let a = 10;
 let a = 20;
 console.log(a);

在作用域方面：

//1.var关键字声明变量一般在函数内才有作用域
if(true){				//此代码中没有函数，所以变量是全局
     var a = 10;
 }
 console.log(a);		//10

//2. let在ES6中新增了块级作用域：虽然它不是函数，但是只要是花括号，就是一个作用域，包括if，for等等。
 if(true){
     let a = 10;
 }
 console.log(a);		//a is not defined
//下边有花括号，也是一个块作用域，只能在块作用域有效
 {
     let a = 10;
     console.log(a);	//10
 }
 console.log(a);		//a is not defined

//在作用域方面的优点可以简化代码，如下边的例子↓↓↓↓
//例：点击事件中拿不到点击事件外面的循环中的计数器
//1.用var声明,当触发点击事件时，循环早就结束了，那么在点击时，只能拿到循环结束后的计数器
 var ali = document.getElementsByTagName("li");
 for(var i=0;i<ali.length;i++){
     ali[i].onclick = function(){
         console.log(i);		//得到的是li的长度
     }
 }
//2.用let声明，let生成了块级作用域，在此处，块级作用域触发了闭包
 var ali = document.getElementsByTagName("li");
 for(let i=0;i<ali.length;i++){
     ali[i].onclick = function(){
         console.log(i);		//得到的是点击事件的i
     }
 }

二、let和const的区别

在写法方面：

//在写法上，如果声明时两者都负值了，那么写法没有区别,如果只声明但未赋值，那么下边就是区别：
//1.let可以声明时赋值，也可以单独赋值
let a;
console.log(a);		//undefined
a = 20;
console.log(a);		//20
//2.声明时需要立即给出初始值
const a;
console.log(a);		//报错，常量缺少初始值
a = 20;
console.log(a);

在声明的类型方面：

let声明的是变量，而const声明的是常量，常量不允许被修改。
本质上来说，const声明的变量，不允许修改地址，可以修改值。

//一般数据（基本数据，值传递的数据）：值就是地址，地址就是值，所以不允许修改 
 const a = 10;
 a = 20;
 console.log(a);	//报错，不允许修改地址
// 复杂数据（引用传递的数据）：值是值，地址是地址，只要地址不改，值随便改
 const obj = {name:"admin"};
 obj.name = "root";       // 可以改
 obj = {};                // 不可以改修改地址
 console.log(obj)