JavaScript & TypeScript 学习总结

北辰eternal

已于 2023-06-27 13:21:46 修改

阅读量40

点赞数

文章标签： javascript typescript 学习

于 2023-06-27 13:14:10 首次发布

本文链接：https://blog.csdn.net/m0_64638598/article/details/131408350

版权

JavaScript

JS简介

JavaScript是一种脚本语言，主要在网页中用于增强用户体验，实现动态效果及页面交互。通过JavaScript，网页可以对用户的操作做出快速有效的响应，例如改变页面内容、显示隐藏元素、提交表单等。

JavaScript主要特点是：

1. 可以在浏览器中直接运行，不需要编译。

2. 语法简单，易学易用。

3. 支持动态创建、修改网页内容。

4. 支持事件编程，能够响应用户交互。

5. 能够实现与服务器的交互，动态获取和传递数据。

6. 可以与HTML、CSS等前端技术无缝集成。

除了作为网页编程语言外，JavaScript也在各种不同领域得到广泛应用，例如Node.js等后端开发框架、Electron等桌面应用程序开发框架，以及移动端开发等领域。

JS使用

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。并且，可以在HTML文档中放置任意数量的脚本。脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。当然，也可以将脚本放置在外部文件中。放在外部文件中的JS的代码，可以用于多个页面，更为实用。如需使用外部脚本，应该在<script>标签的src(source)属性中设置脚本的名称：

如：

JS基本语法

变量和常量：JavaScript中使用var或let关键字定义变量，使用const关键字定义常量。例如：var a = 10; 或者 const b = "hello";

数据类型：JavaScript中的常见数据类型包括数字、字符串、布尔值、对象、数组、Undefined和Null。可以使用typeof关键字来确定变量的数据类型。

运算符：JavaScript支持常见的算术、关系和逻辑运算符，例如“+”、“-”、“*”、“/”、“<”、“>”、“<=”、“>=”、“==”和“&&”等。

条件语句：JavaScript中使用if、else if和else关键字对条件进行判断，例如：if(a > 10){ ... } else if(a < 0){ ... } else { ... }

循环语句：JavaScript中的循环语句包括for、while和do-while语句，例如：for(let i = 0; i < 10; i++){ ... }

总的来说，JS基本语法与JAVA语法类似，只不过JS属于弱语言

JS数组

在JavaScript中，数组表示一个由若干个元素组成的有序集合，每一个元素可以是任意的JavaScript数据类型。数组中的元素可以用数字下标来访问，其中第一个元素从0开始索引。定义一个数组可以使用方括号[]语法或者Array()构造函数从而来创建一个数组。

例如，下面的代码创建了一个数组arr：

let arr = [3, 2, 1]; // 使用 [] 语法创建
// 或
let arr = new Array(3, 2, 1); // 使用构造函数创建

要访问数组中的元素，可以通过数组下标的方式或者遍历整个数组来获取。例如：

console.log(arr[0]); // 输出第一个元素 3

同样，我们也可以遍历整个数组，并对其中的每个元素进行处理：

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

JavaScript数组提供了许多操作数组的方法，比如排序、添加、删除元素等操作。例如：

arr.sort(); // 将数组中的元素按升序排序
arr.push(); // 在数组的末尾添加元素
arr.pop(); // 删除数组末尾的元素
arr.splice(x, 1, a, b); // 从索引为x的位置开始，删除一个元素，并在该位置插入两个元素a和b

JS函数

在JavaScript中，函数是一种可重用的代码块，它可以通过指定一组参数进行调用，执行一些特定的操作，并返回结果。以下是JavaScript函数的一些特点：

1、函数定义：JavaScript中可以使用function关键字来定义一个函数。例如，下面的代码定义了一个名为add的函数，它接收两个参数a和b，计算它们的和，然后返回结果：

function add(a, b) {
  return a + b;
}

2、函数调用：定义了函数之后，可以使用函数名和一组参数来调用该函数。同样以add函数为例，可以在其他代码中通过传递不同的参数值来重复使用该函数：

