ES6新增的const和let同var之间的对比并且解决了循环内的点击事件上I的值一直是末尾值

最新推荐文章于 2021-08-16 20:04:31 发布

原创最新推荐文章于 2021-08-16 20:04:31 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#const和let #var #for循环解决i的问题

前端同时被 2 个专栏收录

10 篇文章

订阅专栏

9 篇文章

订阅专栏

博客主要对比了ES6新增的const和let与var的区别。var可重复声明、无法限制修改且无块级作用域；let不能重复声明，变量可修改，有块级作用域；const同样不能重复声明，但其值不能修改，也有块级作用域。还给出了var作用域问题的解决办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES6新增的const和let同var之间的对比

1. var
2. let
3. const

1. var：可以重复声明、无法限制修改、没有块级作用域

1.1、变量可以重复声明

   var a = 12;
   var a = 5;
   console.log(a); // 5

1.2、可以被修改

 var b = 12;
 b = 5;
 console.log(b) // 5

1.3、没有块级作用域

if(true) {
	var c = 12
 }
 console.log(c) // 12

PS: JS里面的作用域在{}之间可以作为一个作用域在里边的变量外边用不了

举个栗子

HTML：

<input type="button" class="btn" value="按钮1">
 <input type="button" class="btn" value="按钮2">
 <input type="button" class="btn" value="按钮3">

JS：

 var allBtn = document.getElementsByTagName('input');
        for(var i = 0; i < allBtn.length; i++) {
            allBtn[i].onclick = function () {
                alert(i) // 无论点哪个按钮都是弹出3
            }
        }

解决：利用函数作为一级作用域，利用函数帮垫了一层

 var allBtn = document.getElementsByTagName('input');
        for(var i = 0; i < allBtn.length; i++) {
            (function (i) {
                allBtn[i].onclick = function () {
                    alert(i) // 解决以上问题
                }
            })(i)
        }

2. let：不能重复声明变量-可以修改块级作用域

2.1、变量不可以重复声明

let d = 12
let d = 5
console.log(d) // 报错

2.2、有作用域

{
     let e = 12
}
console.log(e) // 报错

利用let解决上面var 作用域的问题

 var allBtn = document.getElementsByTagName('input');
        for(let i = 0; i < allBtn.length; i++) {
            allBtn[i].onclick = function () {
                alert(i) // 依次按下0/1/2
            }
        }

3.const：不能重复声明变量-可以修改块级作用域

3.1、不能重复声明。否则报错

const f = 12
const f = 12
console.log(f) // 报错

3.2、其值不能修改

const g = 12
g = 5
console.log(g) // 报错

3.3、有块级作用域

 {
   const h = 12
 }
console.log(h) // 报错