TypeScript基础(二) 变量说明

2016-06-20 本文已影响1948人猫神战

这一篇文章主要是来探讨，为什么要用const和let替代var，还有ES6新特性：解构

js里面很多时候，var关键字写与不写对运行结果没有多大关系，可是如果实在严格模式下就不能运行，所以ts要规范js的编码风格，使之要像面向对象语言一样严谨，块级区域概念深入骨髓，接下来我们就来看看，为什么要替换掉var

var 应用场景

一般场景

一直以来我们都是通过var关键字定义JavaScript变量。

function f() {
    var a = 10;
    return function g() {
        var b = a + 1;
        return b;
    }
}

var gFunc = f();
gFunc(); // returns 11;

上面的例子里，g可以获取到f函数里定义的a变量。每当 g被调用时，它都可以访问到f里的a变量。即使当 g在f已经执行完后才被调用，它仍然可以访问及修改a。

作用域规则

对于熟悉其它语言的人来说，var声明有些奇怪的作用域规则。看下面的例子：

function f(shouldInitialize: boolean) {
    if (shouldInitialize) {
        var x = 10;
    }

    return x;
}

f(true);  // returns '10'
f(false); // returns 'undefined'

变量x是定义在if语句里面，可是可以在外面访问，我想会有很多读者会困惑这个问题吧。那是因为var声明之后，会在包含它的函数(function)，模块(闭包，module)，命名空间(namespace)或全局内部任何位置(window)被访问，而这里的if只是一个小小的代码块，对此没有影响，有些人称此为var作用域或函数作用域，函数参数也使用函数作用域。

这些作用域规则可能会引发一些错误。其中之一就是，多次声明同一个变量并不会报错：

function sumMatrix(matrix: number[][]) {
    var sum = 0;
    for (var i = 0; i < matrix.length; i++) {
        var currentRow = matrix[i];
        for (var i = 0; i < currentRow.length; i++) {
            sum += currentRow[i];
        }
    }

    return sum;
}

这里很容易看出一些问题，里层的for循环会覆盖变量i，因为所有i都引用相同的函数作用域内的变量。有经验的开发者们很清楚，这些问题可能在代码审查时漏掉，引发无穷的麻烦。

变量获取怪异之处

快速的猜一下下面的代码会返回什么：

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

好吧，看一下结果：

还记得我们上面讲的变量获取吗？

每当g被调用时，它都可以访问到f里的a变量。

setTimeOut是一个异步的方法，所以for代码块很快执行完，里面的方法就需要等待之后才会执行，而且每次执行都是访问同一个内存地址(i的地址)，所以最终的结果就都是10

不过在js里面对于这种情况为我们还是有对应的解决方案的，那就是使用闭包来解决，动态为每个setTimeOut分配一个内存块存储相关的临时变量，这样就可以解决上面借结果都是10的问题了。

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

这种奇怪的形式我们已经司空见惯了。参数 i会覆盖for循环里的i，但是因为我们起了同样的名字，所以我们不用怎么改for循环体里的代码。

let 声明

现在你已经知道了var存在一些问题，这恰好说明了为什么用let语句来声明变量。除了名字不同外， let与var的写法一致。

let hello = "Hello!";

记住一个概念：你要用规范的风格来编写TypeScript

块作用域

当用let声明一个变量，它使用的是词法作用域或块作用域。不同于使用 var声明的变量那样可以在包含它们的函数外访问，块作用域变量在包含它们的块或for循环之外是不能访问的。

function f(input: boolean) {
    let a = 100;

    if (input) {
        // 这里是可以访问到a的
        let b = a + 1;
        return b;
    }

    // 报错：变量b没有定义
    return b;
}

重定义及屏蔽

我们提过使用var声明时，它不在乎你声明多少次；你只会得到最新声明的那一个。

function f(x) {
    var x;
    var x;

    if (true) {
        var x;
    }
}

在上面的例子里，所有x的声明实际上都引用一个相同的x，并且这是完全有效的代码。这经常会成为bug的来源。好的是， let声明就不会这么宽松了。

let x = 10;
let x = 20; // 错误，不能在1个作用域里多次声明`x`

并不是要求两个均是块级作用域的声明TypeScript才会给出一个错误的警告。

function f(x) {
    let x = 100; // 错误: 变量x已经定义
}

function g() {
    let x = 100;
    var x = 100; // 错误: 不能重复定义变量x
}

并不是说块级作用域变量不能在函数作用域内声明。而是块级作用域变量需要在不用的块里声明。

function f(condition, x) {
    if (condition) {
        let x = 100;
        return x;
    }

    return x;
}

f(false, 0); // returns 0
f(true, 0);  // returns 100

块级作用域变量的获取

在我们最初谈及获取用var声明的变量时，我们简略地探究了一下在获取到了变量之后它的行为是怎样的。直观地讲，每次进入一个作用域时，它创建了一个变量的环境。就算作用域内代码已经执行完毕，这个环境与其捕获的变量依然存在。

function theCityThatAlwaysSleeps() {
    let getCity;

    if (true) {
        let city = "Seattle";
        getCity = function() {
            return city;
        }
    }

    return getCity();
}

