TypeScript 基础（一）_ts 取余

1.认识 TypeScript ：

• TypeScript 是一种由微软开发的编程语言，它是 js 的一个超集，向 JavaScript 添加了静态类型和基于类的面向对象（ 面对对象的三个特征：封装、继承、多态 ）；
• 2012 年 10 月微软发布的首个公开版本的 TypeScript；
• 2013 年 6 月，微软发布了正式版 ts0.9；
• 截至目前（ 2021.09.01），ts 的版本是 4.3，4.4 是 beta 版本。

2.变量和常量：

2.1 什么是变量？

变量是存储信息的容器，其中的值（内容）是可变的。

2.2 变量的声明：

• 我们使用 var 关键字来声明变量；

var a;  // 声明变量
a = 9;  // 对变量 a 赋值
a = 10;  // 可以修改
1
2
3

• es6 之后推出一个新的关键字 let 来声明有代码块属性的变量；

let b = 9;
b = 10;  // 错误，无法为常量赋值
1
2

• 使用等号（ = ）赋值；

var a = 3;
// 如果只声明变量，并没有赋值的话该变量变成 undefined
var b;
1
2
3

• 一条语句中可以声明多个变量。

var a,b,c;
var a = 3, b, c = 5;
1
2

2.3 变量的命名规则和规范：

1）变量的命名规则（必须遵守）：

• 不允许使用语言的关键字和保留字作为变量名；

var var = 3;  // 错误
1

• 不能以数字开头；

var 3 = 3；  // 错误
var 3a = 3;  // 错误
var a3 = 3;  // 正确
1
2
3

• 可以使用字母、数字、下划线（ _ ）、美元符号（ $ ），组合成变量名。

var a3 = 3;  // 正确
var a_3 = 3;  // 正确
var a-3 = 3;  // 错误
1
2
3

2）变量的命名规范：

• 变量的声明要见名知意；
• 命名法：下划线命名法、小驼峰命名法、大驼峰命名法。

// 命名不规范,见名不知意
var imgaaa;  

// 命名规范,见名知意
var imgwidth;

// 下划线命名法
var imgwitdhandheight;  // 可读性不高
var img_witdh_and_height;  // 可读性高

// 小驼峰命名法
var imgwitdhandheight;  // 可读性不高
var imgWidthAndHeight;  // 小驼峰

// 大驼峰命名法
var imgwitdhandheight;  // 可读性不高
var ImgWidthAndHeight;  // 大驼峰
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3. ts 语言的数据类型

number、string、boolean、enum、any、undefined、null。

number: 数字
string: 字符串
boolean: 布尔值
Array: 数组（只能存储相同的类型数据的有序集）
Tuple: 元组（可以存储不同类型数据的有序集)
enum: 枚举
any: 任意类型
undefined: 未定义
null: 空
1
2
3
4
5
6
7
8
9

• number：

int a = 3;  // Java 语言中声明整数
float b = 3.3;  // Java 语言中声明浮点数
var b: number = 4;  // ts 声明一个 number 数据类型的 b，并赋值 
1
2
3

• string：

var str: string = '你好！';  // 正确
var str: string = "你好！";  // 正确
// 在 ts 中单引号和双引号没有区别，都表示字符串
var sta: string = '你好！";  // 错误，单双引号不能混用
1
2
3
4

• boolean：

// true  false
var a: boolean = true;
1
2

• enum：

enum PRICE{
    "apple",
    "orange"
}
console.log(PRICE.apple)  // 输出 0 
console.log(PRICE.orange)  // 输出 1 
1
2
3
4
5
6

• any：

var a: numble = 9;
a = 'hello';  // 报错
var b: any = 9;
b = 'hello';  // 不报错，any 数据类型的变量，可以再次赋值为任意类型的值
1
2
3
4

• undefined：

var a;  // a 的值就是 undefined
1

• null：

// 与 undefined 相似，都是代表空，null 代表引用类型为空
var n = null;
1
2

4.运算符和表达式

4.1 运算符：

• +，-，*，/，%，>，<，&&，! 这些都是运算符；
• 变量（常量）、运算符组成的式子就是表达式；

4.2 算术运算符：

• 运算符：+，-，*，/，%（取余）；
• 表达式：a + b；a * b；50 / 3；6 % 4；
• 功能：进行数学运算；
• 注意：+ 这个符号的两侧如果出现字符串，则该 + 就变成了【字符串连接符】。

var a = 3;
a + 3;  // 7
a + '4'  // '34' 字符串的优先级最高，不管是什么类型通通转为字符串
1
2
3

4.3 赋值运算符：

• 运算符：“ = ”；
• 表达式：a = 5;；
• 功能：是把等号右边的值赋值给等号左边的变量；
• 表达式的值：赋值之后变量的值；
• 注意：等号左边必须是变量。

4.4 自增自减运算符：

• 运算符：“ ++ ”，“ – ”；
• 表达式：a++，++a，a–，--a；
• 功能：让变量进行自增或者递减；
• 表值：a++（ ++ 在后，先赋值在递增 ），++a（ ++在前面，先递增再赋值 ）。

var a = 1;
var b = a++;  // 1
var c = 1;
var d = ++c;  // 2
1
2
3
4

