本文章为web课学习JavaScript & TypeScript的学习总结
JavaScript & TypeScript学习总结
JavaScript
JS介绍
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
- JavaScript 很容易学习。
特点
1、动态改变页面内容
HTML页面是静态的，一旦编写，内容是无法改变的。JavaScript可以弥补这个不足，可以将内容动态地显示在网页中。2、动态改变网页的外观
JavaScript通过修改网页元素的CSS样式，达到动态地改变网页的外观。3、验证表单数据
我们常见的在各大网站中的注册中的验证功能，就是JavaScript实现的。4、响应事件
JavaScript是基于事件的语言。例如点击一个按钮弹出一个对话框，就是鼠标点击触发的事件，例如绿叶学习网教程文章中的点赞效果：作用对于JavaScript的理解，就一句话：如果没有使用JavaScript，网页就是静态的，唯一的功能就是给用户浏览。加入了JavaScript，网页变得绚丽多彩起来。
JS基础
标识符
- 第一个字符必须是字母、下划线（_）或美元符号这3种其中之一，其后的字符可以是字母、数字或下划线、美元符号；
- 变量名不能包含空格、加号、减号等符号；
- 标识符不能和JavaScript中用于其他目的的关键字同名；
- 标识符采用驼峰大小写格式，也就是第一个字母小写，剩下的每个单词的首字母大写
例子
i Lvye_Stfasfa _Basdbaa $Str t1000关键字
在JavaScript语言中有特定含义，成为JavaScript语法中一部分的那些字。JavaScript关键字是不能作为变量名和函数名使用的，也就是说变量的名称或者函数的名称不能跟系统的关键字重名。使用JavaScript关键字作为变量名或函数名，会使JavaScript在载入过程中出现编译错误。
变量常量
常量
常量，顾名思义就是指不能改变的量。常量的指从定义开始就是固定的，一直到程序结束。常量主要用于为程序提供固定和精确的值，包括数值和字符串，如数字、逻辑值真（true）、逻辑值假（false）等都是常量。
变量
指在程序运行过程中，其值是可以改变的。
1、变量的命名规则
- 第一个字符必须是字母、下划线（_）或美元符号，其后的字符可以是字母、数字或下划线、美元符号；
- 变量名不能包含空格、加号、减号等符号；
- 标识符不能和JavaScript中用于其他目的的关键字同名；
2、变量的声明与赋值
在JavaScript中，使用变量之前需要先声明变量。所有的JavaScript变量都由关键字var声明。
var 变量名; var 变量名=值;(在声明变量的同时，也可以对变量进行赋值。)一个关键字var也可以同时声明多个变量名，变量名之间必须用英文逗号“,”隔开。
例如声明变量name、age、gender，分别表示姓名、年龄、性别，代码如下：var name,age,gender;可以在声明变量的同时，对变量进行赋值：
var name="张三",age=18,gender="男";3、变量的作用域
变量的作用域是指某变量在程序中的有效范围，也就是程序中定义这个变量的区域。在JavaScript中，变量根据作用域可以分为2种：全局变量和局部变量。
全局变量在主程序中定义，其有效范围是从定义开始，一直到本程序结束为止。
局部变量在程序的函数中定义，其有效范围只有在该函数之中；当函数结束后，局部变量生存期就结束了。<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> var a; //该变量在函数外声明，作用于整个脚本代码; function send() { a="这是变量A"; var b="这是变量b"; //该变量在函数体内声明，只作用于该函数体 alert(a+b); } send(); </script> </head> <body> </body> </html>运算符
算术运算符
算术运算符用于在程序中进行加、减、乘、除等运算。
比较运算符
比较运算符的基本操作过程是：首先对操作数进行比较，该操作数可以是数字也可以是字符串，然后返回一个布尔值true或false。
赋值运算符
JavaScript中的赋值运算可以分为2种：简单赋值运算和复合赋值运算。
1、简单赋值运算是将赋值运算符（=）右边表达式的值保存到左边的变量中。
2、复合赋值运算结合了其他操作（如算术运算操作）和赋值操作。
逻辑运算符
逻辑运算符通常用于执行布尔运算，它们常常和比较运算符一起使用来表示复杂比较运算，这些运算涉及的变量通常不止一个，而且常用于if、while和for语句中。
JS语句
选择
if语法
“if……else”语句是“双向分支选择结构语句”，通常用于需要用两个程序分支来执行的情况（双向选择），也就是在if语句基础上多了一个分支。
if(条件) { 当条件为true时执行的代码 } else { 当条件为false时执行的代码 }switch语法
switch语句用于将一个表达式同多个值进行比较，并根据比较结果选择执行语句。
switch(表达式) { case 取值1: 语块1;break; case 取值2: 语块3;break; …… case 取值n: 语块n;break; default: 语句块n+1; }循环
while语句
是条件判断语句，也是循环语句。
语法：
while(条件表达式语句) { 执行语句块; }当“条件表达式语句”的返回值为true时，就会执行大括号“{}”中的语句块，当执行完大括号“{}”的语句块后，再次检测条件表达式的返回值，如果返回值还为true，则重复执行大括号“{}”中的语句块，直到返回值为false时，才结束整个循环过程，接着往下执行while代码段后面的程序代码。
for循环
for语句通常由2部分组成：一是“条件控制部分”，二是“循环体”。
语法：
for(初始化表达式;循环条件表达式;循环后的操作表达式) { 执行语句块; }在使用for循环之前要先设定一个计数器变量，可以在for循环之前定义，也可以在使用时直接进行定义。上面的语法中，“初始化表达式”表示计数器变量的初始值；“循环条件表达式”是一个计数器变量的表达式，决定了计数器的最大值；
函数
定义函数
不指定函数名的函数
语句的集体，即语句块
语法：function(参数1,参数2,….,参数n) { //函数体语句 }指定函数名的函数
是JavaScript中使用最广泛的方法，反而“不指定函数名的函数”用得比较少。
语法：function 函数名(参数1,参数2,….,参数n) { //函数体语句 return 表达式; }调用函数
简单调用
JS函数简单调用，也被称为直接调用。该方法一般比较适用于没有返回值的函数。也就是说相当于执行函数中的语句集合。
语法：
函数名(实参1,实参2,….实参n);在表达式中调用
在表达式中调用函数的方式，一般适用于有返回值的函数，然后函数的返回值参与表达式的计算。通常该方式还会和输出语句（如document.write()、alert()等）搭配使用。
在事件响应中调用
JavaScript是基于事件模型的程序语言，页面加载、用户点击、移动光标等都会产生事件。当事件产生时，JavaScript就可以调用某个函数来针对这个事件做出响应。
通过链接调用
函数除了可以在事件响应中调用外，还可以通过超链接来调用函数。
语法：<a href="javascript:函数名"></a>在超链接中调用函数，指的就是在a标签的href属性中使用“javascript:函数名”来调用函数。当用户点击该超链接时，就会执行调用的相应函数。
数组 Array
数组是存储一组“相同数据类型”的数据结构,数组使用下标方式来获取某一项数值；
1、数据类型为“字符串” var arr = new Array("a","b"); 2、数据类型为“数值型” var arr = new Array(1,2,3,4,5);赋值
1、var 数组名 = new Array(元素1,元素2,…,元素n); 2、 var 数组名 = new Array(); 数组名[0] = 元素1; 数组名[1] = 元素2; …… 数组名[n] = 元素(n-1);取值
直接通过下标获得值
var arr=new Array("a","b","c","d"); document.write(arr[4]);属性
- constructor 返回对创建此对象的数组函数的引用。
- length 设置或返回数组中元素的数目。
- prototype 使您有能力向对象添加属性和方法。
Array对象方法
- concat() 连接两个或更多的数组，并返回结果。
- join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
- pop() 删除并返回数组的最后一个元素
- push() 向数组的末尾添加一个或更多元素，并返回新的长度。
- reverse() 颠倒数组中元素的顺序。
- shift() 删除并返回数组的第一个元素
- slice() 从某个已有的数组返回选定的元素
- sort() 对数组的元素进行排序
- splice() 删除元素，并向数组添加新元素。
- toSource() 返回该对象的源代码。
- toString() 把数组转换为字符串，并返回结果。
- toLocaleString() 把数组转换为本地数组，并返回结果。
- unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
- valueOf() 返回数组对象的原始值
对象
String
String基础
一个字符串用于存储一系列字符就像 “Hiram A”.
一个字符串可以使用单引号或双引号：实例
var Str="Kk"; var Str='Kk'; var a=Str[1]; //可以使用位置（索引）可以访问字符串中任何的字符：String函数
length
字符串（String）使用长度属性length来计算字符串的长度：var txt="gfsdgfhgdfdsgsdgsgsgsgsgsgagagdag"; document.write(txt.length);indexOF
字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置：var str="Hello world, welcome to the universe."; var n=str.indexOf("welcome");如果没找到对应的字符函数返回-1
lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。split
字符串转为数组
字符串使用split()函数转为数组:txt="a,b,c,d,e" // String txt.split(","); // 使用逗号分隔 txt.split(" "); // 使用空格分隔 txt.split("|"); // 使用竖线分隔Date
Date创建
Date 对象用于处理日期和时间。可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：
有四种方式初始化日期:new Date(); new Date(value); new Date(dateString); new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);Date设置
通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。
在下面的例子中，我们为日期对象设置了一个特定的日期 (2021 年 6 月 27 日)：
var myDate=new Date(); myDate.setFullYear(2021,6,27);在下面的例子中，我们将日期对象设置为 1天后的日期：(日期可加)
var myDate=new Date(); myDate.setDate(myDate.getDate()+1);TypeScript
- 添加了类型系统的 JavaScript，适用于任何规模的项目。
- 在完整保留 JavaScript 运行时行为的基础上，通过引入静态类型系统来提高代码的可维护性，减少可能出现的 bug。
TypeScript特性
TypeScript 类型系统
静态类型
类型系统按照「类型检查的时机」来分类，可以分为动态类型和静态类型。
- 动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。
- 静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。TypeScript 在运行前需要先编译为 JavaScript，而在编译阶段就会进行类型检查，所以 TypeScript 是静态类型
优势
大大减少编译时报错，同时也解决了JavaScript的代码质量参差不齐，维护成本高，运行时错误多的问题。弱类型
类型系统按照「是否允许隐式类型转换」来分类，可以分为强类型和弱类型。TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性，所以它们都是弱类型。虽然 TypeScript 不限制加号两侧的类型，但是我们可以借助 TypeScript 提供的类型系统，以及 ESLint 提供的代码检查功能，来限制加号两侧必须同为数字或同为字符串。
TypeScript适用于任何规模
TypeScript 非常适用于大型项目——这是显而易见的，类型系统可以为大型项目带来更高的可维护性，以及更少的 bug。
- 在中小型项目中推行 TypeScript 的最大障碍就是认为使用 TypeScript 需要写额外的代码，降低开发效率。但事实上，由于有类型推论，大部分类型都不需要手动声明了。相反，TypeScript 增强了编辑器（IDE）的功能，包括代码补全、接口提示、跳转到定义、代码重构等，这在很大程度上提高了开发效率。而且 TypeScript 有近百个编译选项，如果你认为类型检查过于严格，那么可以通过修改编译选项来降低类型检查的标准。
- TypeScript 还可以和 JavaScript 共存。这意味着如果你有一个使用 JavaScript 开发的旧项目，又想使用TypeScript 的特性，那么你不需要急着把整个项目都迁移到 TypeScript，你可以使用 TypeScript 编写新文件，然后在后续更迭中逐步迁移旧文件。如果一些 JavaScript 文件的迁移成本太高，TypeScript 也提供了一个方案，可以让你在不修改 JavaScript 文件的前提下，编写一个类型声明文件，实现旧项目的渐进式迁移。
数据类型
布尔值、数值、字符串、null、undefined
布尔值
只有true或者false两个值!!
let DONE: boolean = true;数值
使用 number 定义数值类型：
let decLiteral: number = 16; let hexLiteral: number = 0xffff; // ES6 中的二进制表示法 let binaryLiteral: number = 0b11111111; let notANumber: number = NaN; let infinityNumber: number = Infinity;0b1010 和 0o744 是 ES6 中的二进制和八进制表示法，它们会被编译为十进制数字。
字符串
使用 string 定义字符串类型：
let myName: string = 'Tom'; let myAge: number = 25;空值
JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 void 表示没有任何返回值的函数：
function alertName(): void { alert('My name is Tom'); }Null 和 Undefined
在 TypeScript 中，可以使用 null 和 undefined 来定义这两个原始数据类型：
let u: undefined = undefined; let n: null = null;与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量：
let num: number = undefined; let u: undefined;而 void 类型的变量不能赋值给 number 类型的变量：
let u: void; let num: number = u;// Type 'void' is not assignable to type 'number'.类
定义
class class_name { // 类作用域 }类可以包含以下几个模块（类的数据成员）：
- 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。
- 构造函数 − 类实例化时调用，可以为类的对象分配内存。
- 方法 − 方法为对象要执行的操作。
例子
TypeScript class Student { // 字段 name:string; // 构造函数 constructor(name:string) { this.name= name } // 方法 disp():void { console.log("名字为 : "+this.name) } }TypeScript 函数
函数定义
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
语法格式如下所示：function function_name() { // 执行代码 }调用函数
函数只有通过调用才可以执行函数内的代码。
语法格式如下所示：TypeScript function test() { // 函数定义 console.log("调用函数") } test() // 调用函数函数返回值
有时，我们会希望函数将执行的结果返回到调用它的地方。通过使用 return 语句就可以实现。,在使用 return 语句时，函数会停止执行，并返回指定的值。
function function_name():return_type { // 语句 return value; }注意
- return_type 是返回值的类型。
- return 关键词后跟着要返回的结果。
- 一般情况下，一个函数只有一个 return 语句。
- 返回值的类型需要与函数定义的返回类型(return_type)一致。
// 函数定义 function greet():string { // 返回一个字符串 return "Hello World" } function caller() { var msg = greet() // 调用 greet() 函数 console.log(msg) } // 调用函数 caller()TypeScript 模块
模块的设计理念
可以更换的组织代码。模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。
两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。
例子模块导出使用关键字 export 关键字，语法格式如下： // 文件名 : SomeInterface.ts export interface SomeInterface { // 代码部分 } //要在另外一个文件使用该模块就需要使用 import 关键字来导入: import someInterfaceRef = require("./SomeInterface");
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
