let与var的区别

1.let作用域局限于当前代码块

文章中//后面的均为打印结果

代码1：

{
    var str1 = "小花";
    let str2 = "小明";
    console.log(str1); //小花
    console.log(str2); //小明
}
console.log(str1); //小花
console.log(str2); //Error:str2 is not defined

let作用域仅限于当前代码块，而var的作用域是全局的

2.let作用域不会被提升

代码2：

{
    console.log(str1); //undedined
    console.log(str2); //str2 is not defined
    var str1 = "小花";
    let str2 = "小明";
}

let作用域不会被提升，而var作用域会被提升

代码2相当于：

{
    var str1;
    console.log(str1); //undedined
    console.log(str2); //str2 is not defined
    str1 = "小花";
    let str2 = "小明";
}

3.let不能被重复定义

代码3：

var str1 = "小花1";
var str1 = "小花2";
let str2 = "小明1";
let str2 = "小明2";

上面这段代码运行会报错：Identifier 'str2' has already been declared

var重复定义后面的会覆盖前面的，而let则不行，会报语法错误，str2标识符已经被声明

4.let父子作用域

代码4：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>learn</title>
  </head>
  <body>
      <button>按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
      <button>按钮4</button>
      <button>按钮5</button>
      <script>
        var btns = document.querySelectorAll('button')
        for(var i=0;i<btns.length;i++){
            btns[i].onclick = function(){
            alert('点击第'+i+'个按钮')
          }
        }
      </script>
  </body>
</html>

此时不管点击哪个都是弹出点击第5个按钮，因为此时在点击的事件触发的时候，for循环已经走完了，而此时的i的值为5，此时i变成全局的了，所以不管点击哪个都会弹出点击第5个按钮。

代码5：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>learn</title>
  </head>
  <body>
      <button>按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
      <button>按钮4</button>
      <button>按钮5</button>
      <script>
        let btns = document.querySelectorAll('button')
        for(let i=0;i<btns.length;i++){
            btns[i].onclick = function(){
            alert('点击第'+i+'按钮')
            }
        }
      </script>
  </body>
</html>

将上面代码的var改成let，点击的时候就会依次弹出对应的i的值，因为此时let定义的变量i的生命周期到for循环最后的大括号就结束了，所以alert中的i和btns[i]中的i对应的就是每次循环的值。

以上四点就是let与var的区别，如果有问题可以在评论里提哦。

 

posted @ 2019-09-15 16:22  星空海绵  阅读(1324)  评论(0)  编辑  收藏  举报