TypeScript学习笔记-3 变量声明

前言

出于学习提升、成果展示、记录心得等目的，我选择将自己的一点学习笔记放置出来，希望能够帮助到有需要的人，同时，由于个人知识的片面，文章中可能会出现不正确的地方，希望发现者可以及时指出，以便及时修正，不误导后来人。接下来就开始文章正文吧。

变量声明

TypeScript中的变量声明有多种方式，不同的方式进行变量声明有不同的效果，这里针对不同变量声明形式的功能进行说明。

var

当进行var声明时，无论var声明处于循环嵌套的哪一层，都默认在循环外层函数开始处进行了一次不赋值声明，如图所示，下方两个函数实质上含义相同：

function f(flag:boolean) {
    if(flag){var a=10}
    else {var b=5}
    console.log("a="+a+" b="+b)
}
console.log("falg=true")
f(true);
console.log("falg=false")
f(false);

function f(flag:boolean) {
    var a,b;
    if(flag){a=10}
    else {b=5}
    console.log("a="+a+" b="+b)
}
console.log("falg=true")
f(true);
console.log("falg=false")
f(false);

同时，var声明允许嵌套过程中的重复声明，如下图，实际输出并非我们推测的两行分别输出，而是在第一次求行内数之和后便因为内层嵌套循环的原因使外层for循环跳出，

function f(array) {
    for(var i=0;i<array.length;i++){
        console.log("现在输出第"+(i+1)+"行的和");
        var row=array[i];
        var sum=0;
        for(var i=0;i<row.length;i++){
            sum+=row[i];
        }
        console.log("第"+(i+1)+"行的和为"+sum+"，此时i的值为"+i);
    }
}
var array=[
    [1,2,3,4,5],
    [6,7,8,9,10]
];
f(array);

当然，解决问题的方法也很简单，就是把两个循环变量设置为不同的变量，如：

function f(array) {
    for(var i=0;i<array.length;i++){
        console.log("现在输出第"+(i+1)+"行的和");
        var row=array[i];
        var sum=0;
        for(var j=0;j<row.length;j++){
            sum+=row[j];
        }
        console.log("第"+(i+1)+"行的和为"+sum+"，此时i的值为"+i);
    }
}
var array=[
    [1,2,3,4,5],
    [6,7,8,9,10]
];
f(array);

let

let的用法与var相似，却又有许多不同的地方，最主要的两点分别是let声明的逻辑顺序以及let声明的块定义域规则。逻辑声明的话很好理解，即如果要对let声明的变量进行处理，必须要先声明再进行处理，如图所示：

function f() {
    let a=1;
    console.log(a);
}
function g() {
    console.log(b);
    let b=2;
}

此处可见，与var声明不同，let声明在程序逻辑中所处位置便是代码中其对应的位置，故与var声明有所不同。

至于块定义域规则，我们可以拿之前的var声明重复声明举例，如果将循环变量i的声明从var改为let之后，该程序便可以达到我们原版想要的目的，如图所示：

function f(array) {
    for(let i=0;i<array.length;i++){
        console.log("现在输出第"+(i+1)+"行的和");
        var row=array[i];
        var sum=0;
        for(let i=0;i<row.length;i++){
            sum+=row[i];
        }
        console.log("第"+(i+1)+"行的和为"+sum+"，此时i的值为"+i);
    }
}
var array=[
    [1,2,3,4,5],
    [6,7,8,9,10]
];
f(array);

这是因为let声明只能在对应的代码块中生效，例如第一层for循环（循环行数）中，声明的变量i只在本层循环中起作用，即，如果在for循环外添加一行输出i的值的函数，程序会报错i未被定义，同时，第一层循环中定义的i在第二层for循环中也处于未被定义的状态，这也是为什么这个程序可以正常运行的原因，因为第一层循环的i和第二层循环的i并不是同一个变量，而是名称一致但是作用范围不一样的两个变量。

const

const声明其实某种意义上来说可以看作是let声明的一个加强，因为const声明继承了let声明的大多数特性，同时，const本身的特性是作为一个常量存在，但此处的常量定义为引用的常量，对于其成员而言并不存在常量的特性，举例如下：

const people={
    name:"张三",
    sex:"man",
}
people={
    name:"张三",
    sex:"woman",
}

可见，对于引用层面的更改，const声明会进行相应的报错。

const people={
    name:"张三",
    sex:"man",
}
people.sex="woman";
console.log(people)

但是，对于对const声明内部属性的操作并不具有常量的属性。

一般而言，比起let声明，我们更推荐使用const声明，因为这样会使程序的数据变化更加易读。