目录
一、JavaScript简介
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
二、JavaScript的使用
2.1使用语法
设计HTML时，当需要使用JS时，往往需要把相应模块写入<script>标签中
具体用法如下：
<script>
具体内容
</script>2.2关键字
JS关键字都有其具体作用，不能作为变量名。
主要关键字：
名称 作用
break 立即退出循环，阻止再次反复执行任何代码
case 配合switch完成判断
catch 配合try进行错误判断
continue 退出当前循环，根据控制表达式还允许继续进行下一次循环
default 配合switch，当条件不存在时使用该项
delete 删除了一个属性
do 用于do-while,后测试循环，即退出条件在执行循环内部的代码之后计算
else 配合if条件判断，用于条件选择的跳转
finally 预防出现异常时用的，无论异常是否是否发生异常都会处理的
for for语句，循环语句
function 函数关键字
if if 语句用于判断
in 1.配合for遍历对象，2.判断某个属性属于某个对象
instanceof 某个对象是不是另一个对象的实例
new 创建一个新对象
return 从当前函数退出，并从那个函数返回一个值
switch 弥补if的多重判断语句
this 总是指向调用该方法的对象
throw 抛出异常
try 配合catch进行错误判断
typeof 检测变量的数据类型
var 声明变量
void 声明没有返回值
while while判断语句，可配合do做前置判断，或独立使用做后置判断
with with 语句用于设置代码在特定对象中的作用域
2.3变量
JS通过var定义变量
具体使用如下：
var a=10;
var y = 3;
var z = x + y;
变量类型根据变量的赋值语句进行决定。
注意
- 确定变量类型
- 定义的变量为局部变量
2.4数据类型
值类型 (基本类型) ：字符串（String）、数字 (Number)、布尔 (Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型 ：对象 (Object)、数组 (Array)、函数 (Function)。
具体实例如下：
<script>
var a = 10; //number
var year = "2022"; // String
var flge = true; // boolean
var fruit = ["apple", "watermelon", "grape", "pear"]; // Array
var people = {name:"ld", age:"20"}; // Object
function Function(参数) {
函数体部分.....
return 返回值
} //function
</script>2.4.1函数
JS的函数功能实现了具体方法的完成以及数据的快速处理。
函数具体定义如下：
function 函数名(参数)
{
函数体....
返回类型 return 值;
}注意
- 参数和返回值可有可无，根据具体需求决定
- 传入参数与设置参数个数可以不同
- 构建函数时函数名尽量能够反映函数的具体功能
箭头函数定义：
const materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
console.log(materials.map(material => material.length));箭头函数定义比一般函数往往更见简洁，适用于一些功能不复杂的函数定义。
2.4.2对象
在处理数据时，会面对到某一实体的处理，实体可能有许多属性或许多需求方法，JS为其提供了对象数据类型，其实本质上即是一种类，它对该实体进行了封装。
具体定义如下：
var people = {name:"ld",
age:"20"，
function GetName(){
return name;
}
}; 2.4.1数组
处理数据时，面对的往往不是单一数据，而是一些数据。数组数据类型能够实现对一些数据的存储和处理。
具体定义如下：
address: ["北京" , "上海" , "西安"]注意
- 一个数组并不只是能处理一类数据，可以处理多种数据类型。
2.5数组的主要方法
2.5.1toString方法
toString() 把数组转换为数组值（逗号分隔）的字符串。
<script>
address: ["北京" , "上海" , "西安"];
alter(address.toString());
</script>2.5.2pop方法
pop() 方法从数组中删除最后一个元素。
<script>
address: ["北京" , "上海" , "西安"];
address.pop();
</script>2.5.3push方法
push() 方法（在数组结尾处）向数组添加一个新的元素或返回新数组的长度。
<script>
address: ["北京" , "上海" , "西安"];
address.push("许昌");
</script><script>
address: ["北京" , "上海" , "西安"];
var x = address.push("许昌");
</script>2.5运算符
JS定义了多种运算符来进行数据处理：
运算符 描述 + 加法 - 减法 * 乘法 / 除法 % 取模（余数） ++ 递加 -- 递减 == 等于 && 逻辑与 || 逻辑或 ! 逻辑非 === 等值等型 != 不相等 !== 不等值或不等型 > 大于 < 小于 >= 大于或等于 <= 小于或等于 ? 三元运算符 typeof 返回变量的类型。 instanceof 返回 true，如果对象是对象类型的实例。
具体实例如下：
x = 1 + 2;
y = "1" + 2;
z = "Hello" + 2;运算结果
3
12
hello2注意
- 数字和数字相加结果为和
- 数字和字符串相加结果为字符串
三、Typescript简介
TypeScript（简称TS）是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
四、Typescript的使用
4.1 TS的安装和配置
安装好NodeJS后，以管理员身份运行终端，使用npm -g install ts-node typescript命令进行全局安装
如在VS Code中开发，请安装TSLint、TypeScript Hero、Bracket Pair Colorizer等插件
新建一个.ts后缀的文件，任意写一段JS代码，点击运行试试是否配置成功。
4.2变量
TS中使用关键字let 和 const来定义变量。
let使用：
let a:number = 3;
let a = 12;
当不加数据类型时，则会默认定义数据类型
cost使用：
const a:number = 3;
const a = 12;数据类型判定同let，不同的是const定义的变量数值不能再进行更改
4.3解构
作用：将对象、数组中的元素拆分到指定变量中，以方便使用
实例：
//解构数组
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);
4.4函数
作用：实现一些具体功能的方法。
实例：
function greet():string { // 返回一个字符串
return "Hello World"
}
function caller() {
var msg = greet() // 调用 greet() 函数
console.log(msg)
}
// 调用函数
caller()4.5类
作用：能够对一具象实体进行封装和数据处理。
实例：
class People{
// 字段
name :string;
// 构造函数
constructor(name :string) {
this.name = name
}
// 方法
disp():void {
console.log("People名 : "+this.name )
}
}
// 创建一个对象
var obj = new People("ld")
// 访问字段
console.log("名 : "+obj.name )
// 访问方法
obj.disp()
4.6存取器
作用：对类中的private数据类型进行赋值和访问
实例：
//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);
4.7静态属性
作用：类中的属性或函数有static修饰，则可直接使用而不需要实例化
实例
class People{
age: number;
sex: string;
name: string;
constructor(age:number,sex: string,name:string){
this.age=age;
this.sex=sex;
this.name=name;
}
//类的函数
static printAll(): void{
alert("ld");
}
printAll01():void{
alter("ld01")
}
}
People.printAll();
let people = new People(20 , "nan","ld");
people.printAll01();4.8继承
作用：当某个实体具有延申实体时，延申实体应该有该实体的所有属性。比如手机实体已经存在，现在需要一个华为手机实体，则可利用继承方式继承手机实体的所有属性，在此基础上添加华为手机实体手机自身的具体属性。
实例：
class Phone {
Id:number
constructor(a:number) {
this.Id = a
}
printAll():void {
alter( "bbb")
}
}
class Huawei extends Phone {
price:number
color:string
constructor(a:number , price:number , color:string) {
this.Id = a
}
printAll01():void {
alter( "aaa")
}
}
var obj = new Huawei (01 , 20000 , "red");
obj.printAll()4.9模块
当项目较大时，对整体的管理将变得难度很大。这是可以将项目分为一个个模块进行分别管理。
模块仅在自身区域起作用，因此某一模块中的数据等内容在模块外是无法访问到的。外部可以通过export方法进行模块导入，这样就可以访问具体模块内容了。
实例：
//People.ts
export class People{
name:string
constructor(pname: string) {
this.name = name;
}
get name() {
return name;
}
}
//main.ts
import { People} from "./People";
let people = new People('ld');
console.log(People.name);
注意 导入模块是路径要输入正确
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
