（一看就懂）JavaScript ES6入门——var、let、const的区别

var、let和const都是用来声明变量的，和var不同，let和const只在作用域内有用

     if(true){
       var a = 1
       let b = 2
       const c = 3
     }
     console.log(a); //1
     console.log(b); //b is not defined
     console.log(c); //c is not defined
    //  只对作用域内有用
     if(true){
       var a = 1
       let b = 2
       const c = 3
       console.log(a); //1
       console.log(b); //2
       console.log(c); //3
     }

使用var在全局中声明变量会作为window的属性,使用let、const则不会

   var a = 1
   let b = 2
   const c = 3
   console.log(a); //1
   console.log(window.a); //1
   
   console.log(b); //2
   console.log(window.b); //undefined

   console.log(c); //3
   console.log(window.c); //undefined

let和const在同一作用域中也不可以进行多次声明

    var a = 1
    var a = 2
    console.log(a); //2
    let b = 1
    let b = 2
    console.log(b); //Uncaught SyntaxError: Identifier 'b' has already been declared
    const c = 1
    const c = 2
    console.log(c); //Uncaught SyntaxError: Identifier 'c' has already been declared

和let不同 const多用来声明常量即不能改变变量内容

    let a = 1
    a = 2
    console.log(a) //2

    const b = 5
    b = 6
    console.log(b); //Uncaught TypeError: Assignment to constant variable

let声明时可以不赋值而const因不能改变内容的特性声明时必须赋值

     let a
     console.log(a) //undefined

     const b
     console.log(b) //Uncaught SyntaxError: Missing initializer in const declaration

var有变量提升而let、const没有变量提升

     console.log(a); //undefined
     console.log(b); //Uncaught ReferenceError: Cannot access 'b' before initialization
     console.log(c); //Uncaught ReferenceError: Cannot access 'c' before initialization
     var a = 1
     let b = 2
     const c = 3

因为var没有块级作用域而有函数作用域使得有些时候在for循环中得到的内容并不是自己想要的

<body>
     <ul>
          <li>0</li>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
     </ul>
</body>
<script>
     var li = document.querySelectorAll('ul li')
     for(var i = 0;i<=li.length;i++){
          li[i].addEventListener('click',()=>{
               console.log(i); //不管如何点击都是5
          })
     }
</script>

如果想用var实现点击打印当前点击的下标则需要使用闭包

<body>
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
<script>
    var li = document.querySelectorAll('ul li')
    for(var i = 0;i<=li.length;i++){
        ((i)=>{
            li[i].addEventListener('click',()=>{
            console.log(i); //这样就可以点击哪个打印出点击的下标
        })
        })(i)
    }
</script>

而使用let则不用写这么又臭又长的代码

<body>
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
<script>
    var li = document.querySelectorAll('ul li')
    for (let i = 0; i <= li.length; i++) {
        li[i].addEventListener('click', () => {
            console.log(i); //完美解决
        })
    }
</script>
posted @ 2021-12-11 18:57  俺想学前端  阅读(71)  评论(0)    收藏  举报