专栏首页喵叔's 专栏既生 var 何生 let

既生 var 何生 let

说到 let 和 var 对于前端的同学一定都不陌生,let 是 ES6 提供的一个新的关键字,它和 var 一样都是用来声明变量的,那么你是否想过既生 var 何生 let ?下面就来说一说为什么要加入 let。

首先,在 js 中存在变量提升的问题,所谓的变量提升就是指变量的声明会提升到所有作用域的顶部,比如下面这样:

console.log(a);
var a="123";

上面这段代码经过 js 变量提升处理后就等价于下面这段代码:

var a="1";
var func=function(){
console.log(a);
var a="12345";
}
func();

虽然变量提升给我们带来了很大的方便,但是它会不知不觉的给开发人员带来一些难以察觉的问题,例如下面这段代码:

上面这段代码存在一个问题,在函数中调用的变量 a 并不是 第一行所定义的 a 而是函数内部所定义的 a ,这是因为 js 的变量提升把函数中定义的 a 提升到了函数的开头,要解决这个问题我们就要使用 let 关键字,我们把代码中的 var 全都改为 let 后,再次运行代码,这时控制台就会显示 Identifier ‘a’ has already been declared 这个错误提示。这是因为在函数内部执行 let a 之前 a 位于暂时性死区中,因此这个时候使用变量 a 就会抛出异常。

其次, let 也可以很好的控制变量的作用域范围,我们来看一下下面的代码:

for (var i=0;i<10;i++){
  setTimeout(()=>{
  	console.log(i)
  },300);
}

上述代码运行后将会连续输出10次 10 ,这是因为在循环体中 var 变量声明的是一个全局变量,每次循环就是在给这个变量加 1,等到 setTimeout 函数执行回调的时候就这个变量就变成了 10 ,因此会输出 10次 10。同样我们利用 let 来改进一下上面的代码后将会一次输出0、1、2、3、4、5、6、7、8、9,这是因为 let 声明的变量是绑定在块级作用域上的,每次循环就会创建一个新的变量,也就是说每次 setTimeout 执行回调使用的是自己的变量 i 。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 控制反转/依赖注入简明教程

    在面向对象中IOC是一个重要的设计思想。这篇文章将带领大家快速掌握控制反转和依赖注入。

    喵叔
  • 控制反转_依赖注入简明教程

    在面向对象中IOC是一个重要的设计思想。这篇文章将带领大家快速掌握控制反转和依赖注入。

    喵叔
  • Entity Framework Core 实现全局查询过滤

    微软在 Entity Framework Core 2+ 中引入了全局查询过滤器,简化了构建多租户应用程序和实体软删除的复杂度。这篇文章我将通过代码的形式对全局...

    喵叔
  • RTS人工智能研究的历史

    在过去十年中,研究人员已经从单独研究RTS游戏的不同人工智能技术,转变为更加复杂的游戏中的合作与竞争,不同的技术进行了对比。为了使这项工作取得成功,以下条件是必...

    刀刀老高
  • Keso、冯大辉都在用!这个小程序,让人与人之间更有温度 | MINA 奖

    知晓君
  • 《快学 Go 语言》第 6 课 —— 字典

    字典在数学上的词汇是映射,将一个集合中的所有元素关联到另一个集合中的部分或全部元素,并且只能是一一映射或者多对一映射。

    老钱
  • 如何用C语言输出杨辉三角

    题目描述:还记得中学时候学过的杨辉三角吗?具体的定义这里不再描述,你可以参考以下的图形:

    小Bob来啦
  • 『统计学』最常用的数据分析方法都在这了!Part.2

    主成分分析(Principal Component Analysis,PCA), 是一种统计方法。通过正交变换将一组可能存在相关性的变量转换为一组线性不相关的...

    朱小五
  • 硬核干货来了!鹅厂前端工程师手把手教你实现热力图!

    ? 各位小伙伴们,还记得今年年初时我们推出的数据可视化组件吗?《助你开启“上帝视角” 数据可视化组件全新上线》。这些基于地图的数据可视化组件,以附加库的形式加...

    腾讯位置服务
  • C# 空合并操作符(??)不可重载?其实有黑科技可以间接重载!

    发布于 2018-09-15 14:59 更新于 2018-12...

    walterlv

扫码关注云+社区

领取腾讯云代金券