美文网首页
let和const

let和const

作者: 盲流感 | 来源:发表于2019-02-14 11:48 被阅读0次

let/const(常用)

let和var 区别

  • let,const用于声明变量,用来替代老语法的var关键字,与var不同的是,let/const会创建一个块级作用域(通俗讲就是一个花括号内是一个新的作用域)

  • let/const关键字声明变量的for循环和var声明的有些不同

    image.png
    for循环分为3部分,第一部分包含一个变量声明,第二部分包含一个循环的退出条件,第三部分包含每次循环最后要执行的表达式,也就是说第一部分在这个for循环中只会执行一次var i = 0,而后面的两个部分在每次循环的时候都会执行一遍
    image.png
    而使用使用let/const关键字声明变量的for循环,除了会创建块级作用域,\color{red}{let/const还会将它绑定到每个循环中,确保对上个循环结束时候的值进行重新赋值}

    什么意思呢?简而言之就是每次循环都会声明一次(对比var声明的for循环只会声明一次),可以这么理解let/const中的for循环

    给每次循环创建一个块级作用域:


    image.png
  • 暂时性死区
    使用let/const声明的变量,从一开始就形成了封闭作用域,在声明变量之前是无法使用这个变量的,这个特点也是为了弥补var的缺陷(var声明的变量有变量提升)


    image.png

在预编译的阶段,JS编译器会先解析一遍判断是否有let/const声明的变量,如果在一个花括号中存在使用let/const声明的变量,则ES6规定这些变量在没声明前是无法使用的,随后再是进入执行阶段执行代码
这里当满足if的条件时,进入true的逻辑,这里因为使用了let声明了变量name,在一开始就"劫持了这个作用域",使得任何在let声明之前使用name的操作都会报错

使用var声明的变量,因为会有变量提升,同样也是发生在预编译阶段,var会提升到当前函数作用域的顶部并且默认赋值为undefined,如果这几行代码是在全局作用域下,则name变量会直接提升到全局作用域,随后进入执行阶段执行代码,name被赋值为"abc",并且可以成功打印出字符串abc
相当于这样


image.png image.png

可以看到使用let声明的变量x是在一个叫script作用域下的,而var声明的变量因为变量提升所以提升到了全局变量window对象中,这使我们能放心的使用新语法,不用担心污染全局的window对象

const

1.const声明变量的时候必须赋值,否则会报错,同样使用const声明的变量被修改了也会报错

建议

在日常开发中,我的建议是全面拥抱let/const,一般的变量声明使用let关键字,而当声明一些配置项(类似接口地址,npm依赖包,分页器默认页数等一些一旦声明后就不会改变的变量)的时候可以使用const,来显式的告诉项目其他开发者,这个变量是不能改变的(const声明的常量建议使用全大写字母标识,单词间用下划线),同时也建议了解var关键字的缺陷(变量提升,污染全局变量等),这样才能更好的使用新语法

相关文章

  • let和const

    新的赋值语句let和const let和const命令

  • 工作中常用的 ES6 语法

    变量声明 let 和const 不用var, 用const声明只读变量,let声明变量。let和const都是块级...

  • 关于ES6以及ES6常用的方法

    1、变量声明let和const let表示变量、const表示常量。let和const都是块级作用域。 2、模板字...

  • ES6需要记忆理解的地方

    let和const命令 1、let和const均无变量提升。2、let变量指向的地址可变,const指向的地址不可...

  • (JS)

    ES6 let、const和var的区别 let和const声明变量不存在变量提升 let和const不能重复声明...

  • ES6这些就够了

    1.变量声明const和let let表示变量、const表示常量。let和const都是块级作用域 2.模板字符...

  • 【JS】从ECMA学习let、const、var变量声明与声明提

    let、const、var是JS中的声明关键字 let和const 我们熟知的let和const的特性,常见的就有...

  • ES6编码风格

    http://es6.ruanyifeng.com/#docs/style let和const let和const...

  • 2018-09-13

    一、let和const const和let的异同点 相同点:const和let都是在当前块内有效,执行到块外会被销...

  • ES6(let 与 const)

    ES6中引入了let 和 const来声明变量,我们来看下let 和 const 的使用 一、let let定义的...

网友评论

      本文标题:let和const

      本文链接:https://www.haomeiwen.com/subject/idaseqtx.html