let sum = add(2, 3); // 调用函数，传入参数 2和 3
console.log(sum); // 输出结果 5

3、匿名函数：除了使用function关键字定义函数之外，还可以使用匿名函数定义一个没有名称的函数，例如：

let foo = function() {
  alert('hello');
};

4、函数作为变量：在JavaScript中，函数也可以被视为一种特殊类型的值，可以将一个函数赋值给变量，或将函数作为参数传递给其他函数。例如：

let add = function(a, b) {
  return a + b;
};
let result = add(2, 3); // 将匿名函数赋值给 add 变量
console.log(result); // 输出结果 5

5、函数的返回值：函数可以返回一个值，以便在函数外部使用。如果函数没有指定返回值，则默认返回undefined。例如：

function mul(a, b) {
  return a * b;
}
let c = mul(2, 3); 
console.log(c);

JS对象

在 JavaScript 中，对象是王。

在 JavaScript 中，几乎“所有事物”都是对象。

布尔是对象（如果用 new 关键词定义）
数字是对象（如果用 new 关键词定义）
字符串是对象（如果用 new 关键词定义）
日期永远都是对象
算术永远都是对象
正则表达式永远都是对象
数组永远都是对象
函数永远都是对象
对象永远都是对象

所有 JavaScript 值，除了原始值，都是对象。

JS原始值

原始值指的是没有属性或方法的值。

原始数据类型指的是拥有原始值的数据。

JavaScript 定义了 5 种原始数据类型：

string
number
boolean
null
undefined

原始值是一成不变的。

对象是包含变量的变量

JavaScript 变量能够包含单个的值：对象也是变量。但是对象能够包含很多值。

可以通过键值对的形式来表示一个实体。

在JavaScript中，可以使用{}或new Object()来创建一个对象。例如：

let student = { 
  name: '张三', 
  age: 19, 
  sex: '男' 
};

// 或
let student = new Object();
student.name = '张三';
student.age = 19;
student.sex = '男';

对象中的属性可以通过".“运算符或”[]"运算符来访问。例如：

console.log(student.name); // 输出学生姓名 '张三'

console.log(student['age']); // 输出学生年龄19

除了访问对象属性之外，还可以动态地添加、修改或删除对象属性。例如：

student.school = 'cqjtu'; // 添加属性 school，并赋值 'cqjtu'
student.age = 20; // 修改属性值 age，改为 20
delete student.sex; // 删除属性 sex

除了使用字面量创建对象之外，还可以使用构造函数来创建对象。例如：

function Student(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}

let student = new Student('张三', 19, '男');
console.log(student.name); // 输出 '张三'

这样的话我们在创建对象时就可以直接通过构造函数来完成对象的初始化，而不需要再一个个地手动添加属性。

当然，也可以在对象中添加方法，调用方式与调用属性方式一样

var student = {
  name: "张三",
  age: 20,
  sex: "男",
  getInfo: function() {
    console.log("name:" + this.name + "，age:" + this.age + ",sex:" + this.sex);
  }
};

student.getInfo();

JS DOM

JavaScript DOM将HTML文档转化为浏览器能够识别的Document对象树，使JavaScript可以通过这个对象树来访问和操作网页中的HTML元素，从而实现与网页交互的效果。

DOM把整个页面抽象成了一个由节点组成的树形节点集合，每一个HTML标签都是一个节点，每个节点都有自己的属性和方法。我们可以使用JavaScript来获取这些HTML节点，更改它们的属性和内容，从而实现对网页样式、内容和行为的控制。

DOM的节点类型包括元素节点（HTML标签节点）、文本节点（标签内的文本内容节点）、属性节点（HTML标签属性节点）等等。我们可以通过JavaScript来查找这些节点，修改它们的内容或样式，或者添加、删除节点来动态改变页面的内容和结构。

利用DOM获取元素方法：

document.querySelector('xxx') //括号中内容为选择的元素 css选择器怎么写，这里就怎么写
document.querySelectorAll('xxx') //该函数可以选择多个元素，放在数组里