因为我们已经在city的环境里获取到了city，所以就算if语句执行结束后我们仍然可以访问它。

回想一下前面setTimeout的例子，我们最后需要使用立即执行的函数表达式来获取每次for循环迭代里的状态。实际上，我们做的是为获取到的变量创建了一个新的变量环境。这样做挺痛苦的，但是幸运的是，你不必在TypeScript里这样做了。

当let声明出现在循环体里时拥有完全不同的行为。不仅是在循环里引入了一个新的变量环境，而是针对每次迭代都会创建这样一个新作用域。这就是我们在使用立即执行的函数表达式时做的事，所以在 setTimeout例子里我们仅使用let声明就可以了

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

其结果与我们预想的一模一样

const 声明

const 声明是声明变量的另一种方式,它们拥有与 let相同的作用域规则，但是不能对它们重新赋值。

它们引用的值是不可变的

const numLivesForCat = 9;
const kitty = {
    name: "Aurora",
    numLives: numLivesForCat,
}

// 错误，因为你修改了内存块地址，就修改了引用的值
kitty = {
    name: "Danielle",
    numLives: numLivesForCat
};

// 以下结果都正确，因为只会修改内存块的值，没有修改引用的值（内存块地址）
kitty.name = "Rory";
kitty.name = "Kitty";
kitty.name = "Cat";
kitty.numLives--;

除非你使用特殊的方法去避免，实际上const变量的内部状态是可修改的。

let vs const

现在我们有两种作用域相似的声明方式，我们自然会问到底应该使用哪个。与大多数泛泛的问题一样，答案是：依情况而定。

使用最小特权原则，所有变量除了你计划去修改的都应该使用const。基本原则就是如果一个变量不需要对它写入，那么其它使用这些代码的人也不能够写入它们，并且要思考为什么会需要对这些变量重新赋值。使用 const也可以让我们更容易的推测数据的流动。

另一方面，用户很喜欢let的简洁性。这个手册大部分地方都使用了 let。

跟据你的自己判断，如果合适的话，与团队成员商议一下。

解构

如果是第一看解构的代码，可能会有点懵逼，到底是什么鬼啊，因为这个是ES6的新语法。

解构数组

最简单的解构莫过于数组的解构赋值了：

let input = [1, 2];
let [first, second] = input;
console.log(first); // 输出 1
console.log(second); // 输出 2

你可以使用...name语法创建一个剩余变量列表：

let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 输出 1
console.log(rest); // 输出 [ 2, 3, 4 ]

或其它元素：

let [, second, , fourth] = [1, 2, 3, 4];

对象解构

你也可以解构对象：

let o = {
    a: "foo",
    b: 12,
    c: "bar"
}
let {a, b} = o;

属性重命名

你也可以给属性以不同的名字：

let {a: newName1, b: newName2} = o;

这里的语法开始变得混乱。你可以将 a: newName1 读做 "a 作为 newName1"。方向是从左到右，好像你写成了以下样子：

let newName1 = o.a;
let newName2 = o.b;

令人困惑的是，这里的冒号不是指示类型的。如果你想指定它的类型，仍然需要在其后写上完整的模式。

let {a, b}: {a: string, b: number} = o;

默认值

这是ES6里面的新特性，如果编译器没有环境，或浏览器不支持，建议使用最新版Chrome浏览器调试

默认值可以让你在属性为 undefined 时使用缺省值：

function keepWholeObject(wholeObject: {a: string, b?: number}) {
    let {a, b = 1001} = wholeObject;
}

函数声明

解构也能用于函数声明。看以下简单的情况：

type C = {a: string, b?: number}
function f({a, b}: C): void {
    // ...
}

但是，通常情况下更多的是指定默认值，解构默认值有些棘手。首先，你需要知道在设置默认值之前设置其类型。

function f({a, b} = {a: "", b: 0}): void {
    // ...
}
f();

其次，你需要知道在解构属性上给予一个默认或可选的属性用来替换主初始化列表。要知道 C 的定义有一个 b 可选属性：

function f({a, b = 0} = {a: ""}): void {
    // ...
}
f({a: "yes"}) // 正确： a默认值为"yes"，b默认值为0
f() // 正确：先设置默认值a为"",然后设置默认值b为0
f({}) // 错误：a参数缺少

我想有很多小伙伴会问，最后f({})怎么会出错呢？我不是设置了默认值的吗？

首先我们来看一看，里面默认值的设置有哪几步？
首先：{a, b = 0},这是默认值设置第一步，先在符号表里面设置a或b的默认值，

接下来：{a: ""}，这是默认值设置第二部，紧接着更新符号表的默认值

我们可以看一看下面的小程序：

function f({a=3,b="bbbb"}={b:"sdfsdfs"}){
    console.log(a+"---------"+b)
}
//输出为 3---------sdfsdfs

是不是感觉解构很强大呢？哈哈，不过要小心使用解构。从前面的例子可以看出，就算是最简单的解构也会有很多问题。尤其当存在深层嵌套解构的时候，就算这时没有堆叠在一起的重命名，默认值和类型注解，也是令人难以理解的。解构表达式要尽量保持小而简单。你自己也可以直接使用解构将会生成的赋值表达式。

【翻译：原文地址】