Javascript与Typescript学习总结

最新推荐文章于 2024-07-24 11:09:48 发布

m0_71960012

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量100

点赞数

文章标签： javascript typescript 学习

本文链接：https://blog.csdn.net/m0_71960012/article/details/125689222

版权

JavaScript

简介

一门运行在浏览器上的轻量级脚本语言。

作用

DOM操作：对HTML的元素进行增删查改等操作。
动画效果：对网页增加各种动效，使网页更加丝滑。
交互：完成网页与用户的交互，点击、滑动、拖拽等。

HTML引入JS的方法

嵌入（类似于CSS的内联修饰）直接嵌入元素内例：<input type="button" name="" onclick="alert('被点击')；">
页面嵌入在HTML中用<Script>``</Script>标签表示（类似CSS）
外部引入新建js文件，在<head>或<body>内引入，设定src属性即可。

基本语法

大小写敏感，语句以;结尾
不区分变量类型，都可以用var进行变量声明
操作符
- ++，–
- &&，||，！
- 值为假的数值类型：false,null,undefined,‘’,0,NaN
- +,-,*,/,%
- <> != <= >= === !==
  - === 全等符，要求值和类型都相等才返回真
- ? : 三元操作符
- =,+=,-=,*=,/=,%=
if,do-while,while,for,for-in,for-of,break,continue,switch
- for(var c in list) c值为下标
- for(var c of list) c值为元素
函数 function
- 不介意传入参数及类型，如果定义了两个名字相同的函数，这改名字属于后定义的函数。
对象 Object
对象有两种定义方法

var ob = new Object(); 生成空对象
ob.id = "001",设置对象属性
ob.printId = {console.log(this.name);};设置对象方法
var ob = {id : "001",
printId: function(){
console.log(this.name);
}
};

工厂函数批量构造对象
function createob(name){定义工厂函数
var o = new Object();
o.name = name;
}
var ob1 = createPerson('steve') 使用
var ob2 = createob('linus')
数组 Array
- 创建数组，方法一 var list1 = new Array('A','B','c')
- 方法二 var list2 = ['A','B','C']
- 常用方法
  - push() 末尾推入
  - pop() 末尾弹出
  - shift() 首项弹出
  - unshift() 在数组前端添加任意项并返回新数组长度
  - reverse() 反转数组
  - slice() 分片，参数为起始和终止位置，返回分片后的数组,不会影响原始数组
  - splice()
    - 其可根据需求灵活配置参数
    - 第一个参数代表了要操作的位置，应为一个整数
    - 第二个参数代表从从操作位置往后，要删除的项数，可为0，也应为一个整数。
    - 第三个及往后参数代表了要往列表中插入的元素，可以为任意类型。
调试方法
- console.log 调试窗口中打印
定时器
- 其作用为当到了一定时间后，系统会自动调用定时器函数。制作动画，异步操作，函数缓冲节流等操作都需要定时器。
- 其有两个参数
  - myalert可以是用引号括起来的一段代码，也i可以是一个函数名，是系统到时间后将要执行的代码。
  - millisec设定定时器触发的时间，单位为毫秒
- 相关语法有
  - setTimeout() 定义只执行一次的定时器
  - setInterval() 定义反复执行的定时器
    - 例： var time = setInterval('alert('OK')',2000);
  - clearTimeout() 关闭只执行一次的定时器
  - clearInterval() 关闭反复执行的定时器
    - 例： cleatInterval(time);

Typescript

简介

TS是JS的类型超集，JS可以做的TS都可以做，其可编译为纯JS，其在开发过程中可以校验代码，修复潜在bug。TS可以构建大型程序，并且在任何浏览器、任何计算机、任何操作系统上运行，而且是开源的。

基本语法

数据类型

变量声明有两种方式

let 变量名 : 变量类型 = 初始化值;
let 变量名 : 变量类型 | undefined;
变量名 = 变量值;

变量类型

boolean 布尔型
number 数值型，可以是小数，也可以是整数
string 字符型
number[]或Array<number> 数组
[number , string] 元组，其为数组的一种，元组中元素的类型必须和定义时给定的一致
null空
undefined未定义
any任何类型，TS会自动识别
void没有类型，一般用于定义没有返回值的方法
nerver 声明never类型的变量只能被never类型所赋值，而never类型可以赋值给任何类型
枚举型
- 事先考虑到某一变量的所有值后，用含义清晰的单词表示其可能的值
- 定义方法 enum 枚举名{标识符1,标识符2,.......}
  +实例 enum weather{fineDay , rainyDay}
