JavaScript & TypeScript 学习总结

Blessings702

已于 2023-07-04 20:35:14 修改

阅读量64

点赞数

文章标签： javascript typescript 学习

于 2023-07-04 20:33:10 首次发布

本文链接：https://blog.csdn.net/qq_63208697/article/details/131542521

版权

一、JavaScript总结

1.JavaScript概述

JavaScript是一种高级的、解释型的、基于对象和事件驱动的脚本语言。它通常用于Web开发，可以在网页中添加交互性和动态性。
JavaScript具有以下特点：
- 脚本语言：JavaScript是一种脚本语言，不需要编译，可以直接在浏览器中执行。
- 弱类型：JavaScript是一种弱类型语言，变量在使用时不需要事先声明类型，它的类型可以根据赋值来推断。
- 对象导向：JavaScript是基于对象的语言，所有的数据都可以被看作是对象，可以使用面向对象的编程模式。
- 事件驱动：JavaScript可以通过事件处理器来响应用户的交互，例如点击事件、鼠标移动事件等。
- 跨平台：JavaScript几乎可以在任何现代的Web浏览器中运行，不受特定操作系统的限制。
- 支持库和框架丰富：JavaScript拥有庞大的生态系统，有丰富的第三方库和框架，如React、Angular和Vue等，简化了开发过程。
JavaScript广泛用于Web开发，在网页中可以通过嵌入<script>标签或外部文件的方式引入并执行JavaScript代码。它可以操作DOM（文档对象模型）来实现对网页结构、样式和内容的动态修改，还可以通过AJAX技术实现与服务器的数据交互。其为开发人员提供了强大的工具来增加网页的交互性和动态性，使得网页开发更加丰富和有趣。

2.JavaScript基础语法

变量声明和赋值

// 使用关键字var、let或const声明变量
var age; // var关键字声明变量，可改变
let name; // let关键字声明块级作用域变量，可改变
const PI = 3.14; // const关键字声明常量，不可改变

// 赋值
age = 30;
name = "John";

数据类型

let age = 30; // 数字类型
let name = "John"; // 字符串类型
let isMale = true; // 布尔类型

// 数组
let numbers = [1, 2, 3, 4, 5];

// 对象
let person = {
  name: "John",
  age: 30,
  isMale: true
};

操作符

let x = 10;
let y = 5;
let sum = x + y; // 加法
let difference = x - y; // 减法
let product = x * y; // 乘法
let quotient = x / y; // 除法
let remainder = x % y; // 取余

let isGreater = x > y; // 大于
let isEqual = x === y; // 相等
let logicalAnd = x > 0 && y < 10; // 逻辑与
let logicalOr = x > 0 || y < 10; // 逻辑或
let logicalNot = !isGreater; // 逻辑非

算术运算符： 加法：+、减法：-、乘法：*、除法：/、取余：%、递增：++、递减：--。

比较运算符： 相等：==、不相等：!=、全等：===、不全等：!==、大于：>、小于：<、大于等于：>=、小于等于：<=。

逻辑运算符： 逻辑与：&&、逻辑或：||、逻辑非：!。

赋值运算符： 简单赋值：=、加法赋值：+=、减法赋值：-=、乘法赋值：*=、除法赋值：/=、取余赋值：%=。

其他常见运算符： 字符串拼接：+。

条件三目运算符： 条件 ? 表达式1 : 表达式2。

typeof运算符： 检查变量的类型。

instanceof运算符： 检查对象是否属于特定类别。

基础语句

条件语句： if···else···

let age = 18;

if (age >= 18) {
  console.log("成年人");
} else {
  console.log("未成年人");
}

循环语句： for、while、do-while

// for循环
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// while循环
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

// do-while循环
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

函数

// 声明函数
function greet(name) {
  console.log("Hello, " + name + "!");
}

// 调用函数
greet("John");