4.5 符号运算符：

• 运算符：+=，-=，*=，/=；
• 表达式：a += 3；类似于（ a = a + 3 ）；
• 功能：先进行算术运算，再进行赋值运算；
• 表达式的值：最后赋值之后变量的值。
• 注意：在复合运算符 符号 之间不能出现空格。

4.6 关系运算符：

• 运算符：>，<，>=，<=，==，!=；
• 表达式：a > 3；a == b；
• 功能：进行大小关系的比较
• 表达式的值：关系成立，表达式的值为 true，否则表达式的值是 false；
• 注意：
  • 不同数据类型的值不能进行大小关系的比较
  • 当运算符的两边的都是字符串的时候，会按照字符串比较规则进行比较；

var a = 3;
a > 4;  // false
a < 4;  // true
1
2
3

4.7 逻辑运算符（真为 1，假为 0）：

• 运算符：&&，||，！（ 与，或，非 ）；
• 表达式：3 && 5；
• 功能：进行逻辑运算；
• 表达式的值：
  • && 两侧有一个为假时 式子就为假，两侧都为真时式子才为真；
  • || 两侧有一个为真时 式子就为真，当两侧都为假时式子才为假；
  • ！非真即假，非假即真。
• 注意：所有代码层面的运算符号，统统为英文符号；
• 逻辑运算符的短路现象：

var a = 3;
a > 3 && a++;
console.log(a);  //3
// 在 && 运算符的表达式，当左侧表达式不成立时，右边的表达式不再运算；
// 在 || 运算符的表达式，当左侧表达式成立时，右边的表达式不再运算；
1
2
3
4
5

4.8 运算符的优先级：

5.流程控制

计算机执行程序的时候，是按照从上到下，从左到右，逐行进行。

5.1 我们常见的流程：

• 顺序；
• 分支；
• 循环。

5.2 分支结构（选择~）：

• 单分支
  // 语法结构：

if(表达式){
    代码块
}
// 执行逻辑：当程序遇到 if 结构，首先会判断表达式的值，
// 如果表达式的值为真，则执行大括号里的代码块；
// 如果表达式的值为假，则直接跳过 if 结构，不执行大括号里的代码块。
1
2
3
4
5
6

• 二分支：

// 语法结构：
if(表达式){
    代码块1
}else{
    代码块2
}
// 执行逻辑：
// 当程序遇到 if-else 结构时，首先计算表达式的值，
// 如果表达式为真，则执行代码块 1；
// 如果表达式为假，则执行代码块 2。
1
2
3
4
5
6
7
8
9
10

• 多分支：

// 语法结构：
if(表达式1){
    代码块1
}else if(表达式2){
    代码块2
}else if(表达式3){
    代码块3
}
// 执行逻辑：
// 当程序遇到 if-else if 结构时，首先会计算表达式 1 的值，
// 如果表达式 1 为真，则执行代码块 1 ；
// 如果表达式 1 为假，继续判断表达式 2 的值；
// 如果表达式 2 为假，继续判断表达式 3 的值；
// 如果表达式 3 为假，则继续执行其它分支 else 的代码。

// 例子：
// 成绩分布评级
var a = 60;
if(a > 80){
    console.log('优秀')；
}else if(a >= 60){
    console.log('良好')；
}else{
    console.log('不及格')；
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

• switch-case 语句：

// 语法结构：
switch(val值){
    case val_1:
        代码块1；
        break；
    case val_2:
        代码块2；
        break；
    case val_3:
        代码块3；
        break；
}
// 执行逻辑：
// 如果 val 值等于 val_1，则执行代码块 1；
// 如果 val 值等于 val_2，则执行代码块 2；
// 如果 val 值等于 val_3，则执行代码块 3；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

5.3 循环结构：

• while 循环结构；

// 语法结构：
while(条件表达式){
    循环结构
}
// 执行逻辑：
// 首先判断条件表达式，如果条件表达式为真，
// 则执行循环语句，之后判断条件表达式，直到为假才停止。

var a = 0;
while(a < 0){
    console.log(a);
    a++;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

• do-while 语句：

// 语法结构：
do{
    循环语句
}while(循环条件)
1
2
3
4

• while 和 do-while 的区别：
  • while 循环，先判断，后执行；
  • do-while 循环，先执行，后判断；
  • do-while 至少执行一次循环语句，而 while 不一定
• for 循环；

// 语句结构：
for(表达式1; 表达式2; 表达式3){
    循环语句
}
// 执行逻辑：
// 第一步：首先执行表达式 1；
// 第二步：判断表达式 2 ，如果值为真，则执行循环语句，如果值为假，跳出循环；
// 第三步：执行循环语句之后，在执行表达式 3 ；
// 回到第二步，继续判断表达式 2 。
1
2
3
4
5
6
7
8
9

5.4 跳出循环：

• break ：直接跳出当前循环；
• continue ：直接跳过本次循环（ continue 关键字以下的循环语句不再执行 ），继续下次循环
• return ：函数一旦遇到 return 语句就立即返回，后面的所有语句都不会被执行到了。从这个角度看，return 语句还有强制结束函数执行的作用。