前言

1. 在 Javascript 与 Typescript 中，我们可以使用 var、let 和 const 关键字声明变量。
2. Javascript 的执行分为两个阶段（四个步骤）：
   1. 编译（词法分析、语法分析、预编译）
   2. 执行（解释）
3. 变量、函数 与 类 的声明，属于 编译 阶段

var 声明

1. 声明变量

var a = 100

2. 在函数内部声明变量

function func() {
    var a = 100
    return a
}

3. 闭包访问

即：（作用域）A 访问（作用域）B 中的（变量）a）

function A() {
    var a = 100
    return function B() {
        var b = a + 1
        return b
    }
}

var x = A()
x() // 101

作用域（重点知识）

简单理解（作者自己的话）：代码片段 在 执行生效 时 所处的 上下文 范围

例一：变量 a 的作用域是整个 func 函数

function func() {
    var a = 100
}

例二：变量 b 仅作用于 B 函数中

function A() {
    var a = 100
    return function B() {
        var b = a + 1
    }
}

块作用域

除了函数作用域外，在 Javascript 中还有一种 块作用域

例一：变量 x 虽然声明在 if 语句之内，但依然可以在外部访问它

function func(check: boolean) {
    if (check) {
        var x = 100
    }
    return x
}

func(false) // undefined
func(true) // 100

例二：在 块作用域 外部访问变量 i

function func(list: string[]) {
    for (var i = 0; i < list.length; i++) {
    }
    return i
}

func(['a', 'b', 'c']) // 3

let 声明

let hello = 'Hello'

let 与 var 的不同

例一：使用 let 声明的变量，仅在其所处 块作用域 生效

function A(check: boolean) {
    if (check) {
        var x = 100
    }
    return x
}

A(true) // 100

function B(check: boolean) {
    if (check) {
        let x = 100
    }
    return x
}

B(true) // x is not defined

例二：更直观的例子，有趣的循环嵌套

for (var i = 0; i < 3; i++) {
    for (var i = 0; i < 3; i++) {
        console.log(i)
    }
}

0
1
2

for (let i = 0; i < 3; i++) {
    for (let i = 0; i < 3; i++) {
        console.log(i)
    }
}

0
1
2
0
1
2
0
1
2

重定义与屏蔽

重定义

function func() {
    var x = 1
    var x = 2
    return x
}

func() // 2

屏蔽

在同一作用域中，用 let 声明的变量不能多次声明

function A() {
    let x = 100
    var x = 100 // Identifier 'x' has already been declared
}

function B() {
    let x = 100
    let x = 100 // Identifier 'x' has already been declared
}

块作用域 中的 let 变量取值

在 func 函数作用域中，用 let 声明的变量，亦可在其从属的 块作用域 中应用

function func() {
    let x
    
    if (true) {
        x = function () {
            return 100
        }
    }
    
    return x()
}

func() // 100

const 声明

使用 const 声明的变量，是不可修改的

const a = 100
a = 100 // Assignment to constant variable

解构

数组

1. 数组解构

let [a, b, c] = [1, 2, 3]
console.log(a, b, c) // 1, 2, 3

2. 作用于函数参数

function func([a, b]: [number, string]) {
    console.log(a, b)
}
func(100, '$') // 100, $

3. 处理剩余数据

let [a, ...some] = [1, 2, 3, 4]
console.log(a, some) // 1, [2, 3, 4]

4. 展开

let a = [1, 2]
let b = [3, 4]
let some = [...a, ...b]

对象

1. 对象解构

let {a, b} = { a: 100, b: 200 }

2. 处理剩余数据

let { a, ...some } = { a: 100, b: 200, c: 300 }
console.log(a, some) // 100, { b: 200, c: 300 }

3. 属性别名

let { a: first, b: second } = { a: 100, b: 200 }
console.log(first, second) // 100, 200

4. 默认值

let { a, b = 100 } = { a: 100 }
console.log(a)

5. 展开

let x = {a: 1, b: 2}
let y = {c: 3, d: 4}
let some = [...x, ...y]

关于展开操作的限制

class Classic {
    a = 100
    func() {
        return a
    }
}
let x = new Classic()
let cloner = { ...x }

cloner.func() // cloner.func is not a function

函数参数声明

function func(some: { a: number, b: number } = {}) {
    let { a, b = 200 } = some
    return a + b
}
func({a: 100}) // 300

参数缺省

function func(some: { a: number } = { a: 100 }) {
    let { a } = some
    return a
}
func() // 100