JavaScript & TypeScript 学习总结

最新推荐文章于 2024-07-30 17:09:59 发布

傲然而立

最新推荐文章于 2024-07-30 17:09:59 发布

阅读量142

点赞数

文章标签： javascript typescript 学习

本文链接：https://blog.csdn.net/qq_56451578/article/details/125677537

版权

JavaScript & TypeScript 学习总结

JavaScript

一.介绍

JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都可以使用 JavaScript。它是网页的“神经”。

二.语法解释

1.位置

HTML 中的 Javascript 脚本代码必须位于 <script>与 </script> 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在

如下

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

2.显示输出

JavaScript 没有任何打印或者输出的函数。
JavaScript 可以通过不同的方式来输出数据：

（1）使用 window.alert() 弹出警告框。

<script>
window.alert(5 + 6);
</script>

（2）使用 document.write() 方法将内容写到 HTML 文档中。

<script>
document.write(Date());
</script>

（3）使用 innerHTML 写入到 HTML 元素。

从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。
使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

（4）使用 console.log() 写入到浏览器的控制台

<script>
a = 5;
console.log(a);
</script>

3.语法

（1）字面量（常量）

在编程语言中，一般固定值称为字面量

数字（Number）字面量可以是整数或者是小数，或者是科学计数(e)。
字符串（String）字面量可以使用单引号或双引号。
表达式字面量用于计算。
数组（Array）字面量定义一个数组。
对象（Object）字面量定义一个对象。
函数（Function）字面量定义一个函数。

（2）变量

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

变量的数据类型可以使用 typeof 操作符来查看：

typeof "John"                // 返回 string

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：

var x, length
x = 5
length = 6

JavaScript使用算术运算符来计算值:

(5 + 6) * 10

JavaScript使用赋值运算符给变量赋值：

x = 5
y = 6
z = (x + y) * 10

（3）运算符

赋值，算术和位运算符

=  +  -  *  /

条件，比较及逻辑运算符

==  != <  >

（4）语句

在 HTML 中，JavaScript 语句用于向浏览器发出命令。

语句是用分号分隔：

x = 5 + 6;
y = x * 10;

（5）关键字
JavaScript 关键字用于标识要执行的操作。
和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。

（6）注释
不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略。

// 我不会执行

（7）数据类型
JavaScript 数据类型
JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

布尔（逻辑）只能有两个值：true 或 false。
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。
当声明新变量时，可以使用关键词 “new” 来声明其类型。
（8）函数
JavaScript 语句可以写在函数内，函数可以重复引用：

引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘以 b 的结果
}

（9）大小写
JavaScript 对大小写是敏感的。

4.语句
JavaScript 语句标识符
JavaScript 语句通常以一个语句标识符为开始，并执行该语句。

语句标识符是保留关键字不能作为变量名使用。

下表列出了 JavaScript 语句标识符 (关键字) ：

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do ... while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if ... else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

五.对象

JavaScript 对象是拥有属性和方法的数据。
在 JavaScript中，几乎所有的事物都是对象。
可以使用字符来定义和创建 JavaScript 对象:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

你可以通过两种方式访问对象属性:

person.lastName;

person["lastName"];

六.函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
如下

function functionname()
{
    // 执行代码
}

（1）在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

（2）在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
JavaScript 变量的生命期从它们被声明的时间开始。

（3）局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

七.作用域
在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。

八.事件
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素
使用 this.innerHTML代码将修改自身元素的内容。

一些常见的HTML事件，如下

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

九.字符串

（1）可以使用索引位置来访问字符串中的每个字符：

var character = carname[7];

（2）可以在字符串添加转义字符来使用特殊字符：

var x = 'It\'s alright';
var y = "He is called \"Johnny\"";

（3）可以使用内置属性 length 来计算字符串的长度。

（4）字符串方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

10.if…Else 语句
条件语句
通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 JavaScript 中，

可使用以下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码。
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码。
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行。
switch 语句 - 使用该语句来选择多个代码块之一来执行。

11.switch 语句
switch 语句用于基于不同的条件来执行不同的动作。

12.循环
循环可以将代码块执行指定的次数。

（1）JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

（2）break 语句用于跳出循环。continue 用于跳过循环中的一个迭代。

13.类型转换

可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。

可以使用 constructor 属性来查看对象是否为数组 (包含字符串 “Array”)。

可以使用 constructor 属性来查看对象是否为日期 (包含字符串 “Date”)。

全局方法 String() 可以将数字转换为字符串。

Date() 返回字符串。

全局方法 Number() 可以将字符串转换为数字。

14.正则表达式
使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符，或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

/正则表达式主体/修饰符(可选)

其中修饰符是可选的。
如下

var patt = /runoob/i

15.错误
try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行

TypeScript
一.介绍

1.基本介绍
TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。
TypeScript 由微软开发的自由和开源的编程语言。
TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

2.语言扩展
TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：
类型批注和编译时类型检查
类型推断
类型擦除
接口
枚举
Mixin
泛型编程
名字空间
元组
Await

