• var与let的区别


    var与let的区别

    前言:
      在没接触Es6之前,我们在js中声明都是通过var来声明变量的,var声明变量虽说方便,但是,又有一些自己的诟病,下边来说一说,这三个的区别!

    var

      var相信大家都不陌生,前端在日常编程中,谁也离不开他,他的合理运用,让我们编写出适合自己的,适合浏览器的程序!

    console.log(a)//undefind
    var a=2;
    

      都知道我们前端程序都是自上而下执行,为什么他没发现a这个变量他的值变成了undefind,这就说到了我们var自带的变量提升,在没有声明这个变量之前,你这个变量具有全局的属性,都会进行变量提升!
    它的实际样子是这样的

    var a;
    console.log(a)//undefind
    var a=2;
    

    大家这个样子就看懂了吧!

    var与let
    {
      let a = 10;
      var b = 1;
    }
    
    a // ReferenceError: a is not defined.
    b // 1
    

      大家都看到了,var声明的b在花括号外边打印出来,而let却报了一个错误!这就是let与咱们var 的区别,它的变量是区域的,也就是区域变量!

    //在来看一个例子
    if (true) {
      tmp = 'abc'; // ReferenceError
      console.log(tmp); // ReferenceError
    
      let tmp;
      console.log(tmp); // undefined
    
      tmp = 123;
      console.log(tmp); // 123
    }
    

    上面代码中,在let命令声明变量tmp之前,都属于变量tmp的“死区”

    // var 的情况
    console.log(foo); // 输出undefined
    var foo = 2;
    
    // let 的情况
    console.log(bar); // 报错ReferenceError
    let bar = 2;
    

    var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。

    为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

    function f1() {
      let n = 5;
      if (true) {
        let n = 10;
      }
      console.log(n); // 5
    }
    

    上边这个变量如果用var声明的话会打印出10,而let声明的还是5,这就是块级作用域吧!都知道咱们的var有函数作用域域全局全用域,来咱们的let是块级作用域!他带来了很多好处!

    var s = 'hello';
    
    for (var i = 0; i < s.length; i++) {
      console.log(s[i]);
    }
    
    console.log(i);//5
    

    函数在执行完之后泄露成了全局变量,而用let声明的则没有这一点

    let s = 'hello';
    
    for (let i = 0; i < s.length; i++) {
      console.log(s[i]);
    }
    
    console.log(i);//Uncaught TypeError: i is not a function
    

    es6新增的let变成了块级可以防止内存泄露。。。好处还是很多的,这就是let与var的一些区别!

  • 相关阅读:
    JavaScript对象创建的几种方式
    【应知应会】15个常用的JavaScript字符串操作方法
    JFreeChart 之折线图
    JFreeChart 之饼图
    百度 Echart 的使用
    UEditor 的使用
    获取中文汉字字符串相应的拼音和首字母的大小写
    Java 操纵XML之修改XML文件
    Java 操纵XML之读取XML文件
    Java 操纵XML之创建XML文件
  • 原文地址:https://www.cnblogs.com/chenxua/p/7149121.html
Copyright © 2020-2023  润新知