JavaScript & TypeScript 学习总结

一、JavaScript

1.什么是JS

JS是JavaScript的简称，这是一门最流行的运行在浏览器的脚本语言。
JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。
JS是一种轻量级的编程语言，可由所有的现代浏览器执行

2.JS的作用

– 网页特效 (监听用户的一些行为让网页作出对应的反馈)

– 表单验证 (针对表单数据的合法性

– 数据交互 (获取后台的数据, 渲染到前端）

– 服务端编程 (node.js）

​

3.JS的使用

同CSS一样，JS的使用同样有三种方式：行内JS、内部JS、外联JS.

3.1 行内JS：代码写在标签内部

 一般的js编程不推荐使用这种形式，但是vue框架会用该使用方法。

3.2内部JS：直接写在html文件里，用script标签包住

3.3外部JS：代码写在以.js结尾的文件里，代码写在以.js结尾的文件里。

 4.JS的输入输出语法

4.1 输入语法：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

 

4.2 输出语法

4.2.1 语法1：

 作用：向body内输出内容

 注意：如果输出的内容写的是标签，也会被解析成网页元素

4.2.2 语法2：

 作用：页面弹出警告对话框

4.2.3 语法3：

 作用：控制台输出语法，程序员调试使用

5.变量

5.1 声明变量：

声明变量有两部分构成：声明关键字、变量名（标识）

let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语

5.2 变量的命名规则：

（1）不能用关键字，关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。

（2）只能用下划线、字母、数字、$组成，且数字不能开头

（3） 字母严格区分大小写，如 Age 和 age 是不同的变量

5.3 let和var的区别

var 声明:1.可以先使用 在声明

              2.var 声明过的变量可以重复声明

              3.比如变量提升、全局变量、没有块级作用域等等

6.数据类型

JS中分为两大数据类型：基本数据类型、引用数据类型

基本数据类型：number 数字型、string 字符串型、boolean 布尔型、undefined 未定义型、null 空                           类型

引用数据类型：object 对象

算术运算符：主要包括加（+）、减（-）、乘（*）、除（/）、取余（%求模）

算术运算符优先级：先乘除后加减，有括号先算括号里面的

运算符优先级：

7.类型转换

JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。  使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

7.1 隐式转换：某些运算符被执行时，系统内部自动将数据类型进行转换。

   1.  + 号两边只要有一个是字符串，都会把另外一个转成字符串

    2.  除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

7.2 显示转换

Number(数据)

    转成数字类型 

   如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字

    NaN也是number类型的数据，代表非数字

parseInt(数据)

     只保留整数

parseFloat(数据)

      可以保留小数

转换为字符型:

       String(数据)

       变量.toString(进制）

8.程序三大流程控制语句

 1,选择结构
if语句,当指定条件为 true 时，该语句才会执行代码
if…else 语句, 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if … else if … else 语句, 选择多个代码块之一执行
switch 语句,使用该语句来选择多个代码块之一来执行，替代简化if…else if … else if

2,循环结构
for循环
for (初始化变量; 条件; 增量) {
被执行的代码块（循环体）
}
初始化变量 在循环（代码块）开始前执行
条件 执行循环（代码块）的条件。条件成立才执行代码块
增量 在循环（代码块）被执行之后执行 然后再次判断条件
For/In 循环
循环遍历对象的属性
var person = { fname: “John”, lname: “Doe”, age: 25 };
for ( x in person ) {
txt = txt + person[x];
}
while循环
在指定条件为真时循环执行代码块
while ( 条件 ) {需要执行的代码 （循环体）}
do/while 循环
在判断条件之前执行一次循环体，然后判断条件，如果为真再次执行循环。
do {需要执行的代码} while ( 条件 );
循环至少会执行一次 即使条件是 false

3,break和continue
break:用于跳出循环。跳出循环后继续执行该循环之后的代码
continue:中断本次循环，如果出现了指定的条件，继续执行下次循环
标签引用
可以对JS语句进行标记
通过标签引用，break 语句可用于跳出任何 JS 代码块

9.数组

数组：(Array)是一种可以按顺序保存数据的数据类型

9.1 创建数组：

9.1.1 使用数组字面量表示法

 9.1.2 使用 Array 构造函数

可分为无参构造和带参构造。

9.1.3 Array.of 方法创建数组(es6 新增)  Array.of()方法总会创建一个包含所有传入参数的数组，而不管参数的数量与类型。

 9.2数组方法

数组原型方法主要有以下这些

• join()：用指定的分隔符将数组每一项拼接为字符串
• push() ：向数组的末尾添加新元素
• pop()：删除数组的最后一项
• shift()：删除数组的第一项
• unshift()：向数组首位添加新元素
• slice()：按照条件查找出其中的部分元素
• splice()：对数组进行增删改
• fill(): 方法能使用特定值填充数组中的一个或多个元素
• filter():“过滤”功能
• concat()：用于连接两个或多个数组
• indexOf()：检测当前值在数组中第一次出现的位置索引
• lastIndexOf()：检测当前值在数组中最后一次出现的位置索引
• every()：判断数组中每一项都是否满足条件
• some()：判断数组中是否存在满足条件的项
• includes()：判断一个数组是否包含一个指定的值
• sort()：对数组的元素进行排序
• reverse()：对数组进行倒序
• forEach()：ES5 及以下循环遍历数组每一项
• map()：ES6 循环遍历数组每一项
• copyWithin():用于从数组的指定位置拷贝元素到数组的另一个指定位置中
• find():返回匹配的值

10.函数

函数就是将实现特定功能的代码封装起来，当我们需要实现特定功能时，直接调用函数实现即可，不需要每次都写一堆代码，实现代码的复用。

函数就是将实现特定功能的代码封装起来，当我们需要实现特定功能时，直接调用函数实现即可，不需要每次都写一堆代码，实现代码的复用。

10.1 函数格式

 10.2,函数的使用
通过调用函数来使用。比如：sum（）
注意:在声明函数的前后都可以调用。JS可以在任何位置进行调用函数 当调用该函数时，会执行函数内的代码
函数可以不带参数,参数可以写多个,用逗号隔开

10.3 作用域

作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。

函数作用域： 在 JavaScript函数中声明的变量，会成为函数的局部变量。
​ 函数内部声明的变量，在函数外部不能访问。

全局作用域：函数之外声明的变量，会成为全局变量。
​ 函数外部声明的变量，在函数内部可以访问。
​ 当函数嵌套，在这个时候，内部函数与外部函数的这个变量就组成了闭包。

10.4函数调用

函数声明好之后并不会直接运行，需要进行调用才能运行。调用函数的方式不仅限于 () 执行。

调用函数的方式：

• 函数名(实参列表);
• 函数名.call(执行环境对象,实参列表);
• 函数名.apply(执行环境对象,实参列表数组);
• 函数名.bind(执行环境对象)(实参列表);

10.5 回调函数

回调，就是回头调用的意思。主函数的事先做完，回头再调用传进来的那个函数。

回调函数的作用：回调函数一般都用在耗时操作上面：因为主函数不用等待回调函数执行完，可以接着执行自己的代码。比如ajax请求，比如处理文件等。

二、TypeScript

1、 简介

TypeScript 是由微软开发的一款开源的编程语言，TypeScript 是 Javascript 的超集，遵循最新的 ES6、ES5 规范，TypeScript 扩展了 JavaScript 的语法。TypeScript 更像后端 Java、C#这样的面向对象语言，可以让 JavaScript 开发大型企业项目。谷歌也在大力支持 Typescript 的推广，谷歌的 angular2.x+ 就是基于 Typescript 语法，最新的 Vue 、React 也可以集成 TypeScript。Nodejs 框架中的 Nestjs、midway 中用的就是 TypeScript 语法。
 

2、TS的数据类型

TS 中的常用基础类型分为两类：1.JS中原有的类型、2.TS 新增类型

 3.TS的函数

函数是由一连串的子程序（语句的集合）所组成的，可以被外部程序调用，向函数传递参数之后，函数可以返回一定的值。

通常情况下，TypeScript 代码是自上而下执行的，不过函数体内部的代码则不是这样。如果只是对函数进行了声明，其中的代码并不会执行，只有在调用函数时才会执行函数体内部的代码。
3.1 函数格式

3.1.1 函数格式一：

 3.1.2 函数格式二：

4 TS中的类

 4.1 类的继承

类的继承：在 TypeScript 中要想实现继承使用 extends 关键字，只要一旦实现了继承关系，那么子类中便拥有了父类的属性和方法，而在执行方法过程中，首先从子类开始找，如果有，就使用，如果没有，就去父类中找。类的继承只能单向继承。

4.2 修饰符

TypeScript 里面定义属性的时候给我们提供了 三种修饰符

public：公有类型，在当前类里面、子类、类外面都可以访问
protected：保护类型，在当前类里面、子类里面可以访问，在类外部没法访问
private：私有类型，在当前类里面可以访问，子类、类外部都没法访问
如果属性不加修饰符，默认就是公有（public）。

4.3抽象类

TypeScript 中的抽象类：它是提供其他类继承的基类，不能直接被实例化。

用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类（也就是其子类）中实现，abstract抽象方法只能放在抽象类里面。

5.接口

在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。 typescrip中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。