变量声明
let和const是JavaScript里相对较新的变量声明方式,而let在很多方面与var是相似的,但是可以避免在JavaScript里常见的一些问题.const是对let的一个增强,它能阻止对一个变量再次赋值.
因为TypeScript是JavaScript的超集,所以它本身支持let和const.
var声明
一直以来我们都是通过var关键字定义JavaScript变量:
var a = 10;
我们也能在函数内部定义变量
function f(){
var message = "Hello, world!";
return message;
}
我们也可以在其他函数内部访问相同的变量
function f() {
var a = 10;
return function g(){
var b = a + 1;
return b;
}
}
var g = f();
g();//return 11
function f() {
var a = 1;
a = 2;
var b = g();//这里调用了函数,传入了a=2
a = 3;//这里的赋值a=3并没有传入函数中
return b;
//定义函数
function g() {
return a;
}
}
f(); // returns 2
作用域规则
var声明有些奇怪的作用域规则
function f(shouldInitialize: boolean) {
if (shouldInitialize) {
var x = 10;
}
return x;
}
f(true);// 10;
f(false);// undefined
变量虽然定义在if语句里面,但是我们却可以在语句的外面访问它.这是因为var声明可以在包含它的函数,模块,命名空间或全局作用域内部任何位置被访问,包含它的代码块对此没有什么影响,有些人称此为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);
}//10个10
在这个for循环中,setTimeout在若干秒后执行一个函数,并且是在for循环结束后.for循环结束后,i的值为10.所以函数被调用的时候,它会打印出10.
一个通常的解决方法是使用立即执行的函数表达式(IIFE)来捕获每次迭代时i的值
for (var i = 0; i <10; i++){
(function(i) {
setTimeout(function(){
console.log(i);
}, 100 * i)
})(i);
}
参数i会覆盖for循环里的i,但是因为我们起了同样的名字,所以我们不用怎么改for循环里的代码
let声明
除了名字不同外,let与var的写法一致
let hello = "Hello";
主要的区别不在语法上,而是语义.
块作用域
当用let声明一个变量,它使用的是词法作用域或块作用域.不同于使用var声明的变量那样可以在包含它们的函数外访问,块作用域变量在包含它们的块或for循环之外是不能访问的.
function f(input: boolean) {
let a = 100;
if (input){
let b = a + 1;
return b;
}
return b;//报错
}
a 的作用域在f函数体内,而b的作用域是if语句块里.
在catch语句里声明的变量也具有同样的作用域规则.
try {
throw "oh no!";
}
catch (e) {
console.log("Oh well.")
}
console.log(e);//报错,该变量未定义
拥有块级作用域的变量的另一个特点是,它们不能在声明之前读或写.虽然这些变量始终"存在"与它们的作用域里,但在直到声明它的代码之前的区域都属于暂时性死区.它只能说明我们不能在let语句之前访问它们,而TypeScript可以告诉我们这些信息
a++;//illegal to user 'a' before it's declared;
let a;
注意:我们仍然可以在一个拥有块作用域变量被声明前获取它.只是我们不能在变量声明前去调用那个函数,如果生成代码为ES2015运行时会抛出一个错误,然而TypeScript是不会报错的.
function foo(){
return a;//这里可以使用a变量
}
foo();//这里调用在变量声明前应该报错(但是TypeScript不报错)
let a;
重定义及屏蔽
使用var声明时它不在乎你声明多少次:你只会得到一个.
function (){
var x;
var x;
if (true) {
var x;
}
}
在上面的代码里所有x的声明实际上都引用一个相同的'x',并且这是完全有效的代码,这经常会导致一些bug的出现.而现在,let声明就不会那么宽松了.
let x = 10;
let x = 20;//错误,不能在1个作用域里多次声明'x'
并不是要求两个均是块级作用域的声明TypeScript才会给出一个错误的警告
fun f(x){
let x = 100;//因为其实在函数的传参过程中,x已经被声明,所以会报错;
}
function g(){
let x = 100;
var x = 100;//这里的意思就是说同一个块级作用域下不能声明两个变量(只要有一个使用了let)
}
并不是说块级作用域变量不能用函数作用域变量来声明.而是块级作用域变量需要在明显不同的块里声明
function f(condition, x){
if (condition){
let x = 100;
return x;//这里面的x是if块级作用域里声明的
}
return x;//这个x是函数传参时声明的其实省略了else
}
f(false, 0);//0
f(true, 0);//100
在一个嵌套作用域里引入一个新名字的行为称作屏蔽.它是一把双刃剑,它可能不小心引入新问题,同时也可能解决一些错误,例如:
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;
}
这个版本的循环能够得到正确的结果,因为内层循环的i可以屏蔽外层循环的i.通常来说我们应该避免使用屏蔽,但是有些场景又需要利用它,看情况而定
块级作用域变量的获取
获取用var声明的变量时,每次进入一个作用域时创建了一个变量的环境,就算作用域内代码已经执行完毕,这个环境与其捕获的变量依然存在.
function theCityThatAlwaysSleeps (){
let getCity;
if (true) {
let city = "Seattle";
getCity = function(){
return city;
}
}
return getCity();
} // Seattle
因为我们已经在city的环境里获取到了city,所以就算if语句执行结束后我们仍然可以访问它.
当let声明出现在循环体里拥有完全不同于var的行为,不仅是在循环里引入了一个新的变量环境,而且针对每次迭代都会创建一个新的作用域,这就是我们在使用立即执行的函数表达式时做的事
for (let i = 0; i < 10; i++){
setTimeout(function(){
console.log(i);
}, 100 * i);
}
这样就能得到我们想要的结果.
const声明
const声明是声明变量的另一种方式.
const numberLivesForCat = 9;
与let声明类似,但是const被赋值后不能再改变.也就是说,const拥有与let相同的作用域规则,但是不能对它们重新赋值.
const num= 1;
const kitty = {
name: 'xiaoji',
numLives: num;
}
kitty = {
name: "jiji",
numLives: num
}//报错,因为const声明的变量的值是不可变的
//但是可以像下面一样进行变量内部的改变
kitty.name = 'xiaogang';//ok
kitty.numLives--;//ok
就是说,除非使用特使的方法去避免,实际上const变量的内部状态是可修改的.
使用最小特权原则，所有变量除了你计划去修改的都应该使用const。 基本原则就是如果一个变量不需要对它写入，那么其它使用这些代码的人也不能够写入它们，并且要思考为什么会需要对这些变量重新赋值。 使用 const也可以让我们更容易的推测数据的流动。
解构
解构数组
最简单的解构:数组的解构赋值
let input = [1, 2];
let [first, second] = input;
console.log(first);//1
console.log(second);//2
上面的代码相当于:
first = input[0];
second = input[1];
解构作用于已声明的变量:
[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);//1
console.log(rest);//[2, 3, 4]
当然也可以忽略尾随元素:
let [first] = [1, 2, 3, 4];
console.log(first);//1
或其他元素:
let [, second, , fourth] = [1, 2, 3, 4];
console.log(second);//2
consol.log(fourth);//4
对象解构
let o = {
a: 'foo',
b: 12,
c: 'bar'
};
let {a, b} = o;
console.log(a);//'foo'
console.log(b);//12
就像数组解构,可以使用没有声明的赋值:
({a, b} = {a: 'baz', b: 101});
注意我们需要用括号将它包起来,因为JavaScript通常会将以{起始的语句解析为一个块,上面这行代码经测试直接运行会报错,还是需要在前面加上let a, b;
可以在对象里使用...语法创建剩余变量
let {a, ..passthrough} = o;
let total = passthrough.b + passthrough.c.length;
属性重命名
可以给属性以不同的名字:
let { a: newName1, b: newName2} = o;
这里可以读作"a 作为newName1,意思是:
let newName1 = o.a;
let newName2 = o.b;
这里的冒号不是指定类型的,如果想指定它的类型,仍然需要在其后写上完整的模式
let {a, b} : {a: string, b: number} = o;
默认值
默认值可以让你在属性为undefined时使用缺省值:
function keepWholeObject (wholeObject: {a: string, b?: number}) {
let {a, b = 1001} = wholeObject;
}
现在即使b为undefined,keepWholeObject函数的变量wholeObject的属性a,b都会有值.
函数声明
解构也能用于函数声明:
type C = { a: string, b?: number }
function f({a, b}: C):void {
//...
}
通常更多情况下是指定默认值:
function f({a, b} = {a: "", b: 0}): void {
//...
}
f();//ok default to {a: "", b: 0}
function f({ a, b = 0 } = { a: "" }): void {
// ...
}
f({ a: "yes" }); // ok, default b = 0
f(); // ok, default to {a: ""}, which then defaults b = 0
f({}); // error, 'a' is required if you supply an argument
展开
展开操作符与解构相反,它允许你将一个数组展开为另一个数组,或将一个对象展开为另一个对象:
let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];//[0, 1, 2, 3, 4, 5]
展开对象
let defaults = {food: "spicy", price: "$$", amibiance: "noisy"};
let search = {...defaults, food: "rich"};//{food: "rich", price: "$$", amibiance: "noisy"}
如果将defaults放在了search后面,则展开为:
{ food: 'spicy', price: '$$', ambiance: 'no
isy' }
所以这点要注意,默认值的覆盖问题
对象展开仅包含对象自身的可枚举属性,意思是说当你展开一个对象实例时,你会丢失其方法:
class C {
p = 12;
m() {
}
}
let c = new C();
let clone = { ...c };
clone.p; // ok
clone.m(); // error!
