• ES6学习之-let 和const命令


    let 和const命令

    let命令 用来声明变量,类似于var 。let声明的变量 只在let命令所在的代码块内有效。 
    在for循环里也是如此 每次循环其实都是一个代码块

    function fn() {
        let a = 1;
    }
    console.log(a); //undefined
    
    
    //像以前一个经典案例:for循环绑定一个按钮点击事件,最后点击时却报错的情况,可以不用闭包 直接使用let声明变量i 即可解决;
    var btns = document.querySelectorAll(".btn");
    for(let i = 0; i < btns.length; i++){
        btns[i].addEventListener("click",function(){
           console.log(i); 
        });
    }

    let命令不存在变量提升现象 所以变量一定要在声明后使用 否则报错。 
    let命令不允许在同一作用域内重复声明 会报错。

    let a = 3;
    function fn() {
        console.log(a); // 打印出undefined 因为var声明的a变量名提升了
        var a = 4;
    }
    function fn() {
        console.log(a); //报错 ReferenceError 因为let声明语句不会变量名提升,智能先声明后只用 否则会报语法错误
        let a = 2;
    }

    const命令 是用来声明一个常量,一旦声明 常量的值就不能改变。跟let命令一样 const声明的变量也不提升,也是必须在声明之后才能使用。不过用const声明的引用类型时 是可以改变其属性的

    // 简单类型的变量
    const b = 1;
    b=2; //ReferenceError 报语法错误
    
    // 引用类型的变量
    const obj = {
        a: 1,
        b:2
    }
    obj.a = 3;
    console.log(obj.a); //3; 如果const声明的是引用类型 则可改变其属性值

    在es6中 用let 和const 声明的全局变量 不属于顶层对象 
    window或者globle对象的。

    const a = 1;
    let b = 2;
    console.log(window.a); // undefined
    console.log(window.b); // undefined

    在ECMAScript中,变量(或常量)的生命周期模式是固定的,由两种因素决定:作用域和对其的引用。 
    如:在某个函数作用域中声明的一个变量,函数外部就访问不到。 
    如果想要延长某个变量的生命周期,最常用的办法就是闭包。因为变量的生命周期是由对其的引用所决定,而闭包的原理便是利用高阶函数来产生能够穿透作用域的引用。

    function fn() {
        const innerVariable = "闭包变量";
        return function() {
            return innerVariable;
        }
    }
    var fn1 =  fn();
    console.log(fn1()); //"闭包变量"

    在ES2015中,数组类型又多了一个名为entries的方法,该方法可以返回对应的数组中每一个元素与其下标配对的一个新数组,例如:

    const arr = ['zhangsan','lisi','wangwu'];
    console.log(arr.entries()); //[[0,'zhangsan'],[1,'lisi'],[2,'wangwu']];
  • 相关阅读:
    windows端口占用处理方法
    【接口】接口测试常见响应码类型(二)
    【接口】SpringBoot+接口开发(一)
    【java+selenium3】Tesseract-OCR识别图片验证码 (十六)
    java读写Txt文件
    【java+selenium3】自动化基础小结+selenium原理揭秘 (十七)
    【java+selenium3】自动化cookie操作+图形验证码处理 (十五)
    【java+selenium3】自动化截图 (十四)
    【Java+selenium3】 Firefox/ IE/ Chrome主流浏览器自动化环境搭建(一)
    【java+selenium3】自动化处理文件上传 (十三)
  • 原文地址:https://www.cnblogs.com/chenshanyuanzi/p/7688083.html
Copyright © 2020-2023  润新知