JavaScript & TypeScript 学习总结_arkts和js

JavaScript & TypeScript 学习总结

---

前言

JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都可以使用 JavaScript。
JavaScript 非常容易学。
JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

---

一、JavaScript是什么？

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。

二、JavaScript

1.基本语法

1、大小写敏感
2、标识符：第一个字符只能是字母、下划线（ _ ）或美元符号（ $ ）之一；
其他字符可以是字母、下划线、美元符号或数字。
3、采用驼峰式格式
4、语句后的分号建议添加，但不必须。
变量：定义变量时要使用 var 操作符，后跟变量名（即一个标识符），如下所示： var message; 这行代码定义了一个名为 message 的变量，该变量可以用来保存任何值。

2.操作符

1、一元操作符 ++ --
2、布尔操作符 && || ！
注意：除下列值为假外其余皆为真： false、null、undefined、''、0、NaN
3、算术操作符+ - * / %
4、关系操作符<> <=>= == === != !==
5、条件（问号）操作符 ? :
6、赋值操作符 = += -+ *= /= %=

语句

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

函数

函数（ function）对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。以下是一个函数示例：

function sayHi(name, message) {
    console.log('Hello ' + name + ',' + message);
}
sayHi('Gridwang', '你好。');
1
2
3
4

ECMAScript 中的函数在定义时不必指定是否返回值。实际上，任何函数在任何时候都可以通过 return 语句后跟要返回的值来实现返回值。
ECMAScript 函数不介意传递进来多少个参数，也不在乎传进来参数是什么数据类型。
也就是说，即便你定义的函数只接收两个参数，在调用这个函数时也未必一定要传递两个参数。可以传递一个、三个甚至不传递参数。

对象Object

对象 object 是ECMAScript 中使用最多的一个类型。我们常将数据和方法封装在对象中。

创建对象有如下两种方式，我们常用第二种。

//方式一new
var person = new Object();//生成空对象
person.name = 'Elon Musk';//设置对象的属性
person.age = 46;
person.job = 'SpaceX Rocket';
person.sayName = function(){    //设置对象的方法/函数，注意此处
    console.log(this.name);
};
//方式二字面量
var person = {
    name: 'Lary Page',
    age: 47,
    job: 'Software Engineer',
    sayName: function(){        //注意此处
        console.log(this.name);
    }
};
console.log(person.job);
person.sayName();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

虽然 Object 构造函数或对象字面量都可以用来创建单个对象，但这些方式有个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。

数组Array

ECMAScript 中的数组与其他多数语言中的数组有着相当大的区别。虽然 ECMAScript 数组与其他语言中的数组都是数据的有序列表，但与其他语言不同的是，ECMAScript 数组的每一项 可以保存任何类型的数据（不建议！）。
也就是说，可以用数组的第一个位置来保存字符串，用第二位置来保存数值，用第三个位置来保存对象，以此类推。而且，ECMAScript 数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。
创建数组有以下两种方法：

var colors = new Array('red', 'blue', 'green');
//方式二字面量
var colors = ['red', 'blue', 'green']; // 创建一个包含 3 个字符串的数组
console.log(colors[1]);
colors[3] = 'brown';
console.log(colors.length);
var names = []; // 创建一个空数组
var hyBird = [1, 2, 'haha', {firstName: 'Yong', lastName: 'Wang'}]; //不推荐！
console.log(hyBird[3].firstName);
1
2
3
4
5
6
7
8
9

常用的数组方法有：元素联合、堆栈方法、队列方法、反转数组项、链接方法、分片方法等。

链式语法

链式语法已变得非常流行。实际上这是一种非常容易实现的模式。基本上，你只需要让每个函数返回 this代表包含该函数的对象，这样其他函数就可以立即被调用。

var bird = {//定义对象字面量
  catapult: function() {
    console.log( 'Yippeeeeee!' );
    return this;//返回bird对象自身
  },
  destroy: function() {
    console.log( "That'll teach you... you dirty pig!" );
    return this;
  }
};
bird.catapult().destroy();//destroy()后还可以再链接吗？
1
2
3
4
5
6
7
8
9
10
11

