本文是关于JavaScript和TypeScript的学习总结。JavaScript部分涵盖了基本用法、显示数据、数组和对象、函数、事件、语句、正则表达式、表单验证和闭包等内容。TypeScript作为JavaScript的超集，介绍了let和const、解构、函数、类、继承和模块等概念，帮助提升代码质量和可维护性。
目录
JavaScript
是一种轻量级的编程语言，是一种基于对象(Object)和事件驱动(EventDriven)的，安全性好的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。
1.基本用法
Javascript 脚本代码必须位于 <script> 与 </script> 标签之间，可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<script>document.write("<h1>这是一个标题</h1>");</script>该语句会在页面加载时进行，向 HTML 的 <body> 写文本。我们通常把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数完成响应。
如需使用外部文件，在 <script> 标签的 "src" 属性中设置该 .js 文件：<script src="myScript.js"></script>
2.显示数据
1.使用window.alert()弹出警告框;
2.向上述一样直接写到文档中：document.write();
3.使用innerHTML写入到 HTML 元素:document.getElementById("demo").innerHTML = "这是JS";
（demo是元素id名）
4.使用console.log()写入到浏览器的控制台，调试程序审查元素时点击控制台即可看到结果，以便检测出错误出现原因，缩小范围。
3.数组、对象
创建对象有如下两种方式，我们常用第二种。
方法一：先生成空对象再设置对象的各个属性，然后设置对象的方法
方法二：直接设置属性
JavaScript 对象是属性和方法的容器，需要注意的是对象的属性之间一定要用逗号隔开;对象的方法定义了一个函数，并作为对象的属性存储。对象方法通过添加 () 调用 (作为一个函数)
数组
在一个数组中可以有不同的对象，可以包含对象元素、函数、数组。
4.函数
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
// 执行代码
}
此处需要注意JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
调用带参数的函数时要把参数作为变量来声明
若需要函数将值返回调用它的地方，则使用return语句function myFunction(a,b) { return a+b; }在使用 return 语句时，函数会停止执行，并返回指定的值，return后面的语句永远不会被执行document.getElementById("dd").innerHTML=myFunction(1,2);执行后“dd”元素的innerHTML会是3。
在函数内部声明的是局部变量，在函数外部声明的是全局变量，网页上所有的脚本跟函数都可以反应它。
5.事件
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。事件可以用于处理表单验证，用户输入，用户行为及浏览器动作，页面加载时触发事件，点击按钮时触发事件等。常见的HTML事件有onclick、onchange、onmouseover（鼠标指针移动到指定的元素上时发生）、onkeydown（用户按下键盘时发生）、onload(完成页面加载)、onmouseout（鼠标从一个元素上离开时发生）
6.语句
js有if条件语句、switch语句、for循环语句、while语句、break和continue语句，while循环语句等基本语句，这些语句的写法与其他编译软件语句写法相同。
7.正则表达式
正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。
var p=/run/i /run/i是一个正则表达式，run是主体，用于检索，i是一个修饰符（搜索不区分大小写）var str = "Visit Runoob!"; var n = str.search(/Runoob/i);search（）方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。replace（）方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。
8.表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。表单数据经常需要使用 JavaScript 来验证其正确性：验证是否为空，是否正确等。
以姓名验证为例：
该函数用来检查用户是否填写必填项，若为空则警告弹出。
9.闭包
闭包就是：函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。闭包就是就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配。当在一个函数内定义另外一个函数就会产生闭包。可以在函数外部访问到函数内部的变量。
闭包的三个特性：函数内部可以引用函数外部的参数和变量；函数嵌套函数；参数和变量不会被垃圾机制回收。闭包其实就是在一个函数内部创建另一个函数
sayHello指向了greeting函数对象，sayHello()则对其进行调用，greeting函数执行完毕后将返回greeting函数内定义的匿名函数对象，而该匿名函数仍然可以访问到了定义在greeting之内的局部变量text。如果把变量a定义在函数内部，却要在函数外使用则失败。
TypeScript
是JavaScript类型的超集，TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用，无需运行程序即可修复潜在bug。
1.let和const
使用let声明变量，而不用var。let作用域为块级即以{}为界，在循环内定义的变量，在循环外是不可以访问的，也不能在被声明之前读或写。而var声明的变量在函数外部仍能访问到，const声明与let类似，但是他赋值后不可以改变。
2.解构
解构是将对象、数组拆分到指定变量中。
3.函数
完整函数定义：有完整的参数和返回类型
可选参数：参数可传可不传，但必须放在必要参数后面，参数超出则会报错。
function dd(firsename:string,lastname?:string){}
默认参数：不必在必要参数后。
function dd(firstname:string,lastname="ding"){}
剩余参数：当想要传入多个参数，参数个数未知时使用剩余参数
function dd(firstname:string,...restof:string[]){}
箭头函数：解决this问题，简化函数
4.类
类的定义和使用同java学习类似
class MyInfo {
name: string;
sex: string;
constructor(name: string, sex: string){ //构造函数，一般用于初始化。
this.name = name;
this.sex = sex;
}
printInfo(): void { //其它函数
console.log(`Hello, ${this.name}.`);
console.log(`people is ${this.sex}.`);
}
}
声明Info类。这个类有4个成员：name属性,sex属性，一个构造函数和一个 printinfo方法。
类中的属性和函数都有访问权限，默认为public即全局可访问，其次为protected即可在类的内部和其子类的内部可访问，最后为private，只能在该类内部可访问，在类外部时使用get，set操作private属性，这部分与java相同。
类中的属性或函数有static修饰，则可直接使用而不需要实例化。
5.继承
通过使用extends关键字继承其它类，从而成为其子类。
6.模块
编写大量程序时我们可能需要使用模块进行管理。每个 .ts 文件就是一个模块，通过 export 来对外部模块暴露元素，通过 import 来引入模块。模块在其自身的作用域里执行，而不是在全局作用域里；这意味着定义在一个模块里的变量，函数，类等等在模块外部是不可见的。模块是自声明的。
在modules文件夹下建立以下文件
name.ts文件
export class Name {
constructor(private first: string, private second: string) {}
get nameMessage()
{ return `Hello ${this.first} ${this.second}`; }
}
sex.ts文件
export class Sexcity{
constructor(private sex: string, private city:string) {}
get personMessage() { return `people is a ${this.sex} in ${this.city}`; }
}
main.ts文件
//用import从外部模块文件导入，默认后缀.ts去掉
import { Name } from "./modules/name";
import { Sexcity } from "./modules/sex";
let name = new Name('Wang', 'Yong');
let loc = new Sexcity('girl', 'Shanxi');
console.log(name.nameMessage);
console.log(loc.personMessage);
更多精细的学习大家可以前网菜鸟驿站或者TypeScript官网查询。
希望大家好好吃饭，好好睡觉，学习进步！！
扫一扫
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
