• ES6 中的let 与 const关键字


    ES6 中的let 与 const关键字

    博客说明

    文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

    简介

    let和const是es6新增加的两个关键字,主要作用是用来声明变量

    let关键字

    用法

    let 声明的变量只在 let 命令所在的代码块内有效,不能重复声明

    { 
    	let a = 0;  
            var b = 1;
    	a   //此时输出 0 
            b   //此时输出 1
    } 
    a   // 此时报错 ReferenceError: a is not defined
    b   // 此时输出 1
    

    常用环境

    在使用for循环时,适合使用let命令

    for (let i = 0; i < 10; i++){
    	...
    }
    i // 此时报错 ReferenceError: i is not defined
    

    在上述代码中,i只在for循环体之中有效,在循环体之外调用就会报错

    var a = [];
    for (var i = 0; i < 10; i++){
      a[i] = function(){
        console.log(i);
      }
    }
    a[8]();  // 10
    

    在上述代码中,变量ivar命令声明的,在全局范围内都有效,所以全局只有一个变量i

    每一次循环,变量i的值都会发生改变,而循环内被赋给数组a的函数内部的console.log(i),里面的i指向的就是全局的i。也就是说,所有数组a的成员里面的i,指向的都是同一个i,导致运行时输出的是最后一轮的i的值,也就是 10。

    var a = [];
    for (let i = 0; i < 10; i++){
      a[i] = function(){
        console.log(i);
      }
    }
    a[8]();  // 8
    

    如果使用let,声明的变量仅在块级作用域内有效,最后输出的是 8。

    不存在变量提升

    let不存在变量提升,var存在变量提升

    var命令会发生“变量提升”现象,即变量可以在声明之前使用,值为undefinedlet命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

    console.log(a); //ReferenceError: a is not defined 
    let a = "apple"; 
    
    console.log(b); //undefined 
    var b = "banana";
    

    上述代码中,b在脚本开始运行时就存在了,但是还没有进行赋值,所以返回undefineda在变量声明之前不存在,所以会报错。

    const关键字

    用法

    const 声明一个只读变量,声明之后不允许改变

    const PI = "3.1415926";
    PI  // 此时输出3.1415926
    
    PI = 3;
    // TypeError: Assignment to constant variable.
    
    const MY_AGE;  // 此时报错SyntaxError: Missing initializer in const declaration    
    

    const一旦声明必须初始化,否则会报错,只声明不赋值也会报错

    暂时性死区(TDZ)

    只要代码块中包含let或者const,它所声明的变量就会绑定这个区域,不会再受外部的影响

    var tmp = 123;
    
    if (true) {
      tmp = 'abc'; // ReferenceError
      const tmp;
    }
    

    暂时性死区的范围

    在代码块内,使用let或者const命令声明变量之前,该变量都是不可用的。

    if (true) {
      // TDZ开始
      tmp = 'abc'; // ReferenceError
      console.log(tmp); // ReferenceError
    
      let tmp; // TDZ结束
      console.log(tmp); // undefined
    
      tmp = 123;
      console.log(tmp); // 123
    }
    

    感谢

    万能的网络

    菜鸟教程

    阮一峰的es6语法教程

    以及勤劳的自己,个人博客GitHub

    微信公众号

  • 相关阅读:
    httpclient详细介绍
    HttpClient
    JAVA WEB项目中各种路径的获取
    mvn 如何添加本地jar包 IDEA pom.xm
    jdbc连接数据库的步骤
    PostgreSQL 类型转换 -除法
    PostgreSQL学习手册
    前端工程师必备技能汇总
    github上一些觉得对自己工作有用的项目收集
    Ninja:Java全栈Web开发框架-Ninja中文网
  • 原文地址:https://www.cnblogs.com/guizimo/p/14954326.html
Copyright © 2020-2023  润新知