JavaScript&TypeScript学习总结

---

目录

• 一、JavaScript学习总结
  • 1.什么是JavaScript
  • 2.变量
  • 3.变量命名
  • 4.操作符
  • 5.遍历语句
  • 6.函数
  • 7.对象
  • 8.数组
• 二、TypeScript学习总结
  • 1.什么是TypeScript
  • 2.变量命名
  • 3.函数
  • 4.类
  • 5.模块

---

一、JavaScript学习总结

1.什么是JavaScript

JavaScript是一种用来编写脚本的编程语言，它们可以被直接写在网页的 HTML中，在页面加载的时候自动执行，通常我们在html文件底部的<script>进行代码的编写

2.变量

变量本质上是存储值的容器，我们通常使用关键词var或者let来创建变量

let a = 'Hello!'; // 定义变量，并且赋值

alert(a); // 显示变量a的内容Hello!

3.变量命名

JavaScript 的变量命名有两个限制：

1.变量名称必须仅包含字母、数字、符号$和_。如果命名包括多个单词，通常采用驼峰式命名法（camelCase），即除了第一个单词，其他的每个单词都以大写字母开头： myFirstName。

2.首字符必须非数字。

4.操作符

操作符一般可分为三类，如下所示：

1.一元操作符：++ 、 --

2.布尔操作符（比较结果为 Boolean 类型 ）：&& 、||、 ！

3.算术操作符：

• 加法 +,
• 减法 -,
• 乘法 *,
• 除法 /,
• 取余 %,
• 求幂 **.

这里我们简单的举一个取余的例子，如下：

alert( 5 % 2 ); // 显示5除以2的余数，很显然答案为1

5.遍历语句

首先我们先定义一个数组，如下：
var num = ['1', '2', '3', '4'];
1.for in语句（着重下标）

for(var n in num){
  console.log(colors[n]);
}

2.for of语句（着重元素）

for(var n of num){
  console.log(n);
}

3.forEach语句

colors.forEach(n => console.log(n));
var other = colors.map(n=>n+'X');//map在遍历的同时还返回另一个数组
console.log(other)

6.函数

函数是程序的主要“构建模块”。函数使该段代码可以被调用很多次，而不需要写重复的代码，我们可以通过下面的函数示例来了解一下：

function sum(n1, n2) {  //该函数的功能为返回输入两个数的和
    return n1 + n2;
}
var result = sum(3, 2);
alert(result);

7.对象

JavaScript 中对象则用来存储键值对和更复杂的实体，我们常将数据和方法封装在对象中，创建对象的方法有两种，如下所示：

let user = new Object(); // 第一种方法
let user = {  //第二种方法
};  

但是，当我们需要创建很多的对象时，会产生很多重复代码，此时，我们可以使用工厂模式的一种变体，示例如下:

function createObject(){
 
};

var object1 = createObject();
var object12 = createObject();
var object12 = createObject();

8.数组

1.数组的创建

数组的创建一般用如下两种方法：

car a = [1,2,3];//方法一
const a = new Array(1,2,3);//方法二

2.数组的方法
（1）队列方法

方法	作用位置	作用
push	数组末	压入
pop	数组末	弹出
shift	数组头	弹出
unshift	数组头	压入

（2）slice()方法
它可以截取数组的部分元素，然后返回一个新的数组

var arr = [1,2,3,4,5];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3即 [1,2,3]
arr.slice(3); // 从索引3开始到结束即[4,5]

（2）splice()方法
它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素

var arr = [1，2，3，4，5];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'a', 'b'); 

---

二、TypeScript学习总结

1.什么是TypeScript

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

2.变量命名

在TypeScript里，我们通常使用let，const来定义变量，而不用var
例如

let user = 'Tom';

3.函数

1.定义函数
使用完整函数定义通常有两种方法，一种是命名函数，一种是匿名函数：

//命名函数
function add(x: number, y: number): number {
  return x + y;
}
//匿名函数
let myAdd = function(x: number, y: number): number { return x + y; };

2.可选参数
输入多余的（或者少于要求的）参数是不允许的此时我们用?表示可选的参数,而可选参数，必须放在必要参数后

function x(a: string, b?: string) {
    if (b) {
        return a + ' ' + b;
    } else {
        return a;
    }
}
let x1 = x('a', 'cat');
let x2 = x('cat');

3.默认参数
我们可以给函数的参数添加默认值，TypeScript会将添加了默认值的参数识别为可选参数，而默认参数，不必在必要参数后

function x(a: string, b: string = 'cat') {
    return a + ' ' + b;
}
let x1 = x('a', 'b');
let x2 = x('a');

4.剩余参数
当涉及到多个参数时，我们可以使用...rest的方式获取函数中的剩余参数,剩余参数可以一个都没有，也可以有任意个

function x(a: string, ...restOfB: string[]) {
    return a + " " + restOfB.join(" ");
}
  
let x1 = x("a", "b", "c", "d");

5.箭头函数
我们可以使用“箭头”（ =>）定义函数,示例如下：

let x = () => 'Hello';
console.log(x());

4.类

1.类的定义

在面向对象语言中，类是一种面向对象计算机编程语言的构造，是创建对象的蓝图，描述了所创建的对象共同的属性和方法

class Hello 
{
  // 静态属性
  static cname: string = "Hello";
  // 成员属性
  greeting: string;
  // 构造函数 
  constructor(message: string) {
    this.greeting = message;
  }
  // 成员方法
  greet() {
    return "Hello, " + this.greeting;
  }
}

let greeter = new Greeter("world");

2.类的属性

类中的属性和函数都有访问权限

• public修饰的属性或方法是共有的 在 任何地方 都能访问
• protected修饰的属性或方法是私有的 只有 本类中访问
• private修饰的属性或方法是受保护的 在 本类 和 子类 中 能够访问

3.存取器
在 TypeScript 中，我们可以通过getter和setter方法来实现数据的封装和有效性校验，防止出现异常数据

4.类的继承
继承是一种联结类与类的层次模型。指的是一个类（称为子类、子接口）继承另外的一个类（称为父类、父接口）的功能，并可以增加它自己的新功能的能力，继承是类与类或者接口与接口之间最常见的关系。在 TypeScript 中，我们可以通过 extends 关键字来实现继承

5.模块

• 对于一些比较大型的项目，我们需要使用模块进行管理。
• 模块可分为全局模块和文件模块。
• 每个 .ts 文件就是一个模块，我们通常使用关键词export，import 来对模块进行操作