美文网首页
es6中的let/const

es6中的let/const

作者: cctosuper | 来源:发表于2019-03-20 10:09 被阅读0次

let 和 const

  1. let 声明的变量的作用域是块级的
  2. let 不能重复声明已经存在的变量
  3. let 有暂时死区,不会被提升
    however:
var liList = document.querySelectorAll('li') // 共5个li
for( let i=0; i<liList.length; i++){
  liList[i].onclick = function(){
    console.log(i)
  }
} //分别打印0、1、2、3、4

明明声明了一个 i,循环结束后 i 的值还是变为 5 才对;查阅一番发现:

  1. for( let i = 0; i< 5; i++) 这句话的圆括号之间,有一个隐藏的作用域
  1. for( let i = 0; i< 5; i++) { 循环体 } 在每次执行循环体之前,JS 引擎会把 i 在循环体的上下文中重新声明及初始化一次。

可以近似的理解为:

var liList = document.querySelectorAll('li')
for (let i=0; i<liList.length; i++) {
    let i = 隐藏作用域中的i //please see me me me
    liList[i].onclick = function () {
        console.log(i)
    }
}

这样的话,5 次循环,就会有 5 个不同的 i,加上隐藏作用域的 i,一共有 6 个 i;
总的来说就是 let/const 在与 for 一起用时,会有一个 perlterationBindings 的概念(语法糖)
let 声明也会提升

  1. let 声明会提升到块顶部
  2. 从块顶部到该变量的初始化语句, 这块区域叫做暂时性死区(TDZ)
  3. 如果在 TDZ 使用该变量,就会报错
  4. 不与 hoisting 等价
let a = 1
{
    a = 2
    let a
}

可近似理解为

let a = 1
{
    let a //TDZ开始的地方
    'start a TDZ'
    a = 2 //由于 a=2在TDZ中,报错
    a // TDZ结束的地方
    'end a TDZ'
}

所以,let 提升了,但是由于 TDZ 的存在,你不能在声明之前使用这个变量

JS变量的【创建create、初始化initialize和赋值assign】

  • let: 创建过程被提升了,但是初始化没有提升
  • var: 创建和初始化都被提升了
  • function: 创建初始化和赋值都被提升了
  • const: const只有创建和初始化,没有赋值过程


    快速理解

*薛定谔的X
如果 你这样写
<script>let x = x</script>
那么, 其他script都无法在全局作用域下使用x变量了, 无论是对x进行赋值、取值还是声明 都不行~

也就是说现在x处于一种【既被定义了,又没被定义】的中间状态。

说明,如果let x的初始化过程失败了,那么

  1. x变量就将永远处于created的状态
  2. 你无法再次对x进行初始化(初始化只有一次机会,而那次机会你失败了)。
  3. 由于x无法被初始化, 所以x永远处在暂时死区(limbo!!)

相关文章

  • ES6(let 与 const)

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

  • es6常用语法

    const 和 let 在es6语法规范中,尽量使用let替代var,如果在const 和let中选,优先使用co...

  • js 中声明常量关键字 var、let、const

    js 中声明常量的关键字:var、let、const,其中 let 和 const 是 ES6 中新增的关键字。 ...

  • (JS)

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

  • ES6中的let和const命令

    ES6中的let和const命令 let命令 ES6 新增了let命令,用来声明变量。它的用法类似于var,但是...

  • js 变量提升(3)

    ### ES6中let创建的变量不存在变量提升 /* * 在ES6中基于let或者CONST等方式创建变量或者函数...

  • ES6笔记

    let 和 const ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一...

  • es6,es7,es8语法总结

    ES6 1. var let const let,const具有块级作用域,不具有变量提升 const 用...

  • ES 6 7 8 随笔 QAQ

    ES6 1. var let const let,const具有块级作用域,不具有变量提升 const 用...

  • react 入门基础(一)之ES6

    ####ES6 let const var 三者的区别 ### 1. let const 不能重复声明变...

网友评论

      本文标题:es6中的let/const

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