javascript中var与let与const的区别

关注

转载最新推荐文章于 2026-04-02 09:59:44 发布 275 阅读 AI 写同款· GEO 优化 ›

详解 var、let、const之间的区别？ var：函数作用域、可变、提升，现代 JavaScript 中不推荐使用。let：块级作用域、可变，适用于需要改变的变量。const：块级作用域、不可变，适用于不需要改变的变量，尤其是对象和数组时，常用于提高代码可维护性。优先使用const，只有在明确需要修改变量时使用let。避免使用var，尤其是在现代 JavaScript 开发中，let和const提供了更清晰的变量管理方式。阅读详情

转自：https://blog.youkuaiyun.com/lq15310444798/article/details/78405252

var与let的区别
到ES6的时候，javascript中声明变量的方式有三种var、let、const

1：作用域只是局限于当前代码块

{
var str = "aaa";
console.log(str);//aaa
let str1 = "dddd";
console.log(str1);//dddd
}
console.log(str);//aaa
console.log(str1);//报错，str1 is not defined
上面代码中采用var 和 let 分别申明了变量，采用var 申明的变量在外面可已使用，但采用let申明的变量只能在当前代码块中使用，在外边是用不了。

2：使用let 申明的变量作用域不会提升，而采用var申明的会作用域提升。

采用var申明变量

//采用var 申明的变量作用域会提升
{
console.log(a);//输出undefined
var a = "dd";
}
上面的代码经过作用域提升之后相当于下面的代码

//作用域声明提升总是会将变量的申明提升到当前作用域的最前面，如下所示
{
var a;
console.log(a);//因此输出为undefined
a = "ddd";
}
采用let申明的变量作用域不会提升，因此下面代码将会报错

{
console.log(b);//这里将会报错，因为b没有申请
let b = "SYC";
}

3：采用let在相同的作用于下面不能申明相同的变量，采用var申明相同的变量后面会覆盖当前作用域前面的
4：for循环体现父子作用域

例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btns = document.getElementsByTagName('button');
for(i var i = 0; i < btns.length; i ++){
btns[i].onclick = function(){
alert("按钮"+i);//这里一直是按钮4
}
}
</script>
</body>
</html>