JS 事件

JavaScript事件是浏览器与用户交互以及用户操作其它动作引起的响应，比如鼠标点击、按键、页面滚动、窗口大小调整等等。当这些事件发生时，浏览器会自动调用注册在这些事件上的处理函数，从而触发一系列的响应。

在JavaScript中，可以使用事件监听器来处理事件。通过添加事件监听器，我们可以为元素绑定一个或多个事件，同时指定当事件被触发时要执行的代码。事件监听器可以通过以下方法来添加：

使用HTML标签属性 on-*

例如，在一个<button>标签上添加点击事件的监听器，可以这样写：

<button onclick="alert('111');">按钮</button>

使用DOM元素的EventTarget.addEventListener()方法来添加

例如，在JavaScript中为一个按钮添加点击事件的监听器可以如下方式实现：

let button = document.querySelector('button');
button.addEventListener('click', function(event) {
    alert('111');
});

在上面代码中，我们使用addEventListener()方法给一个按钮添加一个点击事件监听器。当用户点击此按钮时会触发回调函数中的代码。

JavaScript中常见的事件类型有很多，如Mouse事件（包括click、mousedown、mouseup、mousemove事件等）、Keyboard事件（包括keydown、keyup事件等）、Window事件（包括load、resize、scroll事件等）等等，常用的事件监听器有EventTarget.addEventListener()等。

TypeScript

什么是TS

TypeScript是一种由微软开发的开源编程语言，它是JavaScript的超集。它主要提供了静态类型检查、类与接口、命名空间、模块化等功能，并且编写好的TypeScript代码可以通过编译器将其转换成JavaScript代码。这使得开发者可以在编写代码的时候发现潜在的错误，并且在代码复杂度较高的情况下提高代码的可读性和可维护性。

TS的使用

有两种主要的方式来获取TypeScript工具：

通过npm（Node.js包管理器）
安装Visual Studio的TypeScript插件

TS类型注解

TypeScript中的类型注解允许开发者在变量声明、函数参数和返回值等场景中显式地指定数据类型。如：

let count: number = 10; //变量类型注解

function printf(info: string) {           //参数类型注解
  console.log( info.toUpperCase() );
}

function add(a: number, b: number): number {        //返回值类型注解
  return a + b;
}

TS基本类型

TypeScript中的基本类型包括以下几种：

Boolean类型：表示布尔类型。它可以有两个值，true和false。
Number类型：表示数值类型。它可以是整数或浮点数。
String类型：表示字符串类型。它是一组字符的序列，可以用单引号或双引号包裹。
Null和Undefined类型：表示空值类型。它们都只有一个值，分别是null和undefined。
Any类型：表示任意类型。它可以包含任何类型的值。
Void类型：表示没有返回值的类型。可以用来定义函数返回类型。
Never类型：表示那些永远不会发生的类型，例如抛出异常的函数或无限循环的函数。

TS变量声明和函数

TS的变量声明和函数与JS中方法一致。可以使用let、const和var关键字来声明变量。函数可以使用function关键字来定义，也可以使用箭头函数语法来定义函数。不过在TS中函数和变量声明支持类型注解。

TS泛型

在TypeScript中，泛型允许开发者在定义接口、类和函数时使用参数化类型，从而可重用代码并增强其灵活性。使用泛型能够提高代码的可读性和可维护性，使代码更加健壮。

如：

function test<T>(a: T[]): T[] {
  return a.reverse();
}

console.log(test<number>([1, 2, 3])); // 输出：[3, 2, 1]
console.log(test<string>(['a', 'b', 'c'])); // 输出：['c', 'b', 'a']

上面的代码中，定义了一个泛型函数test，并使用类型参数T来定义数组的元素类型。然后调用这个函数两次，分别传入了一个数字数组和一个字符串数组。

TS枚举

TypeScript 中的枚举（enum）是一种用于定义命名常数的数据类型。枚举类型有助于提高代码的可读性和可维护性，减少了在代码中使用字符串和数字常量所带来的问题。

