zoukankan      html  css  js  c++  java
  • Typescript学习笔记(三)变量声明及作用域

    ts的变量声明有var,let和const,这尼玛完全跟es6一样嘛。就稍微介绍一下。

    大多数js开发者对于var很熟悉了,原生js里没有块级作用域,只有函数作用域和全局作用域,还存在var的变量提升的问题,导致一些不熟悉js的开发者会发现一些怪异事件。点击查看关于es6的let与const

    let声明

    let声明和var一样的写法,大家看前面的博客里面相信也看到了。

    拣重要的说,let和var的区别就是let使js实现了它的块级作用域,即词法作用域块作用域。

    而且它不存在变量提升。

    function f(input: boolean) {
        let a = 100;
    
        if (input) {
            // Still okay to reference 'a'
            let b = a + 1;
            return b;
        }
    
        // Error: 'b' doesn't exist here
        return b;
    }

    内部块一样能访问外部块,反之就不行了。这一特性使for循环的计数器就比较好用了,

    for(let i = 0; i < arr.length; i++){}
    
    console.log(i)
    //ReferenceError: i is not defined
    // 报错
    function () {
      let a = 10;
      var a = 1;
    }
    
    // 报错
    function () {
      let a = 10;
      let a = 1;
    }

     let是不允许重复声明的。

    需要注意的是,现在的ts编译器都是吧let直接编译为var,所以let的特性在浏览器支持之前还是无法试用的。

    在js里面输出10个10的例子,在let下就不一样了。

    for (let i = 0; i < 10 ; i++) {
        setTimeout(function() {console.log(i); }, 100 * i);
    }

    不仅是在循环里引入了一个新的变量环境,而是针对每次迭代都会创建这样一个新作用域。 这就是我们在使用立即执行的函数表达式时做的事。

    他会和我们预想的一样输出1-10。

    const

    const和let基本一致,只是const声明的变量被赋值后不能再改变(所以对于const来说,只声明不赋值,就会报错),作用域同let。

    const numLivesForCat = 9;
    const kitty = {
        name: "Aurora",
        numLives: numLivesForCat,
    }
    
    // Error
    kitty = {
        name: "Danielle",
        numLives: numLivesForCat
    };
    
    // all "okay"
    kitty.name = "Rory";
    kitty.name = "Kitty";
    kitty.name = "Cat";
    kitty.numLives--;
    const a = [];
    a.push("Hello"); // 可执行
    a.length = 0;    // 可执行
    a = ["Dave"];    // 报错

    这个数组和对象本身是可写的,但是如果将另一个数组赋值给const变量,就会报错。

    使用的法则:

    所有变量除了你计划去修改的都应该使用const

  • 相关阅读:
    MindMup 是一个开源的、在线的、简单的思维导图工具
    那些年我们用过的Python代码
    我心目中要求不高的理想团队
    与雨林再辩科学、宗教和道
    MySQL(一) 数据表数据库的基本操作
    hibernate(六) cascade(级联)和inverse关系详解
    java虚拟机内存区域的划分以及作用详解
    MySQL(二) 数据库数据类型详解
    MySQL(三) 数据库表的查询操作【重要】
    MySQL(四) 数据表的插入、更新、删除数据
  • 原文地址:https://www.cnblogs.com/dh-dh/p/5202824.html
Copyright © 2011-2022 走看看