本文章为web课学习JavaScript & TypeScript的学习总结

JavaScript & TypeScript学习总结

JavaScript
- JS介绍
- JS基础
- - 标识符
  - 关键字
  - 变量常量
  - - 常量
    - 变量
- 运算符
- - 算术运算符
  - 比较运算符
  - 赋值运算符
  - 逻辑运算符
- JS语句
- - 选择
  - - if语法
    - switch语法
  - 循环
  - - while语句
    - for循环
- 函数
- - 定义函数
  - - 函数名不指定函数
    - 指定函数名的函数
  - 调用函数
  - - 简单调用
    - 调用表达式
    - 调用事件响应
    - 通过链接调用
- 数组 Array
- - 赋值
  - 取值
  - 属性
  - Array对象方法
- 对象
- - String
  - - String基础
    - String函数
  - Date
  - - Date创建
    - Date设置
TypeScript
- TypeScript特性
- - TypeScript 类型系统
  - - 静态类型
    - 弱类型
  - TypeScript适用于任何规模
- 数据类型
- - 布尔值
  - 数值
  - 字符串
  - 空值
  - Null 和 Undefined
- 类
- - 定义
  - 例子
- TypeScript 函数
- - 函数定义
  - 调用函数
  - 函数返回值
- 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基础

 标识符

第一个字符必须是字母，下划线（_）或三种美元符号之一，其次是字母、数字或下划线、美元符号；

变量名不能包含空格、加号、减号等符号；

标识符不能和谐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");

JavaScript & TypeScript学习总结

JavaScript & TypeScript学习总结

最近热搜

历史搜索 清除历史记录

历史搜索清除历史记录