第四章变量声明

前端外刊评论

2017-12-31

变量声明

一、let 和 const

let 和 const 是 JavaScript 里相对较新的变量声明方式。 let 在很多方面与 var 是相似的，但是可以帮助大家避免在 JavaScript 里常见一些问题（如作用域提升）。 const 是对 let 的一个增强，它能阻止对一个变量再次赋值。
因为 TypeScript 是 JavaScript 的超集，所以它本身就支持 let 和 const。推荐使用它们来代替 var。
使用最小特权原则，所有变量除了你计划去修改的都应该使用 const。

二、代码示例

//块级作用域变量的获取
function theCityThatAlwaysSleeps() {
    let getCity;

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

    return getCity();
}

//重定义及屏蔽，这个版本的循环能得到正确的结果，因为内层循环的i可以屏蔽掉外层循环的i
function sumMatrix(matrix: number[][]) {
    let sum = 0;
    for (let i = 0; i < matrix.length; i++) {
        var currentRow = matrix[i];
        for (let i = 0; i < currentRow.length; i++) {
            sum += currentRow[i];
        }
    }

    return sum;
}

//const 声明
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--;

三、解构

解构数组

//最简单的解构
let input = [1, 2];
let [first, second] = input;
console.log(first); // outputs 1
console.log(second); // outputs 2

// 交换变量
[first, second] = [second, first];

//作用于函数参数
function f([first, second]: [number, number]) {
    console.log(first);
    console.log(second);
}
f(input);

//数组里使用...语法创建剩余变量
let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // outputs 1
console.log(rest); // outputs [ 2, 3, 4 ]

//忽略你不关心的尾随元素
let [first] = [1, 2, 3, 4];
console.log(first); // outputs 1
let [, second, , fourth] = [1, 2, 3, 4];

对象解构

//对象解构
let o = {
    a: "foo",
    b: 12,
    c: "bar"
};
let { a, b } = o;

//就像数组解构，你可以用没有声明的赋值
({ a, b } = { a: "baz", b: 101 });

//你可以在对象里使用...语法创建剩余变量
let { a, ...passthrough } = o;
let total = passthrough.b + passthrough.c.length;

属性重命名

//你也可以给属性以不同的名字
let { a: newName1, b: newName2 } = o;

默认值

//默认值可以让你在属性为 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 {
    // ...
}

展开

//将一个数组展开为另一个数组
let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];

//将一个对象展开为另一个对象
let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = { ...defaults, food: "rich" };
//注意：如果前后对象有相同的属性，则后面的覆盖前面的

kitty 变量