zoukankan      html  css  js  c++  java
  • 认识 var、let、const

    我们通过声明、初始化、值的可变性、作用域、变量提升以及在工作中如何使用等多个方面来详细了解var、let、const等关键字功能与特点。

    声明

    var,let:可以先声明,后赋值(初始化),默认值是 undefined
    const:不能将声明与初始化单独分开,否则报错,没有默认值。

    var:声明的标识符可以被重复声明多次,多次声明进行的都是覆盖操作,
    const,let:同一个标识符不能同时声明多次,否则报语法错误。

    let variable;
    let variable; //Uncaught SyntaxError: Identifier 'x' has already been declared
    

    初始化

    var,let:可以先定义再初始化,默认值为 undefined
    const:不能将变量的声明与初始分离进行单独操作。

     const variable //Uncaught SyntaxError: Missing initializer in const declaration
    

    值的改变

    const:不可以改变值,定义的是不变量。
    let,var:定义的变量可以改变值。

    const variable = 1;
    variable = 2; //Uncaught TypeError: Assignment to constant variable.
    

    但是const可以对引用类型的值进行操作。

    const arr = [];
    arr.push(1); //[1]
    

    作用域

    var:不具有块级作用域。
    const,let:都具有块级作用域。

    for(var a=0;a<3;a++);
    for(let b=0;b<3;b++);
    a; //3
    
    if(a){
        const c = 0;
    }
    
    b; //Uncaught ReferenceError: b is not defined
    c; //ReferenceError: c is not defined
    

    标识符提升

    var: 定义的变量存在变量提升情况。
    const,let:声明的变量都不具有变量提升的情况,否则报错。

    console.log(a); //Uncaught ReferenceError: a is not defined
    let a = 1;
    

    如何使用?

    目前很多浏览器对于 ES6的兼容已经越来越强大了,所以未来只按照 ES5的方式去写代码绝对是不够的,因此从此刻开始,我们要将更多已经成熟并且流行的 ES6新特性加入到我们的代码中,当然,这势必会对现有的规范与编码习惯造成很大的冲击,但是我想,学习一门新技术,技术本身并非全部,而是要将新技术更好的融入现有的工作任务中去,去发现新特性解决问题的本质才是重中之重。

    通过对 var,let,const在声明,赋值,作用域等对比,我们可以明显的得出一个使用的限制等级的划分:

    var -> let -> const
    

    而在具体的工作中,对我们编写的代码结合上面的限制等级一起进行分析,就不难得出var,let,const在不同地方,不同层面的具体应用了

    例如,let相比 var除了具有块级作用域,在全局代码或者是函数代码中letvar并没有很大的区别。但是一旦在全局代码与函数代码中具有块级范围(JS并不具有块级代码),例如,if,for,while,with 等语句时,并在其中通过 var,let 定义了变量,那么情况就会有很大的不同:

    
    function test1(){
        
      var a = 1;  
      let b = 2;
      console.log(a);
      console.log(b);
      
    }
    
    function test2(){
        
      var a = 1;  
      for(let i=0;i<3;i++){
        ;
      }
      console.log(a);
      console.log(i);
      
    }
    
    test1();
    test2();
    
    

    const 相比 var 具有块级作用域,再对比 let ,它的声明与初始化必须同时进行,值一旦初始化便不可改变,所以,const通常用来定义一些全局的常量,例如通过require载入的模块,或者用于全局配置的不变量变量等。

    另外需要注意的是,const值如果是一个对象,那么允许修改对象的属性而不允许修改变量本身的值。

    const b = {};
    
    b.x = 1;
    b.y = 2;
    
    console.log(b);
    
    b = {
        z: 1
    };
    console.log(b);
    

    总的来说在具体工作中使用,全局不变的量可以用const定义,局部作用域中的块级范围代码可以通过let定义,而其它一般代码依然可以继续使用我们更为熟悉的 var关键字。

  • 相关阅读:
    WEB前端开发规范文档
    js九九乘法表
    阿里前端两年随想
    自动播放选项卡
    HTML+CSS编写规范
    简易秒表
    关于响应式布局
    关于PHP语言
    关于CSS3的小知识点之2D变换
    关于H5框架之Bootstrap的小知识
  • 原文地址:https://www.cnblogs.com/HCJJ/p/7992770.html
Copyright © 2011-2022 走看看