欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

let与var的区别

程序员文章站 2022-05-18 21:18:11
1.let作用域局限于当前代码块 代码1： let作用域仅限于当前代码块，而var的作用域是全局的 2.let作用域不会被提升 代码2： let作用域不会被提升，而var作用域会被提升 代码2相当于： 3.let不能被重复定义 代码3： 上面这段代码运行会报错：Identifier 'str2' h ......

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的区别，如果有问题可以在评论里提哦。

 

上一篇： Android 使用URLConnection下载音频文件

下一篇： 函数默认参数与占位参数

推荐阅读