JavaScript & TypeScript学习总结

JavaScript & TypeScript学习总结

1.JavaScript

JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都可以使用 JavaScript。
JavaScript 是一种运行在客户端的脚本语言 （Script 是脚本的意思），作为一门解释型语言，不需要被编译为机器码再执行，而是直接执行。
有多种方式可以运行JavaScript：
1.直接在浏览器的控制台编写运行；
2.可以编写一个独立的js文件，然后在Html文件中引入；
3.可以用编辑软件如Webstrom或VSCode编写独立的js文件，通过Node.js解释执行运行。

2.基本语法

1.大小写敏感
在js中，严格区分字母大小写，正如ABC和abc会被解析为两种完全不同的数据。
2.标识符
所谓标识符，就是指给变量、函数、属性或函数的参数起名字。
标识符可以是按照下列格式规则组合起来的一或多个字符：
第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
其它字符可以是字母、下划线、美元符号或数字。
按照惯例，ECMAScript 标识符采用驼峰命名法。
标识符不能是关键字和保留字符。
3.注释
分为单行注释和多行注释

4.语句
语句末尾可加分号，也可不加分号。
5.关键字/保留字
关键字

保留字

6.变量
变量是用于存储信息的"容器"。
ECMAScript 的变量是松散类型的，所谓松散类型就是可以用来保存任何类型（如： String、Number、Boolean以及Object等）的数据。
在javascript中用var关键词声明变量
可以表示任何类型的数据。
声明变量：

var dddd;

使用等号向变量赋值：

dddd=1;

也可通过声明变量时直接赋值：

var dddd=1;

3.操作符

操作符也称运算符，通过运算符可以对一个或多个值进行运算并获取运算结果。
1.算术运算符
+、-、*、/、%等基本运算
2.赋值运算符
= += -+ *= /= %=
用于给变量赋值
3.关系运算符
< > <= >= == === != !==
其中===表示全等，要求值和数据类型都一致
关系(比较)运算符是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值(true / false)作为比较运算的结果。
4.逻辑运算符
&& || ！
用于测定变量或值之间的逻辑。
5.条件运算符
? :
举例：result=(age<18)?“年龄太小”:“年龄合适”;
执行流程：如果年龄小于18为true，则执行语句“年龄太小”，并返回执行结果，如果为false，则执行语句"年龄合适"，并返回执行结果。

4.语句

5.函数

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
    // 执行代码
}

当调用该函数时，会执行函数内的代码。
JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
如：带参函数

function introduction(name)
{
console.log('dddddd'+name);
}
introduction('aaa');

6.对象

在 JavaScript中，几乎所有的事物都是对象。
有两种方式来进行定义
一：

var o= new Object();		//生成空对象
o.name = 'J';			//设置对象的属性
o.job = 'S';
o.getName = function(){    //设置对象的方法/函数
    console.log(this.name);
};

二：

var o = {
    name: 'J',
    job: 'S',
    getName: function(){      
        console.log(this.name);
    }
};
console.log(o.age);
o.getName();

7.TypeScript

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。
TypeScript可以构建大型程序，并在任何浏览器、任何计算机和任何操作系统上运行，且是开源的。

环境配置
有以下两种方式：
1.通过npm（Node.js包管理器）
2.安装VS Code的TypeScript相关插件

变量声明
不使用var来声明变量，而是使用let或const，let和const是JavaScript里相对较新的变量声明方式。因为TypeScript是JavaScript的超集，所以它本身就支持let和const。

数据类型

函数
1.定义函数
使用function关键字

2.可选参数
意味着调用该函数时，可选参数部分可以选择输入，也可选择不输入

3.默认参数
意味着调用该函数时，默认参数部分已经有默认值，如果传入参数时，没有该属性，则该属性的内容便是默认值，否则便是传入的参数。

4.剩余参数
意味着在调用该函数时，并不知道要传进来多少个参数，此时便可以使用剩余参数，可以为0个，也可以为任意个。

下面举两个示例代码来说明

//可选参数，必须放在必要参数后
function greeting(firstName: string, lastName?: string) {
  if(lastName) {
      return `Hello ${firstName} ${lastName}!`;
  }
  return `Hello ${firstName}!`;
}
console.log(greeting('yy'));
console.log(greeting('yy'，'W'));
console.log(greeting('yy', 'W', 'X'));//参数数据个数不一致，error!

function greeting(firstName: string, ...restName: string[]) {
  return `Hello ${firstName} ${restName.join(' ')}!`;
}
console.log(greeting('1', '2', '3', '4', '5', '6', '7'));
console.log(greeting('num'));

类
1、类的创建

class Person {
  // 属性定义
  // 实例属性
  name: string = "cqjtu";
  // 静态属性 内建或自定义，无需new即可使用
  static age: number = 666;
  // 只读属性
  readonly sex: string = "男";
  // 方法定义
  haha() {
    console.log("hahahahahha");
  }
  //静态方法
  static sayhello(){
      console.log("hello")
  }
}

2、构造函数

class Cat {
  name: string;
  age: number;
  // 构造函数
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
//new 一个对象
const cat = new Cat("猫", 1);
console.log(cat);

3、继承
可以通过extends关键字继承其它类，从而成为其子类

class Animal {
  name: string;
  age: number;
  // 构造函数
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  bark() {
    console.log(this.name);
  }
}
// 继承
class Cat extends Animal {
  bark() {
    console.log("this is cat");
  }
  run() {
    console.log(`${this.name} is running`);
  }
}

const cat = new cat("咪咪", 2);
console.log(cat);
cat.bark();
cat.run();

类的属性和函数的访问权限
类中的属性和函数都有访问权限,TypeScript 支持 3 种不同的访问权限。
public（默认） : 公有，可以在任何地方被访问。
protected : 受保护，可以被其自身以及其子类访问。
private : 私有，只能被其定义所在的类访问。