变量声明

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;
}