- 当其标识符未定义时，其值为下标，否则值为被赋的值
  +实例 console.log(weather.fineDay)//1
组合类型
TS中支持一个变量赋予多种类型，用|分隔。例如：let num : number | null | undefined

函数

定义方法 : function 函数名(参数列表):返回值类型{
函数体
return 返回值;
}
函数参数
- 必选参数主要在声明时写了参数就为必须传入的参数
- 可选参数配置到必选参数的最后面，使用?: 进行类型定义
- 默认参数定义时直接赋值即可，可选参数不能进行初始化赋值
- 剩余参数使用...剩余参数数组名 : 数组类型[]表示接收剩余参数，其接收到的值将存入到指定类型的数组中，剩余参数也必须放置到最参数列表中的最后面
函数重载
当函数名字同名时，TS将同名的函数提供多个函数参数类型进行实现。
箭头函数
通过简化函数当作参数传递时匿名函数的写法实现。

类

使用class关键字定义类
使用extends关键字继承
修饰符
- public 公有类型，当前类里，子类，类外都能访问
- protected 保护类型，当前类里，子类里可以访问
- private 私有类型，当前类中能访问
- static 静态修饰符，可以修饰属性和方法，通过类名可以直接调用，但在静态方法内不能直接调用当前类中的非静态属性，非静态方法
- abstract 抽象修饰符
  - 修饰类时表示抽象类，其只能作为父类进行继承，不能直接创建实例
  - 修饰方法时表示多态方法。父类定义一个方法不去实现，每个子类继承后进行实现。
构造函数 constructor() 在类中定义该函数，在实例化时会自动触发，实现类的初始化

接口

用interface关键字表示
用于对行为和动作进行规范约束，类似于抽象类，但是接口中不允许有方法实现，只能有方法定义。
属性类接口
- 接口定义
  interface Name{ firstName : string; lastName : string; }
- 接口调用
  function printName(name:Name){ console.log(name.fristName+name.lastName); }
除属性类接口外，函数类接口、类类型接口等
接口可以继承接口，为单向继承，但是实现接口的之类可以实现多个接口

泛型

泛型可以用于接口、类、方法等，解决其复用性问题
用<T>表示，例如泛型类 class Name <T>{ public Name : T; };
使用时需要指定<T>所代表的类型,例如var name = new Name<string>()

装饰器

装饰器是一种特殊类型的声明，是JS最大成就之一，也已是ES7的标准特性之一。其可以注入到类、方法、属性或参数上来扩展器功能。

普通装饰器
- 无法传参
- 定义普通装饰器

 function helloword(target: any){
	target.prototype.hello = '这是动态扩展的属性'
	target.prototype.sayHellow = function(){console.log("hello word,这是动态扩展的方法");}
}

+ 使用装饰器

@helloword
class helloClass{ }

装饰器工厂
- 可传参
- 定义装饰器工厂

function logClass(params: string) {
	return function (target: any) {
		console.log(target);//target就是当前类
		console.log(params);//params就是当前类传递进来的参数
		target.prototype.apiUrl = params;
	}
}

+ 使用装饰器工厂

@logClass("http://www.baidu.com")
class HttpClient {

}

装饰器执行顺序：属性>方法>方法参数>类

模块化

模块化能防止命名冲突，提高代码复用性及维护性
主要语法有两个
1. export 用于规定对外的接口
  - 使用方法有两种，一是在声明变量、函数或类时用export标注其可被引用，二是使用export{}统一标注
  - 例如 export let name = 'A;' 或 export{name};
2. import 用于引入其他模块

命名空间

TS的命名空间可将内部代码包裹起来，通过export关键字控制对外的暴露，避免命名冲突。命名空间的关键字为namespace。

参考文献

https://www.runoob.com/js/js-debugging.html
https://blog.csdn.net/IT_Mr_guo/article/details/90511442?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-0-90511442-blog-106200951.pc_relevant_aa2&spm=1001.2101.3001.4242.1&utm_relevant_index=3
https://qige.io/
https://www.tslang.cn/docs/handbook/basic-types.html
https://blog.csdn.net/weixin_40096821/article/details/104406371
https://blog.csdn.net/ZZB_Bin/article/details/103168609
https://blog.csdn.net/qq_36228377/article/details/123653625?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-123653625-blog-104406371.pc_relevant_multi_platform_whitelistv1&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-123653625-blog-104406371.pc_relevant_multi_platform_whitelistv1&utm_relevant_index=2