let
- 作用:声明变量的关键字
- 语法:let 变量名 ; let 变量名 = 变量值;
const
- 作用:声明常量,ES6中默认公约使用大写形式定义常量名。
- 语法:const 变量名=赋值;
let与const共有的特点:
- 块级作用域
<script> { var a = 20; } console.log(a);//a的结果是20 </script>
<script> { let a = 20; } console.log(a);//a is not defined </script>
-
不存在变量提升:暂时性死区(Temporal Dead Zone,TDZ):本质,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。
<script> { console.log(a);//undefined var a=30; } </script>
<script> console.log("----a的死区---"); console.log(a);//报错 console.log("----a的死区---"); let a = 30; </script>
-
同一作用域,不能重复声明同一变量
<script> { var a = 20; var a = 30; console.log(a);//30 } </script>
<script> { let a = 20;//编辑器报错 let a = 30;//编辑器报错 console.log(a);//dentifier 'a' has already been declared } </script>
const的特点:在let特点的基础上,还拥有以下特点
- 声明变量的同时需要立即初始化
<script> // 错误示例: const b;//编辑器报错 b = 10; // --------------------------------------- // 正确代码如下: const a = 10; console.log(a);//10 </script>
- 当数据类型为数值、字符串、布尔值类型时,其值是不可改变的,但是为对象或数组的时候,其值是可以改变,因为声明的变量相当于指向的那个内存地址。
<script> const a = 10; a = 20; console.log(a);//报错 const b = [1,2,3,4,5,6]; b[3] = 10; console.log(b);// [1, 2, 3, 10, 5, 6] </script>
应用场景:
- 循环中使用:
<script> // var声明 for(var i=0;i<10;i++){ } console.log(i);//10 // let声明 for(let j=0;j<10;j++){ } console.log(j);//报错j is not defined </script>
-
按钮事件案例 需求:点击按钮,答应对应的编号
<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <script> let btns=document.getElementsByTagName("button"); // var声明 for(var j = 0;j < btns.length;j++){ btns[j].onclick = function(){ console.log(j+1);//点击按钮1,按钮2,按钮3,全都打印4 } } // let声明 for(let j = 0;j < btns.length;j++){ btns[j].onclick = function(){ console.log(j+1);//点击按钮1,按钮2,按钮3,分别打印1,2,3 } } </script> </body>
let、const与var的区别
- var是函数作用域,let是块级作用域(块级作用域就是用{ }包裹起来的部分)
-
var声明的变量会挂载在window上,而let和const声明的变量不会
-
var声明变量存在变量提升,let和const不存在变量提升
-
同一作用域下let和const不能重复声明,否则let暂存死区,var可以重复声明