ES6核心知识解析03:为什么用let和const取代var

在上一节ES6核心知识解析02:var被淘汰的三大缺点中,我们谈到了var的缺陷。

在ES6出现之前,我们都是使用var这个关键字来声明变量,那么它被let和const取而代之肯定是因为有弊端。而let和const就是为了弥补这些弊端,或者说解决这些痛点的。

那么因此let和const的3个非常重要的特点

1、只在块级作用域内有效,并且不允许重复声明

2、不存在变量提升

3、不会成为window属性

接着咱们一个一个分析↓


1、只在块级作用域内有效,并且不允许重复声明

声明的变量只在其所在的代码块内有效,在代码块外访问会报错

javascript 复制代码
if(true){
    let tt = "天天向上"; //只在代码块内有效
}
console.log(tt); //代码块外访问报错:Uncaught ReferenceError:tt is not defined

//而同样的变量换做var来声明

if(true){
    var tt = "天天向上"; //var没有块级作用域
}
console.log(tt); 
//控制台输出
天天向上

内层变量和外层同名变量互不影响

javascript 复制代码
let title = "天天快乐";
if(true){
    let title = "天天发财";
    console.log(title);
}
console.log(title);

//由于只在代码块内有效,内层变量不会覆盖外层变量
//控制台输出结果为

天天发财
天天快乐

//同样的变量换做var来声明
var title = "天天快乐";
if(true){
    var title = "天天发财";
    console.log(title);
}
console.log(title);

//先声明的变量值被后声明的变量值覆盖
//控制台输出结果为

天天发财
天天发财

同一代码块中,不允许重复声明

javascript 复制代码
if(true){
    let title = "天天快乐";
    let title = "天天发财";
    console.log(title);
}

//控制台报错
Uncaught SyntaxError: Identifier 'title' has already been declared.

2、不存在变量提升

如果在声明之前使用,就会报错(这个东西还不存在呢,你怎么使用?更符合正常思维。而var在存在之前使用,则是不会报错的)

javascript 复制代码
console.log(tt);
let tt = "天天开心";
//报错
Uncaught ReferenceError: Cannot access 'tt' before initialization.

3、不会成为window属性

javascript 复制代码
// var → 会变成 window 的属性
var a = 100;
console.log(window.a); // 100 ✅

// let → 不会挂到 window
let b = 200;
console.log(window.b); // undefined ❌

关于用let还是用const的最佳实践

以上3个特点都是 let 和 const 共有的,那什么时候用let?什么时候用const呢?

它俩有非常重要的一点区别

let 用于声明变量,可以被重新赋值

const 用于声明常量,不可以被重新赋值

javascript 复制代码
if(true){
    let title = "天天快乐";
    title = "天天发财";
    console.log(title);  //控制台将输出 天天发财

    const tt = "好运来"
    tt = "哇哈哈"; //会报错:Uncaught TypeErroe: Assignment to constant variable.
}

最佳实践的代码规范:优先使用const,主要有以下几个原因:

1.当我们无法判断一个变量的值究竟会不会再改变,无脑用const,等到后期需要改变时,再将const声明改为let声明。

2.如果一个变量的值是不允许修改的,但是我们却用let声明了,后期改变就会导致程序出现难以觉察的bug,而用const声明就可以有效避免无意间修改变量导致的bug。

【注】:这个最佳实践也是被ESlint收录的,如果用let声明的某个变量值没有发生改变,它会提示我们使用const来代替。


加餐:经典面试题

某次面试,本程序媛真的遇到过*......*

javascript 复制代码
for(var i = 0; i < 4; i++){
    setTimeout(function(){
        console.log(i);
    },1000)
}

以上代码的运行过程和输出结果是什么样的?

如果前端基础知识不好的小伙伴,肯定会一眼觉得是:每隔1秒输出1个数字,分别是0123

但

其实

肯定

不是这样的

正确答案:循环1秒后,一次性输出4个4。

这里边会涉及到++事件循环机制++(这个以后会细说,此次暂且不讲)

简单来说就是程序先执行了for循环,由于 i 具有全局作用域 ,因此整个循环只有一个 i ,循环执行完,变量 i 由0变成了4,再执行setTimeout,然后console打印的是同一个 i即输出4个4。

那同样的代码,变量换做let来声明,又将会是什么样的结果呢?

javascript 复制代码
for(let i = 0; i < 4; i++){
    setTimeout(function(){
        console.log(i);
    },1000)
}

正确答案:循环1秒后,一次性输出0123

程序执行过程:先执行for循环,let 是块级作用域,每一轮循环都会创建一个新的 i,独立保存 ,定时器里引用的是当前轮次的 i

由于以上两种结果都是一次性输出的,那么想要实现每隔一秒输出一个数字,并且分别输出0123,该怎么做呢?


各位小伙伴可以讨论一下哈,我先在这留个小尾巴,以后我们还会再聊这道经典题哈😃

相关推荐
米米商聊8 小时前
同名附件为什么被 Map 覆盖?重复键与一对多索引
前端·javascript
echome8889 小时前
Python 异常处理:try、else、finally 的正确搭配
开发语言·前端·python·异常处理·编程技巧
时间的情敌9 小时前
OpenLayers 实战|Vue3 + OpenLayers 完整工程案例(加载天地图、要素、弹窗、绘制、WFS)
前端·openlayers
陈随易9 小时前
下载神器!Motrix 停更三年后重写回归
前端·后端·程序员
前端的日常9 小时前
一个人+AI做情侣食谱小程序,0 费用的服务器
前端·后端
计算机魔术师10 小时前
谷歌搜索广告踩刹车,AI广告成为救命稻草
前端
总要学点什么10 小时前
第81篇:数据可视化-PM2.5分布——让圆点的胖瘦替每座城市报出浓度
前端·信息可视化·echarts·cesium·空间分析
IT_陈寒10 小时前
Vue的v-for里用了个临时变量,页面直接挂了
前端·人工智能·后端
hunter_07610 小时前
一次 iOS 真机签名 409 的完整排查:证书、设备、描述文件为什么总是"对不上"
前端
枣把儿10 小时前
开源!公众号排版+一键发布工具懒人版
前端