闭包

闭包是静态语言所不具有的一个新特性。但是闭包也不是什么复杂到不可理解的东西，简而言之，闭包就是：函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。
当在一个函数内定义另外一个函数就会产生闭包

function greeting(name) {
    var text = 'Hello ' + name; // local variable
    // 每次调用时，产生闭包，并返回内部函数对象给调用者
    return function() { console.log(text); }//注意该函数无名称，称为匿名函数
}
var sayHello = greeting('Closure');//调用greeting()返回了什么？
sayHello();  // 注意此处的使用方法。通过闭包访问到了局部变量text
1
2
3
4
5
6
7

---

三、TypeScript是什么？

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

---

四、TypeScript

基础语法

1、TypeScript 程序由以下几个部分组成：
模块
函数
变量
语句和表达式
注释
2、空白和换行：TypeScript 会忽略程序中出现的空格、制表符和换行符。空格、制表符通常用来缩进代码，使代码易于阅读和理解。
3、TypeScript 区分大小写：TypeScript 区分大写和小写字符。
4、TypeScript 注释：注释可以提高程序的可读性。注释可以包含有关程序一些信息，如代码的作者，有关函数的说明等。
5、面向对象：面向对象是一种对现实世界理解和抽象的方法。TypeScript 是一种面向对象的编程语言。面向对象主要有两个概念：对象和类。
对象：对象是类的一个实例
类：类是一个模板，它描述一类对象的行为和状态。
方法：方法是类的操作的实现步骤。

函数

函数只有通过调用才可以执行函数内的代码。语法格式如下所示：

function_name()
1

函数返回值：有时，我们会希望函数将执行的结果返回到调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。

function function_name():return_type { 
    // 语句
    return value; 
}
1
2
3
4

带参数函数：在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。并可以向函数发送多个参数，每个参数使用逗号 , 分隔：

function func_name( param1 [:datatype], param2 [:datatype]) {   
}
1
2

数组

数组对象是使用单独的变量名来存储一系列的值。数组非常常用。

var sites:string[]; 
sites = ["Mary","Rob","Tina"]
1
2

Array 对象：我们也可以使用 Array 对象创建数组。Array 对象的构造函数接受以下两种值：表示数组大小的数值。初始化的数组列表，元素使用逗号分隔值。

var arr_names:number[] = new Array(4)  
 for(var i = 0; i<arr_names.length; i++) { 
        arr_names[i] = i * 2 
        console.log(arr_names[i]) 
}
1
2
3
4
5

多维数组：一个数组的元素可以是另外一个数组，这样就构成了多维数组（Multi-dimensional Array）。最简单的多维数组是二维数组，定义方式如下：

var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]
1

Map对象

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。Map 是 ES6 中引入的一种新的数据结构。
TypeScript 使用 Map 类型和 new 关键字来创建 Map：

let myMap = new Map();
1

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

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

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对象中每个元素的值 。

接口

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

interface interface_name { 
}
1
2

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

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

接口继承：接口继承就是说接口可以通过其他接口来扩展自己。Typescript 允许接口继承多个接口。继承使用关键字 extends。
单接口继承语法格式：

Child_interface_name extends super_interface_name
1

总结

TypeScript 可以使用 JavaScript 中的所有代码和编码概念，TypeScript 是为了使 JavaScript 的开发变得更加容易而创建的。例如，TypeScript 使用类型和接口等概念来描述正在使用的数据，这使开发人员能够快速检测错误并调试应用程序。
1、TypeScript 从核心语言方面和类概念的模塑方面对 JavaScript 对象模型进行扩展。
2、JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作，同时可以使用编译器将 TypeScript 代码转换为 JavaScript。
3、TypeScript 通过类型注解提供编译时的静态类型检查。
4、TypeScript 中的数据要求带有明确的类型，JavaScript不要求。
5、TypeScript 为函数提供了缺省参数值。
6、TypeScript 引入了 JavaScript 中没有的“类”概念。
7、TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。