JavaScript & TypeScript 学习总结

大家好，本人作为一名大二的学生，在本学期选修了WEB应用基础这门课程，在系统学习web相关知识之前，我和同学曾组队使用web作为前端，完成了一个小项目，同样也是我其他课程的大作业之一（计算机人这数不完的课设呀）。在其中我们便使用了一些JavaScript语言，但当时仍旧使用不熟，以下是一些我自己对JavaScript & TypeScript 的学习总结，还请各位大佬前来指点。

目录

前言

一、JavaScript

1.基本概述

2.代码案例总结

二、TypeScript

1.基本概述

2.代码案例总结

总结

---

前言

JavaScript和TypeScript是当前Web开发中最常用的编程语言之一，以下是我对学习这两门语言的总结：

---

一、JavaScript

1.基本概述

JavaScript是一种脚本语言，常用于网页交互和浏览器端的数据处理和存储。可以嵌入在HTML中，也可以将JavaScript代码保存在外部文件中，并通过HTML标签引用，使用JavaScript代码所创建的效果和逻辑可以被Web浏览器解释执行。它的基本语言逻辑和其他语言还是大致相同，但它在前后端交互的过程时使用起来十分便利。所以大家都一起学起来吧！

2.代码案例总结

直接跟大家讲述编程语言的基础概念含义这些，大家可能提不起学习JavaScript的兴趣，以下我举了以下JavaScript的代码案例来方便大家学习并理解：

1、变量定义和赋值：

通过上网查询，JavaScript一共包含七种数据类型：

• 数字类型（number）：整数和浮点数。
• 字符串类型（string）：由一串字符组成的文本。
• 布尔类型（boolean）：true或false两种取值。
• 空（null）：表示一个空对象指针。
• 未定义（undefined）：表示一个未定义的变量或属性。
• 符号（symbol）：ES6引入的唯一和不可变类型。
• BigInt（说实话这种我也不熟悉，详情大家可以参考一下JavaScript 数据类型和数据结构 - JavaScript | MDN (mozilla.org)）

// 定义和初始化变量
var a = 1;
let b = "hello";
const c = true;

// 修改变量值
a = 2;
b = "world";
// c = false; // 报错，const类型的变量无法被修改

很多变量都可以使用var来定义和初始化哦

2、函数定义：

// 声明式函数定义
function add(x, y) {
  return x + y;
}

// 匿名函数定义（函数表达式）
const add2 = function(x, y) {
  return x + y;
}

// 箭头函数
const add3 = (x, y) => x + y;

其中第一种定义方式是大家最为常见也是最好理解的一种（x和y分别作为函数参数，返回值为x+y），函数可以封装代码块，达到多次重用相同代码的效果。

3、数组处理（较为详细）：

以下是JavaScript数组的使用代码示例：

（1）创建数组

// 使用数组字面量创建空数组
let arr1 = [];

// 使用Array构造函数创建空数组
let arr2 = new Array();

// 使用数组字面量创建含有元素的数组
let arr3 = [1, 2, 3];

// 使用Array构造函数创建含有元素的数组
let arr4 = new Array(1, 2, 3);

这些为JavaScript基本创建数据的方法（很好理解吧）

（2）访问数组元素

let arr = ['apple', 'banana', 'orange'];
// 访问数组的第一个元素
console.log(arr[0]); // "apple"

这些就跟大家学习的其他语言使用方法基本一致。（在这里我就不过于详细总结了）

（3）数组长度和添加/删除元素

let arr = [];

// 添加元素
arr.push('apple');
// 删除元素
arr.pop();

可以通过如上代码方式来添加或者删除数组元素，并且改变数组的长度（这对比其他语言的数组语法是不是轻松不少）

（4）遍历数组

let arr = ['apple', 'banana', 'orange'];

// 使用for循环遍历数组
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// 使用forEach()方法遍历数组
arr.forEach(item => console.log(item));

// 使用for..in语句遍历数组
for (let index in arr) {
  console.log(arr[index]);
}

遍历的基本思想还是使用循环的方法，基本语法如上述的总结代码。

（5）数组操作方法

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// 连接数组
let arr3 = arr1.concat(arr2);
console.log(arr3); // [1, 2, 3, 4, 5, 6]

// 复制数组
let arr4 = arr1.slice();
console.log(arr4); // [1, 2, 3]

这里的数组可以直接进行连接操作哟

（6）多维数组

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[0][1]); // 2
console.log(matrix[1][2]); // 6

多维数组也跟其他语法相差不大，这里就不做过多总结了。

4、异步操作：

// Promise
const promise = new Promise((resolve, reject) => {
  // 异步操作...
  resolve("成功");
  // reject("失败");
});

promise.then((result) => {
  console.log("成功：", result);
}).catch((err) => {
  console.error("失败：", err);
});

这个操作我是在本学期的另一门课程《数据库》中运用到了，这个操作实用于我们在连接后端数据库中的各种数据时处理数据的过程。便顺手记录在本次JavaScript总结当中了。

二、TypeScript

1.基本概述

TypeScript是一种面向对象的编程语言，是JavaScript的超集。它扩展了JavaScript，并在其基础上添加了一些新特性，可以就理解为升级的JavaScript。说实话，我也是主要使用的JavaScript语言，对于typescript我也不是特别熟悉，很多代码案例我也怕自己语法使用错误，这里就只展示几个基础的语法使用（不做过多的解释了）。

2.代码案例总结

其基本的数据定义这些与JavaScript大同小异，在这里我就介绍点别的吧（上网查的，我也不知道详细的不同之处）😜。

（1）类型注解：TypeScript在JavaScript的基础上增加了类型注解的语法特性，可以使用冒号来指定变量、函数、方法和对象的类型，如：

let num: number = 10;
function add(a: number, b: number): number {
  return a + b;
}
class Person {
  name: string;
  age: number;
}

（2）接口：TypeScript支持接口的概念，可以定义一组属性和方法，并且可以在类中实现这些接口，从而使面向对象编程更加方便和灵活。

interface Person {
  name: string;
  age: number;
  sayHello(): void;
}

class Student implements Person {
  name: string;
  age: number;
  school: string;

  sayHello() {
    console.log('Hello');
  }
}

我个人感觉这就是继承类后重写了下方法也没啥特别之处，可能只是和JavaScript不同吧🤣

（3）枚举：TypeScript支持枚举类型，可以定义一组命名的常量集合。

enum Colors {
  Red,
  Green,
  Blue,
}

let color: Colors = Colors.Red;

这其实感觉跟c语言还是大同小异哈哈。

其他关于typescript大家还是去正式网站学习吧（TypeScript 教程 | 菜鸟教程 (runoob.com)）

---

总结

总之，学习JavaScript和TypeScript是一个不断深入的过程，需要长期的学习和实践。在学习过程中，需要注意不断提高自己的编程技能，掌握最新的技术和工具。我也还处于一个小白阶段，大家一起努力吧！