字符串函数——concat()：拼接字符串；length：获取字符串长度;toUpperCase()：将字符串转为大写；toLowerCase()：将字符串转为小写；indexOf()：查找指定字符串在目标字符串中的位置；slice()：提取字符串的一部分；replace()：替换字符串中的指定内容；split()：将字符串拆分为数组。

数组函数——length：获取数组长度；push()：向数组末尾添加新元素；pop()：删除并返回数组末尾的元素；shift()：删除并返回数组的第一个元素；unshift()：在数组的开头添加新元素；concat()：连接两个或多个数组；join()：将数组的所有元素转化为字符串，并使用指定的分隔符连接它们；slice()：提取数组的一部分；forEach()：遍历数组，并对每个元素执行指定的函数。

数学函数——Math.random()：生成一个0到1之间的随机数；Math.floor()：向下取整；Math.ceil()：向上取整；Math.round()：四舍五入取整；Math.max()：返回一组数中的最大值；Math.min()：返回一组数中的最小值；Math.abs()：返回数的绝对值。

日期函数——new Date()：创建一个表示当前时间的日期对象；getFullYear()：获取年份；getMonth()：获取月份（注意，月份从0开始，0表示一月）；getDate()：获取日期；getDay()：获取星期几（0表示星期日，1表示星期一，以此类推）；getHours()：获取小时；getMinutes()：获取分钟；getSeconds()：获取秒数。

DOM操作函数——getElementById()：根据元素的id获取DOM元素；querySelector()：根据选择器获取第一个匹配的DOM元素；querySelectorAll()：根据选择器获取所有匹配的DOM元素；appendChild()：将一个元素添加到另一个元素的末尾；removeChild()：从父元素中移除一个子元素。

二、TypeScript总结

1.TypeScript概述

TypeScript（TS）是由微软开发的一种开源编程语言，它是 JavaScript 的超集，意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码。TypeScript 提供了额外的语言特性和工具，主要目的是增强 JavaScript 的开发体验。
TS最显著的特点就是静态类型检查。TypeScript 允许开发者为变量、函数参数、函数返回值等添加静态类型注解，编译器会在编译时进行类型检查，从而能够在开发阶段就发现可能的类型错误。这种类型安全性可以帮助开发者减少潜在的 bug 和运行时错误，提高代码的可靠性。
此外，TypeScript 还提供了更强大的开发工具支持。常见的 IDE（如 Visual Studio Code）可以根据类型信息提供智能提示、代码补全和错误检测等功能，使得编码过程更加高效和可靠。TypeScript 还支持代码重构、代码导航和代码分析等功能，有助于开发者理解和维护代码。

TypeScript 也提供了诸多其他语言特性，如静态类、接口、继承、泛型和模块化系统等，这些特性有助于开发者编写结构更清晰、可重用的代码，并提高代码的可读性和可维护性。通过使用类型注解，TypeScript 还能为其他 JavaScript 库和框架提供类型定义，使得使用这些库时能够得到更好的编码体验。

2.TypeScript学习收获

现通过以下代码对TS 的主要特点和用法进行总结：

// 静态类型注解和类型推导
let message: string = "Hello, TypeScript!"; // 使用类型注解指定 message 的类型为字符串
let sum = (a: number, b: number): number => a + b; // 使用类型注解指定参数和返回值类型

// 类、接口和继承
interface Person {
  name: string;
  age: number;
  greet: () => void;
}

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

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const student = new Student("Alice", 20);
student.greet();

// 模块化
import { sayHello } from "./hello"; // 导入外部模块

sayHello(); // 调用外部模块中的函数

// 泛型
function reverse<T>(array: T[]): T[] {
  return array.reverse();
}

const numbers = [1, 2, 3, 4, 5];
const reversedNumbers = reverse(numbers); // 泛型函数可以推导出返回值的类型

// 类型声明文件
import { EventEmitter } from "events"; // 导入第三方库

const eventEmitter = new EventEmitter();
eventEmitter.on("event", () => {
  console.log("Event emitted");
});

// 编译为 JavaScript
// tsc script.ts

// 类型检查和编译报错
// tsc script.ts --noEmit