CQJTU JavaScript+TypeScript总结_js typescript acm输入-CSDN博客

本文链接：https://blog.csdn.net/qq_52482704/article/details/125478236

JavaScript+TypeScript总结

JavaScript部分
一、JavaScript是什么？
二、JavaScript的引入方式
- 1.内部用法
- 2.外部用法
三、JavaScript的基本语法
- 1.大小写敏感
- 2.标识符
- 3.变量
- 4.数据类型
- 5.注释
四、JavaScript的操作符
五、JavaScript的语句
六、JavaScript的对象
- 1.数组Array
- 2.字符串对象String
- 3.自定义对象
七、JavaScript的闭包
- 1.全局变量的闭包
- 2.局部变量的闭包
八、JavaScript HTML DOM
- 1.JavaScript HTML DOM的定义
- 2.JS通过DOM对HTML进行操作
TypeScript
一、什么是TypeScript？
二、TypeScript和JavaScript的区别
三、TypeScript 基础语法
- 1.组成部分
- 2.流程过程
- 3.空白和换行
- 4.大小写敏感
- 5.TypeScript注释
三、let和const
四、解构
五、函数
- 六、可选参数
- 七、默认参数
- 八、剩余参数
- 九、箭头函数
- 十、类class
总结

JavaScript部分

一、JavaScript是什么？

JavaScript（简称“JS”）是互联网上最流行的脚本语言，这门语言可用 HTML和web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript是一种轻量级的编程语言，它是可插入HTML页面的编程代码。JavaScript插入 HTML 页面后，可由所有的现代浏览器执行。JavaScript很容易学习。

二、JavaScript的引入方式

1.内部用法

（1）HTML中的Javascript脚本代码必须位于< script >与< /script >标签之间
（2）Javascript脚本代码可被放置在HTML页面的< body >和< head >部分中
例如：
①Javascript脚本代码被放置在HTML页面的< body >部分中

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
document.write("<p>这是我的JS段落</p>");
</script>
</body>
</html>

②Javascript脚本代码被放置在HTML页面的< head >部分中

<!DOCTYPE html>
<html>
<head>
<script>
function myJSFunction()
{
    document.getElementById("JSdemo").innerHTML="我的JavaScript函数！";
}
</script>
</head>
<body>
<button type="button" onclick="myJSFunction()">JS函数</button>
</body>
</html>

2.外部用法

（1）外部JavaScript文件的文件扩展名是 “.js”。
（2）使用外部文件，需要在 < script > 标签的 “src” 属性中设置该 .js 文件：
例如

<!DOCTYPE html>
<html>
<body>
<script src="myFirstJavaScript.js"></script>
</body>
</html>

三、JavaScript的基本语法

1.大小写敏感

JavaScript是一种区分大小写的语言。在输入语言的关键字，变量，函数名以及所有的标识符时，都必须采取一致的字符大小写形式。
例如：

"online","Online","OnLine"，"ONLINE"是四个不同的变量名

2.标识符

标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符采用驼峰命名法则，并且第一个字符只能是字母、下划线（ _ ）或美元符号（ $ ）之一，其他字符可以是字母、下划线、美元符号或数字。

3.变量

在编程语言中，变量用于存储数据值。JavaScript使用关键字var来定义变量，使用等号来为变量赋值。
例如：

var x, length
x = 5
length = 6

4.数据类型

（1）JavaScript有多种数据类型：数字，字符串，数组，对象等。
（2）JavaScript中有5种原始类型：
null：对象为空
number：数字（整数，小数，NAN）
String：字符，字符串，单双引皆可
boolean：布尔值。（true or false）
undefined：当声明的变量未初始化时，该变量的默认值是undefined

5.注释

使用（//）注释

//这是一个JS注释

四、JavaScript的操作符

