请选择 进入手机版 | 继续访问电脑版

简述ES6中let与var的区别

发表于 2017-11-30 11:58 显示全部楼层 16 251

今天来跟大家聊聊ES6中的let和我们以往ES5的var有啥区别,首先请大家先看下面这段js代码:


let a = 1;
console.log(a);    //1
var b = 2;
console.log(b);    //2


正常来讲,控制台输出a=1;b=2应该在你预料之内吧?没错,从这么一个层次上理解,你会认为let 和 var应该是个一样的,或者说差不多的东西。但这里面的水还是比较深的,比如我们再做一个小小的进阶:


for(var i=0;i<10;i++){
    console.log(i);   //0 1 2 3 4 5 6 7 8 9
}
for(let j=0;j<10;j++){
    console.log(j);   //0 1 2 3 4 5 6 7 8 9
}


理论上讲,这个结果你也应该能猜到吧?那如果我想跳出循环再输出i和j呢?那这时候我应该这么写:


for(var i=0;i<10;i++){
    
}
console.log(i);   //10
for(let j=0;j<10;j++){
    
}
console.log(j);   //j is not defined


看到了吧?j在此时是未定义。其实,i和j理论上都是在循环体内才有效,可为什么跳出循环后,输出i是ok的,输出j就不行呢?

那么这个时候你就看出来了,原来var 和 let还是有区别的,区别在哪呢?区别在于,如果我let出来的变量是在某一个区块内,那么实现的效果就会与var一样;而var呈现给我们的,是声明的变量在全局都有效。由此我们可以得出一个结论:


ES6中的let,作用等同于var ,都是用来声明变量,然而它所生命的变量,只能在let命令所处代码片段中生效。


至此,我们再来看看以下代码:


var a = [];
for (var i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    }
}
a[4](); // 10


这里输出10应该没什么异议吧?可为什么是输出10呢?一句简单的“循环机制决定最终结果”可以回答吗?大家先思考一下,并且看看下面这段代码:


var a = [];
for (let i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    }
}
a[4](); // 4


看到了吧?同样的一套代码,只是将var 改为let ,就可以成功输出对应的索引值。那这究竟是为何呢?其实大家看出来了,跟var和let有巨大关系。


首先讲一下,有些同学可能不知道:


console.log();
//实际上它的真身应该写为:
window.console.log();
//但由于window下的方法可以直接省略window,所以你才会只写了console.log();


基于以上知识的铺垫,我们就可以来解释var 与 let出来的不同结果。


var所声明的 i 在以上代码中是全局变量,有且只有这一个,而console.log(i)中的i最终只能指向一个 i,这个i就是我们通过var声明的 i 。那么通过var声明的这个 i ,其实就是for循环运行到最后生成的 i,即为10。因此你在循环之外,无论怎么输出,得到的都会是10。


而let声明的 i,只能在上面的for循环中有效,因此每轮循环都会让 i 反复更新,同时js引擎会记住上一轮循环得出的 i 的值,这样你在循环外输出a[index]();时,索引值index就决定了 i 的值。


现在明白ES6中let和var的区别了吧?


回复 使用道具
举报
卷毛维安

发表于 05-12 22:15 显示全部楼层

回复 支持 反对 使用道具
举报
涅槃兰心

发表于 05-10 22:12 显示全部楼层

回复 支持 反对 使用道具
举报
挽梨

发表于 05-07 04:22 显示全部楼层

回复 支持 反对 使用道具
举报
周牧

发表于 04-25 18:51 显示全部楼层

回复 支持 反对 使用道具
举报
旧霾街

发表于 04-22 08:38 显示全部楼层

回复 支持 反对 使用道具
举报
大少女

发表于 04-17 11:15 显示全部楼层

回复 支持 反对 使用道具
举报
小灸舞

发表于 04-11 23:38 显示全部楼层

回复 支持 反对 使用道具
举报
周牧

发表于 04-05 10:44 显示全部楼层

回复 支持 反对 使用道具
举报
TigerCY

发表于 03-07 03:51 显示全部楼层

支持!支持!!

回复 支持 反对 使用道具
举报
12下一页

发表新文章
赵文贤老师

小码哥名师团队

1

学分

1029

学币

1156

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1156

小码哥一周年勋章前100注册用户勋章

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育