微学网

热门关键词:   as  thinkphp  ecshop  xxx  php分页  商务通
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

js的var和let有什么区别

发布时间:2020-03-05 来源:未知 点击:
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的区别,如果有问题可以在评论里提哦。


var 为什么会被 let 取代?很多哥们纠结标题取的不严谨或抠字眼,从而忽略了本文真正想要交流的内容。这让我很苦恼,起原先那个标题是因为我所在公司,我的一些技术好友,以及我在 github 上看到的一些源码,99% 看不到使用 var 了,对于 IOS 兼容、遗留老代码里仍使用 var 不在交流范围内。
 
先看用到 var 的一段代码。
 
 
function doSomething () {
    for (var i = 0; i < 5; i++) {
        console.log(i)
    }
    console.log('Finally ' + i)
}
 
doSomething()
打印结果:
 
 
Finally 5
i 在 for 语句里定义的,为什么在 for 语句外面仍然打印出来值了呢??
 
再看用到 let 的一段代码。
 
 
function doSomething () {
    for (let i = 0; i < 5; i++) {
        console.log(i)
    }
    console.log('Finally ' + i)
}
 
doSomething()
打印结果如下:
 
/Users/dkvirus/Documents/study/study-typescript/ex1/var.js:5
    console.log('Finally ' + i)
                             ^
 
ReferenceError: i is not defined
let 定义的变量 i 符合我们的常识,i 的作用域只在 for 语句里,在 for 外部用 i 变量报错未定义。
 
结论:
 
let 和 const 定义变量的作用域都是 离变量最近的那个块 内;
var 定义变量的作用域是 离变量最近的那个方法 内。上面,用 var 定义的 i 变量的作用域为离 i 最近的方法内,即 i 的作用域在 doSomething 内,所以在 for 语句外也能打印出 i 的值。
 


这就是微学网-程序员之家为你提供的"js的var和let有什么区别"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/7419.html

上一篇:$(window).load(function(){})和.onload区别

下一篇:没有了

网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 微信公众号 | 小程序 | 服务器 | APP开发 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

电脑版 | 移动版