（1）一元操作符（++，–）
（2）布尔操作符（&&，||，！）
（3）算术操作符（+，-，，/，%）
（4）关系操作符（<>，<=>=，!=，!===等）
（5）条件操作符（?，:）
（6）赋值操作符（=，+=，-+，=，/=，%=）

五、JavaScript的语句

JavaScript语句是发给浏览器的命令，这些命令的作用是告诉浏览器要做的事情。

/*向id="demo" 的HTML元素输出文本 "你好！JS" */
document.getElementById("demo").innerHTML = "你好！JS";

输出语句中
（1）用window.alert()写入警告框
（2）用document.write()写入HTML输出
（3）用console.log()写入控制台

六、JavaScript的对象

在JavaScript中，几乎所有的事物都是对象。

1.数组Array

Array类型是ECMAScript中最常用的类型之一，用于定义数组对象。
创建方式如下：

/*创建方法一*/
var 变量名 = new Array(元素列表);
//例如：
var arr = new Array("Tesla", "Volvo", "BMW");

/*创建方法二*/
var 变量名=[元素列表];
//例如：
var cars = ["Tesla", "Volvo", "BMW"];
}

2.字符串对象String

String 对象用于处理文本（字符串）。

/*创建方法一*/
var 变量名 = new String(s);
//例如：
var str = new String("JS");

/*创建方法二*/
var 变量名= "s";
//例如：
var str = "JS";
}

3.自定义对象

对象也是一个变量，但对象可以包含多个值（多个变量），每个值以name:value对呈现。我们可以使用字符来定义和创建JavaScript对象。

/*创建方式*/
var 对象名称 = {
		属性名称1:属性值1,
		属性名称2:属性值2,
		....
};
//例如：
var car = {name:"BMW", model:500, color:"white"};

七、JavaScript的闭包

闭包就是就是函数的“堆栈”在函数返回后并不释放，也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配，当在一个函数内定义另外一个函数就会产生闭包。
JavaScript变量可以是局部变量或全局变量，私有变量可以用到闭包。

1.全局变量的闭包

函数可以访问由函数外部定义的变量，例如：

var a = 3;
function myFunction() {
    return a * a;
}

2.局部变量的闭包

函数可以访问由函数内部定义的变量，例如：

function myFunction() {
    var a = 3;
    return a * a;
}

【注意】
（1）全局变量可应用于页面上的所有脚本；局部变量只能用于定义它函数内部，对于其他的函数或脚本代码是不可用的。
（2）全局和局部变量即便名称相同，它们也是两个不同的变量，修改其中一个，不会影响另一个的值。

八、JavaScript HTML DOM

1.JavaScript HTML DOM的定义

通过HTML DOM，可访问JavaScript HTML文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM模型被构造为对象的树：

【该图像引用自菜鸟教程】

2.JS通过DOM对HTML进行操作

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
（1）JavaScript能够改变页面中的所有HTML元素
（2）JavaScript能够改变页面中的所有HTML属性
（3）JavaScript能够改变页面中的所有CSS样式
（4）JavaScript能够对页面中的所有事件做出反应
（5）JavaScript能够添加或删除HTML元素

TypeScript

一、什么是TypeScript？

TypeScript（简称：“TS”）是JavaScript 的一个超集，支持ECMAScript 6标准（ES6 教程）。
TypeScript 由微软开发的自由和开源的编程语言。
TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

二、TypeScript和JavaScript的区别

TypeScript是JavaScript的超集，扩展了JavaScript的语法，因此现有的JavaScript代码可与TypeScript一起工作无需任何修改，TypeScript通过类型注解提供编译时的静态类型检查。
TypeScript可处理已有的JavaScript代码，并只对其中的TypeScript代码进行编译。

三、TypeScript 基础语法

1.组成部分

TypeScript 程序由以下几个部分组成：
（1）模块
（2）函数
（3）变量
（4）语句和表达式
（5）注释

2.流程过程

流程图

【该图片引用自菜鸟教程】

