var声明
主要特点：
- var是函数作用域，只针对函数声明
- 可以多次声明同一个变量不会报错
- 捕获变量怪异之处
function fnVar(flag: boolean) {
if(flag) {
var x = 10;
}
return x;
}
fnVar(true); // 10
fnVar(false); // undefined
var isDone: boolean = false;
var isDone: boolean = true;
// 打印结果：10，10，10，10...
for(var i = 0; i < 10; i++){
setTimeout(function() { console.log(i) }, 100 * i)
}
let声明
能够解决var声明产生的问题，主要特点：
- 使用词法作用域或者块作用域
- 他们不能在被声明之前读或者写，虽然变量存在于他们的作用域里，但是直到声明他的代码之前的区域都属于 ”暂时性死区“
- 不允许在同一作用域中同时定义两个相同的变量
function fnLet(input: boolean){
let a = 100;
if(input){
let b = a + 1;
return b;
}
// 此处会报错b未定义
return b;
}
a++; // 会报错
let a;
// 下面这种方式ts是允许的
function letFoo() {
return forward;
}
letFoo();
let forward;
块级作用域变量的获取：
- var声明变量时，每次进入一个作用域时，他创建了一个变量的环境，就算作用域内代码已经执行完毕，这个环境与其捕获的变量依然存在（所以在循环setTimeout中使用自执行函数的目的就是重新创建一个新的变量环境）
- let会在每一个作用域中都声明一个新的变量环境（所以针对循环setTimeout中把var换成let声明时就可以达到理想的输出效果）
// 块级作用域变量的获取: var
function citySleeps() {
let getCity;
if(true) {
let city = 'Seattle';
getCity = function() {
return city;
}
}
// 已经在city环境里获取到了city，所以就算if语句执行结束仍然可以访问
return getCity();
}
// 块级作用域变量的获取：let
// 打印结果：1,2,3,4,5...
for(let i = 0; i < 10; i++){
setTimeout(function() { console.log(i) }, 100 * i)
}
const声明
定义：被赋值以后不能被改变
特点：
- 拥有与let相同的作用域规则
- const定义一些常量场景多一些
const data = 123;
data = 444; // error
解构
// 数组解构
let input = [1, 2];
let [first, second] = input;
// 作用于函数参数
function fnInput([first, second]: [number, number]){
return first + second;
}
let result = fnInput([first, second]);
// 在数组中使用...语法创建剩余变量
let [fist, ...rest] = [1,2,3,4];
// 对象解构
let objInput = {
a: 'foo',
b: 12,
c: false
}
let { a, b } = objInput;
// 用...语法创建剩余变量
let { c, ...others } = objInput;
let total = others.a + others.b;
// 属性重命名
let { a: newName1, b: newName2 } = objInput;
console.log(newName1);
// 指定类型
let { a: objA, b: objB }: { a: string, b: number } = objInput;
// 设置默认值
function keepObject(obj: { a: string, b?: number }){
let { a, b = 1001 } = obj;
}