在 TypeScript 中，枚举通过 enum 关键字来定义，其基本语法如下：

enum Color {
    Red,  //0
    Green, //1
    Blue   //2
}

在上面的例子中，定义了一个名为 Color 的枚举类型，并将其值定义为三种颜色。默认情况下，如果不给成员赋值，枚举成员本身就是数字常量，从 0 开始自动递增。

可以通过成员名称或者成员编号来访问枚举成员，例如：

let c: Color = Color.Green; //  1
let colorName: string = Color[2]; //  "Blue"

枚举还支持字符串枚举（标识符为字符串）和明确赋值的枚举成员

enum Direction {
  a = "a",
  b = "b",
  c = "c",
}

TS类型推论

在TypeScript中，类型推论是编译器自动推断变量的类型，而不需要显式地指定类型注解。当我们定义一个变量但没有使用类型注解时，编译器会尝试自动推断变量的类型。

下面是一个例子：

let a = '111';
console.log(typeof a); // 输出结果为string

在上面的代码中，定义了一个变量a，并将字符串’111’赋值给它。因为没有使用类型注解，编译器根据初始化的值，推断出a的类型是字符串类型。在输出a的类型时，可以使用typeof关键字检查变量的类型。

有一点要注意的是，在一些情况下，类型推论可能会带来一些潜在的问题。例如，当一个变量有多种可能的类型时，类型推论会选择一个兼容所有可能类型的最佳类型。

TS高级类型

在TypeScript中，有许多高级类型可以提供强大的类型表达和处理能力。下面列举一些常用的类型：

Union Types：表示多种类型中的一种，使用 | 分隔，例如 string | number | boolean。
Intersection Types：表示同时满足多个类型，使用 & 分隔，例如 { color: string } & { width: number }。
Type Guards：可以用来判断一个变量是否具有某种类型，例如 typeof 类型保护，instanceof 类型保护等。
Generics：通用模板，能够让我们写出可复用的代码。
Conditional Types：表示在一个类型别名里根据条件选择其中一个类型，例如 type Foo = T extends string ? A : B。
Mapped Types：可以从旧类型中创建新类型，例如 type MyUtil<T> = { [K in keyof T]: string }。
Type Aliases：可以使用 type 关键字定义类型别名，让代码更简洁易懂。
String Literal Types：表示一个字符串字面量的类型，例如 'hello'、'world'。
Numeric Literal Types：表示一个数字字面量的类型，例如 2、3.14。

TS Symbols

在 TypeScript 中，Symbol 是一种基本数据类型，它是一个唯一且不可变的数据类型，用于表示对象的属性名，可以有效地防止属性名冲突。

通过 Symbol() 函数可以创建一个新的 Symbol 值，如下所示：

const sym1 = Symbol();
const sym2 = Symbol('key');

sym1 和 sym2 是两个不同的 Symbol 值，它们都是唯一的且不可变的。

Symbol 值可以被用做对象的属性名，使用 [] 访问符来访问对象的 Symbol 属性，例如：

const sym = Symbol('key');
let obj = {
  [sym]: 'value'
};
console.log(obj[sym]);

由于 Symbol 值是独一无二的，因此使用 Symbol 作为对象属性名可以有效地防止属性名冲突。

通过 Object.getOwnPropertySymbols(obj) 函数可以获取对象的所有 Symbol 属性名，例如：

const sym1 = Symbol('key1');
const sym2 = Symbol('key2');
let obj = {
  [sym1]: 'value1',
  [sym2]: 'value2'
};

const symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols);

TS 迭代器和生成器

在TypeScript中，迭代器（Iterator）和生成器（Generator）是两个非常有用的工具，它们可以帮助我们更容易地遍历和处理数据集合。