3.空白和换行

TypeScript会忽略程序中出现的空格、制表符和换行符，空格、制表符通常用来缩进代码，使代码易于阅读和理解。

4.大小写敏感

TypeScript区分大小写。

5.TypeScript注释

TypeScript支持两种类型的注释：
（1）单行注释 ( // )：在 // 后面的文字都是注释内容
（2）多行注释 (/* */)：这种注释可以跨越多行。

// 这是一个单行注释
 
/* 
 这是一个多行注释 
 这是一个多行注释 
 这是一个多行注释 
*/

三、let和const

不使用var，使用let或const申明变量，并加上类型说明，且作用域为块级即以{}为界。

let lang: string = 'TypeScript';//如果省略类型说明，TS也可进行自动推断
lang = 1010;//error! 如果需要可以使用联合类型：let lang: number | string = 'TS';
let age: number = 89;
let age = 64;//error!

const pi: number = 3.14159;//pi以后不可改变，类似常量
pi = 3.14;//error!

四、解构

将对象、数组中的元素拆分到指定变量中，以方便使用。

//解构数组
let input = [89, 64, 2018, 10];
let [first, second] = input;//注意使用[]
console.log(first); // 89
console.log(second); // 64
let [one, ...others] = input; //剩余变量
console.log(...others);
//展开
let newArr = [89, ...others, 18];
console.log(newArr);
//解构对象
let o = {
  a: "foo",
  b: 12,
  c: "bar"
};
let {a, b} = o;//注意使用{}，且变量名需与对象中道属性名一致
console.log(a, b);

五、函数

使用完整函数类型定义。

//命名函数，有完整的参数和返回类型。可以不用，TS将自动进行类型推断但推荐使用！
function add(x: number, y: number): number {
  return x + y;
}
//匿名函数
let myAdd = function(x: number, y: number): number { return x + y; };
console.log(myAdd(1, '2'));//error
console.log(myAdd(1));//error
console.log(typeof myAdd(1, 2));//number

六、可选参数

//可选参数，必须放在必要参数后
function greeting(firstName: string, lastName?: string) {
  if(lastName) {
      return `Hello ${firstName} ${lastName}!`;
  }
  return `Hello ${firstName}!`;
}
console.log(greeting('QiGe'));
console.log(greeting('QiGe', 'Wang'));
console.log(greeting('QiGe', 'Wang', 'Yong'));//error!

七、默认参数

//默认参数，不必在必要参数后
function greeting(firstName: string, lastName = 'Wang') {
  return `Hello ${firstName} ${lastName}!`;
}
console.log(greeting('QiGe'));
console.log(greeting('QiGe', 'HaHaHa'));
console.log(greeting('QiGe', 'HaHaHa', 'Yong'));//error!

八、剩余参数

必要参数，默认参数和可选参数有个共同点：它们表示某一个参数。有时，同时操作多个参数，或者你并不知道会有多少参数传递进来，在TypeScript里，你可以把所有参数收集到一个变量里。

//剩余参数，会被当做个数不限的可选参数。可以一个都没有，也可以有任意个
function greeting(firstName: string, ...restName: string[]) {
  return `Hello ${firstName} ${restName.join(' ')}!`;
}
console.log(greeting('Osama', 'bin', 'Muhammad', 'bin', 'Awad', 'bin', 'Laden'));
console.log(greeting('Laden'));

九、箭头函数

特点：简化函数定义、解决this问题

//无参数，函数体代码只有一行，则该行结果即为函数返回值
let greeting1 = () => `Hello TS!`;
console.log(greeting1());
//一个参数，函数体代码只有一行，则该行结果即为函数返回值
let greeting2 = (name: string) => `Hello ${name}`;
console.log(greeting2('QiGe'));
//两个及以上的参数，函数体代码只有一行，则该行结果即为函数返回值
let add1 = (n1: number, n2: number) => n1 + n2;
console.log(add1(1, 2));
//两个及以上的参数，函数体代码多于一行,则必须用{}包裹，且显式给出return
let add2 = (n1: number, n2: number) => {
  let sum = n1 + n2;
  return sum;//改为sum++结果如何？
}
console.log(add2(1, 2));

十、类class

类是属性（有些什么）和函数（能干什么）的集合，是生成对象（Object）或类实例的模板。
（1）类的定义和使用

//类的定义和使用
class MyInfo { //class是关键字，类名默认全部大写首字母
  name: string; //属性
  weather: string; //属性
  
  constructor(name: string, weather: string){ //构造函数，一般用于初始化。如果没有，TS会自动生成一个，以备用new创建类实例时调用。
    this.name = name;
    this.weather = weather;
  }
  printInfo(): void { //其它函数，无返回值
    console.log(`Hello, ${this.name}.`);
    console.log(`Today is ${this.weather}.`);
  }
}
let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象，即该类的实例
myData.printInfo();

（2）存取器-getter、setter
当在类外部时，建议设置getter和setter操作其private属性，即使public属性也如此。

//getter和setter
class MyInfo { //class是关键字，类名默认全部大写首字母
  private readonly _name: string; //私有属性，外部不可访问。readonly使其只能在初始化时赋值，以后不可更改。    
  private _weather: string; //私有属性，习惯以_开头进行命名

  constructor(name: string, weather: string){ //构造函数，一般用于初始化
    this._name = name;
    this._weather = weather;
  }
  get name(): string {
    return this._name;
  }
  set name(value: string) {  //error！ _name有readonly属性
    this._name = value;
  }
  get weather(): string {
    return this._weather;
  }
  set weather(value: string) {
    this._weather = value;
  } 
}
  
let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象
console.log(myData.name, myData.weather);
myData.weather = 'sunny'; //OK
myData.name = 'Wang'; //error!
console.log(myData);

（3）静态属性
类中的属性或函数有static修饰，则可直接使用而不需要实例化

//静态属性，内建或自定义，无需new即可使用
console.log(Math.round(89.64)); //90
console.log(Math.pow(2, 8)); //256
class MyStaticClass {
  static place = 'Earth';
  static printInfo() {
    console.log('We have only one Earth!');
  }
}
console.log(MyStaticClass.place);
MyStaticClass.printInfo();

（4）继承
可以通过extends关键字继承其它类，从而成为其子类

class Animal {
  // 当构造函数传入的参数加上了“访问权限控制符”，则同时会声明同名类属性，并赋值
  constructor(public name: string) { }
  protected log(message: string) {
    console.log(message);
  }
  move(distanceInMeters: number = 0) {        
    this.log(`${this.name} moved ${distanceInMeters}m.`);//请注意name来自何处
    this.log('==============');
  }
}

class Horse extends Animal {
  constructor(name: string) { 
    super(name); // 通过super调用父类构造器
  }
  run(distanceInMeters = 50) { //自己独有的函数
    this.log("Clop, clop..."); 
    super.move(distanceInMeters); // 通过super调用父类方法
  }
}

class Eagle extends Animal {
  constructor(name: string) { super(name); }
  reborn() { //自己独有的函数
    console.log('Reborn？ It is a joke, hahaha!');
  }

}

let tom: Horse = new Horse("Tommy the Palomino");
tom.run(8964);
let sam: Eagle = new Eagle("Sammy the Hawk");
sam.move(1024);//sam的move函数来自何处？
sam.reborn();

总结

以上是我总结在课上学习到的JavaScript和TypeScript的相关知识，我学习了很多关于JavaScript和TypeScript的相关知识，同时也学习了Canvas和Angular。同时也从老师那里得到了很多网站和资料，但我的学习还比较浅层次，知识也停留在基础层面，希望通过之后的不断学习，自己能够不断进步，也能更好地掌握JavaScript和TypeScript。