二.具体介绍

1.联合类型
联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。

注意：只能赋值指定的类型，如果赋值其它类型就会报错。

创建联合类型的语法格式如下：

Type1|Type2|Type3

实例
声明一个联合类型：

var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "Runoob" 
console.log("字符串为 " + val)

2.map对象
Map 对象保存键值对，并且能够记住键的原始插入顺序。

任何值(对象或者原始值) 都可以作为一个键或一个值。

Map 是 ES6 中引入的一种新的数据结构。

（1）创建 Map
TypeScript 使用 Map 类型和 new 关键字来创建 Map：

let myMap = new Map();

初始化 Map，可以以数组的格式来传入键值对：

let myMap = new Map([
        ["key1", "value1"],
        ["key2", "value2"]
    ]);

（2）Map 相关的函数与属性：

map.clear() – 移除 Map 对象的所有键/值对。
map.set() – 设置键值对，返回该 Map 对象。
map.get() – 返回键对应的值，如果不存在，则返回 undefined。
map.has() – 返回一个布尔值，用于判断 Map 中是否包含键对应的值。
map.delete() – 删除 Map 中的元素，删除成功返回 true，失败返回 false。
map.size – 返回 Map 对象键/值对的数量。
map.keys() - 返回一个 Iterator 对象，包含了 Map 对象中每个元素的键。
map.values() – 返回一个新的Iterator对象，包含了Map对象中每个元素的值。

（3）迭代 Map
Map 对象中的元素是按顺序插入的，我们可以迭代 Map 对象，每一次迭代返回 [key, value] 数组。

TypeScript使用 for…of 来实现迭代：

// 迭代 Map 中的 key
for (let key of nameSiteMapping.keys()) {
    console.log(key);                  
}

3.元组
存储的元素数据类型不同，则需要使用元组。

元组中允许存储不同类型的元素，元组可以作为参数传递给函数。

（1）创建元组的语法格式如下：

var tuple_name = [value1,value2,value3,…value n]

声明一个元组并初始化：

var mytuple = [10,"Runoob"];

（2）访问元组
元组中元素使用索引来访问，第一个元素的索引值为 0，第二个为 1，以此类推第 n 个为 n-1，语法格式如下:

tuple_name[index]

（3）元组运算
我们可以使用以下两个函数向元组添加新元素或者删除元素：
push() 向元组添加元素，添加在最后面。
pop() 从元组中移除元素（最后一个），并返回移除的元素。

4.接口
TypeScript 接口
接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

（1）TypeScript 接口定义如下：

interface interface_name { 
}

（2）联合类型和接口
以下实例演示了如何在接口中使用联合类型：

TypeScript
interface RunOptions { 
    program:string; 
    commandline:string[]|string|(()=>string); 
} 
 
// commandline 是字符串
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  
 
// commandline 是字符串数组
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  
 
// commandline 是一个函数表达式
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 
 
var fn:any = options.commandline; 
console.log(fn());

（3）接口和数组
接口中我们可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串。

设置元素为字符串类型：

实例

interface namelist { 
   [index:number]:string 
} 
 
// 类型一致，正确
var list2:namelist = ["Google","Runoob","Taobao"]
// 错误元素 1 不是 string 类型
// var list2:namelist = ["Runoob",1,"Taobao"]

（4）接口继承
接口继承就是说接口可以通过其他接口来扩展自己。

Typescript 允许接口继承多个接口。

继承使用关键字 extends。

单接口继承语法格式：

Child_interface_name extends super_interface_name

多接口继承语法格式：

Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

5.类
TypeScript 是面向对象的 JavaScript。

类描述了所创建的对象共同的属性和方法。

TypeScript 支持面向对象的所有特性，比如类、接口等。

（1）TypeScript 类定义方式如下：

class class_name { 
    // 类作用域
}

定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：

字段 − 字段是类里面声明的变量。字段表示对象的有关数据。

构造函数 − 类实例化时调用，可以为类的对象分配内存。

方法 − 方法为对象要执行的操作。

（2）创建实例化对象
我们使用 new 关键字来实例化类的对象，语法格式如下：

var object_name = new class_name([ arguments ])

（3）类的继承
TypeScript 支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类。

类继承使用关键字 extends，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。

TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

语法格式如下：

class child_class_name extends parent_class_name

傲然而立

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript & TypeScript 学习总结

JavaScript & TypeScript 学习总结
复制链接

扫一扫

JavaScript & TypeScript 学习总结

JavaScript & TypeScript 学习总结

JavaScript

一.介绍

二.语法解释

1.位置

2.显示输出

（1）使用 window.alert() 弹出警告框。

（2）使用 document.write() 方法将内容写到 HTML 文档中。

（3）使用 innerHTML 写入到 HTML 元素。

（4）使用 console.log() 写入到浏览器的控制台

3.语法

（1）字面量（常量）

（2）变量

（3）运算符

（4） 语句

（4）语句