let与var的区别_奈落_前端开发者

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

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

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

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

代码1:

代码1:

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

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

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

2.let作用域不会被提升

2.let作用域不会被提升

代码2:

代码2:

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

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

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

代码2相当于:

代码2相当于:

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

3.let不能被重复定义

3.let不能被重复定义

代码3:

代码3:

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

上面这段代码运行会报错:Identifier ‘str2’ has already been declared

上面这段代码运行会报错:Identifier ‘str2’ has already been declared

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

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

4.let父子作用域

4.let父子作用域

代码4:

代码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>
<!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个按钮,因为此时在点击的事件触发的时候,for循环已经走完了,而此时的i的值为5,此时i变成全局的了,所以不管点击哪个都会弹出点击第5个按钮。

代码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>
<!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对应的就是每次循环的值。

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

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

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

 

» 本文来自:前端开发者 » 《let与var的区别_奈落_前端开发者》
» 本文链接地址:https://www.rokub.com/73170.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!