迭代器：迭代器是一个对象，它定义了一个标准的方式来遍历一个集合中的所有元素。一个迭代器对象必须实现next()方法，该方法返回一个包含当前元素信息的对象，包括value和done属性。其中，value属性表示当前元素的值，done属性表示迭代是否结束（如果结束返回true，否则返回false）。
生成器：生成器是一种特殊的函数，它可以自动重复执行，并返回一个值。同时，生成器函数内部可以使用 yield 表达式来挂起函数的执行，并返回一个值。当我们调用一个生成器函数时，它会返回一个迭代器对象，我们可以通过调用该对象的next()方法来一步步执行生成器函数并获取其返回的值。

TS模块

在TypeScript中，模块（Module）是一种组织代码结构的方式，它将代码分割成一些独立的、可复用的结构体，每个模块拥有自己的作用域和命名空间，可以使用导入和导出关键字来控制代码的可见性和可访问性。

1.导出：可以使用export关键字将变量、函数、类或接口导出到其他模块，使其在其他模块中可以被使用。

2.导入：可以使用import关键字将其他模块中的变量、函数、类或接口导入到当前模块中，使其可以在当前模块中被使用。

如：

// file1.ts
export const name = '张三';
export function test() {
  console.log('111');
}

// file2.ts
import { name, test } from './file1';
console.log(name); 
test();

在上面的代码中，在file1.ts模块中分别导出了一个常量name和一个函数test。在file2.ts模块中通过import关键字导入了这两个变量，并可以在当前模块中进行使用。

TS命名空间

在TypeScript中，命名空间（Namespace）是一个用于组织代码和避免命名冲突的机制。命名空间类似于全局变量的容器，可以将不同的功能模块封装在不同的命名空间中，使得应用程序结构更加清晰、明确。TypeScript命名空间与C++中命名空间类似。

声明命名空间：可以使用Namespace关键字来声明一个命名空间。在命名空间内部定义的变量、函数或类都可以通过命名空间名进行访问。

如：

namespace MyNamespace {
  export const name = '张三';
  export function test() {
    console.log('111');
  }
}

console.log(MyNamespace.name); 
MyNamespace.test();

上述代码中，使用Namespace关键字声明了一个MyNamespace命名空间，并在命名空间内部定义了一个常量name和一个函数test，同时使用export关键字将它们导出。在其他代码中，可以通过MyNamespace来访问这个命名空间中的变量和函数。

最后，也可以在命名空间中还可以嵌套其他的命名空间，从而可以更好地组织代码结构。

JS与TS对比

（信息来源：TypeScript文档）

类型：JavaScript是一门弱类型的语言，变量可以指定不同的类型，可以在运行时动态更改类型。TypeScript是一门静态类型的语言，变量必须指定类型，并且类型不能修改，一旦类型不匹配会在编译时就报错。
开发效率：由于JavaScript是一门弱类型动态语言，所以开发速度很快。但是由于没有强制类型检查，代码容易出错，Debug较为困难。TypeScript的静态类型检查可以提升代码的可维护性和可读性，并且代码智能提示帮助开发者更加高效地编写代码。
生态圈：JavaScript拥有活跃的生态圈，拥有大量的第三方库和框架，如React、Vue、Angular等。而TypeScript逐渐成为越来越多前端开发者的首选语言，也得到了越来越多的支持和发展，如项目的创建和维护。
性能与安全性：JavaScript的性能高，但也因此存在一些安全性问题，比如跨站脚本攻击、代码注入等。而TypeScript可以通过静态类型检查、模块化等特性，提供更高的安全性和可靠性，并提升代码的性能。

北辰eternal

关注

0
点赞
踩
0

收藏

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

JavaScript是一种脚本语言，主要在网页中用于增强用户体验，实现动态效果及页面交互。通过JavaScript，网页可以对用户的操作做出快速有效的响应，例如改变页面内容、显示隐藏元素、提交表单等。JavaScript主要特点是：1. 可以在浏览器中直接运行，不需要编译。2. 语法简单，易学易用。3. 支持动态创建、修改网页内容。4. 支持事件编程，能够响应用户交互。5. 能够实现与服务器的交互，动态获取和传递数据。6. 可以与HTML、CSS等前端技术无缝集成。
复制链接

扫一扫