JavaScript&TypeScript 学习总结

等于（=）：将一个值赋给一个变量。
加等于（+=）：将一个值加到变量上，并将结果赋给变量。
减等于（-=）：将一个值从变量上减去，并将结果赋给变量。
乘等于（*=）：将一个值乘到变量上，并将结果赋给变量。
除等于（/=）：将一个值除以变量，并将结果赋给变量。
求余等于（%=）：将一个值取余变量，并将结果赋给变量。

4.3 比较运算符

相等（==）：检查两个值是否相等。
不相等（!=）：检查两个值是否不相等。
全等（===）：检查两个值是否类型和值都相等。
不全等（!==）：检查两个值是否类型或值有一个不相等。
大于（>）：检查一个值是否大于另一个值。
小于（<）：检查一个值是否小于另一个值。
大于等于（>=）：检查一个值是否大于等于另一个值。
小于等于（<=）：检查一个值是否小于等于另一个值。

4.4 逻辑运算符

与（&&）：逻辑与，两个条件都为真时返回真。
或（||）：逻辑或，两个条件有一个为真时返回真。
非（!）：逻辑非，取反一个条件的值。

4.5 字符串运算符

连接（+）：将两个字符串连接起来。

5 遍历语句

在JavaScript中，有多种遍历语句可用于遍历数组、对象和字符串。这些遍历语句可根据不同的需求选择使用，以便在JavaScript中对数据进行遍历和处理。

5.1 for语句

用于遍历数组或字符串中的每个元素，或者执行一定次数的循环。

   for (let i = 0; i < array.length; i++) {
       // 执行循环体的代码
   }

5.2 for...in语句

用于遍历对象的可枚举属性。

   for (let key in object) {
       // 执行循环体的代码
   }

5.3 for...of语句

用于遍历可迭代对象（如数组、字符串）的每个元素。

   for (let element of iterable) {
       // 执行循环体的代码
   }

5.4 forEach语句

用于遍历数组的每个元素，并对每个元素执行回调函数。

   array.forEach(function(element) {
       // 执行回调函数的代码
   });

5.5 while语句

在指定条件为真时重复执行一段代码。

   while (condition) {
       // 执行循环体的代码
   }

5.6 do...while语句

类似于while循环，但是至少会执行一次循环体。

   do {
       // 执行循环体的代码
   } while (condition);

6 函数

在JavaScript中，函数是一种可重复使用的代码块，用于执行特定的任务或计算。函数在JavaScript中扮演着重要的角色，它们可以提高代码的可维护性和重用性，并允许我们将任务分解为更小的部分进行处理。

6.1 函数定义

使用关键字function来定义函数，后跟函数名和一对圆括号，圆括号中可以包含参数（可选）。函数体由一对花括号{}包围，用于包含函数执行的代码。

function functionName(parameter1, parameter2) {
    // 函数体代码
}

6.2 函数调用

通过函数名和一对圆括号来调用函数，圆括号中可以传递参数的值（可选）。

functionName(argument1, argument2);

6.3 返回值

函数可以通过return语句返回一个值。调用函数时，可以将返回值赋给一个变量，或者直接使用返回值。

function functionName() {
    // 函数体代码
    return value;
}
let result = functionName();

6.4 参数

函数可以接受参数，参数用于接收调用函数时传递的值。可以在函数体中使用参数进行计算或处理。

function functionName(parameter1, parameter2) {
    // 函数体代码
}

6.5 默认参数

在函数定义时，可以为参数设置默认值，如果调用函数时没有传递该参数，将使用默认值。

function functionName(parameter = defaultValue) {
    // 函数体代码
}

6.6 匿名函数

可以创建没有函数名的函数，这种函数通常作为回调函数或立即执行函数使用。

let functionName = function(parameter1, parameter2) {
    // 函数体代码
}

7 对象

JavaScript中的对象是由键值对组成的集合。每个键值对中，键是一个字符串或符号，值可以是任意的数据类型，包括数字、字符串、布尔值、数组、函数等。对象允许我们将相关的数据和功能组织在一起。

对象的定义可以使用花括号{}，并在其中指定键值对。例如：

let person = {
  name: "John",
  age: 25,
  isStudent: true,
  hobbies: ["reading", "sports"],
  greet: function() {
    console.log("Hello!");
  }
};

在上面的例子中，我们定义了一个名为person的对象，它有四个键值对。name键的值是"John"，age键的值是25，isStudent键的值是true，hobbies键的值是一个包含两个元素的数组，greet键的值是一个函数。

要访问对象的属性或调用对象的方法，可以使用点符号或方括号符号。例如：

console.log(person.name); // 输出 "John"
console.log(person.age); // 输出 25
console.log(person.hobbies[0]); // 输出 "reading"
person.greet(); // 输出 "Hello!"

还可以动态地添加、修改或删除对象的属性。例如：

person.gender = "male"; // 添加一个新属性
person.age = 26; // 修改属性的值
delete person.isStudent; // 删除属性

通过对象，我们可以很方便地组织和操作相关的数据和功能。对象是JavaScript中非常重要的概念之一，深入理解对象对于编写复杂的JavaScript程序至关重要。

8 数组

JavaScript中的数组是一种特殊的对象，用于存储一组有序的元素。数组可以包含任意类型的数据，包括数字、字符串、布尔值、对象、函数等。

要创建一个数组，可以使用方括号[]，并在其中列出数组的元素。例如：

let colors = ["red", "green", "blue"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [true, "hello", 123, {name: "John"}];

数组的元素可以使用索引访问，索引从0开始。例如：

console.log(colors[0]); // 输出 "red"
console.log(numbers[2]); // 输出 3
console.log(mixed[1]); // 输出 "hello"

可以使用数组的length属性获取数组的长度，即元素的个数。例如：

console.log(colors.length); // 输出 3
console.log(numbers.length); // 输出 5
console.log(mixed.length); // 输出 4

数组还提供了一些方法来操作和处理数组。例如，可以使用push()方法向数组末尾添加新元素，使用pop()方法删除并返回数组的最后一个元素，使用splice()方法在指定位置插入或删除元素等等。

colors.push("yellow"); // 在数组末尾添加新元素
numbers.pop(); // 删除并返回数组的最后一个元素
mixed.splice(1, 1); // 删除索引为1的元素

数组是JavaScript中非常常用的数据结构，它提供了很多方便的方法来操作和处理数据。了解和熟悉数组的使用对于编写JavaScript代码非常重要。

二、TypeScript学习总结

1 概念

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

2 变量

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

let user='Jerry'

3 函数

TypeScript中函数的书写与JavaScript基本相同，但可以使用类型注解来指定参数的类型和返回值的类型。

3.1 声明函数

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

在这个例子中，函数`add`接受两个参数`a`和`b`，它们的类型都是`number`，并且函数返回值的类型也是`number`。

3.2 可选参数

function sayHello(name: string, age?: number): void {
  console.log("Hello, " + name);
  if (age) {
    console.log("You are " + age + " years old.");
  }
}

在这个例子中，函数`sayHello`有两个参数，`name`是必需的，而`age`是可选的。如果传递了`age`参数，函数会输出年龄信息；如果没有传递`age`参数，函数只输出姓名。

3.3 默认参数

function sayHello(name: string, age: number = 18): void {
  console.log("Hello, " + name);
  console.log("You are " + age + " years old.");
}

在这个例子中，函数`sayHello`有两个参数，`name`是必需的，而`age`是默认参数，默认值为18。如果没有传递`age`参数，函数会使用默认值。

3.4 剩余参数

function greet(greeting: string, ...names: string[]): void {
  console.log(greeting);
  for (let name of names) {
    console.log("Hello, " + name);
  }
}

在这个例子中，函数`greet`有一个必需的参数`greeting`和一个剩余参数`names`，剩余参数用来接收任意数量的参数。函数会输出问候语，并逐个输出姓名。

4 类

4.1 定义

TypeScript是一种面向对象的编程语言，它支持类的概念。类是一种模板，用于创建具有相同属性和方法的对象。在TypeScript中，可以使用关键字`class`来定义一个类。下面是一个简单的示例：

class Person {
  // 属性
  name: string;
  age: number;

  // 构造函数
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // 方法
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// 创建对象
const person1 = new Person("Fengfeng", 18);
person1.sayHello(); // 输出：Hello, my name is Fengfeng and I am 18 years old.

在上面的示例中，我们定义了一个名为`Person`的类，它有两个属性`name`和`age`，以及一个构造函数`constructor`用于初始化这些属性。类还有一个方法`sayHello`，用于打印出个人信息。我们通过`new`关键字创建了一个`Person`对象，并调用了`sayHello`方法。

4.2 封装

在TypeScript中，封装是面向对象编程的一个重要概念。它允许我们将数据和方法包装在一个类中，并通过访问修饰符来控制对类的成员的访问权限。

TypeScript提供了三种访问修饰符：public、private和protected。

- public修饰符：公有修饰符，可以在类的内部和外部访问。
- private修饰符：私有修饰符，只能在类的内部访问。
- protected修饰符：受保护的修饰符，可以在类的内部和子类中访问。以下是一个简单的封装示例：

class Person {
  private name: string;
  protected age: number;
  public gender: string;

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

  public getName(): string {
    return this.name;
  }

  private getAge(): number {
    return this.age;
  }

  protected getGender(): string {
    return this.gender;
  }
}

let person = new Person("Fengfeng", 18, "male");
console.log(person.getName()); // 可以访问公有方法
console.log(person.getAge()); // 报错，私有方法不能在类的外部访问
console.log(person.getGender()); // 报错，受保护方法不能在类的外部访问
console.log(person.name); // 报错，私有属性不能在类的外部访问
console.log(person.age); // 报错，受保护属性不能在类的外部访问
console.log(person.gender); // 可以访问公有属性

在上面的示例中，name属性和getAge方法被声明为private，只能在Person类的内部访问。age属性和getGender方法被声明为protected，可以在Person类的内部和子类中访问。gender属性被声明为public，可以在任何地方访问。

通过封装，我们可以隐藏类的内部实现细节，提供对外部使用者的简化接口，同时也提高了代码的安全性。

4.3 属性存取器

通过属性存取器，我们可以对属性的访问进行更多的控制，例如在get方法中添加一些逻辑来处理属性的返回值，在set方法中添加一些校验逻辑来限制属性的赋值范围等。这样可以提高代码的可维护性和安全性。

属性存取器由get和set关键字定义，用于获取和设置属性的值。下面是一个简单的示例：

class Person {
  private _name: string;

  get name(): string {
    return this._name;
  }

  set name(value: string) {
    this._name = value;
  }
}

const person = new Person();
person.name = "Fengfeng"; // 通过setter设置属性的值
console.log(person.name); // 通过getter获取属性的值

在上面的示例中，我们定义了一个Person类，其中有一个私有属性_name。通过定义get和set方法，我们可以通过person.name来访问和修改_name属性的值。get方法用于获取属性的值，而set方法用于设置属性的值。

4.4 静态属性

静态属性可以用于存储与类相关的共享数据，它们在整个类的实例之间是共享的。可以在静态属性中存储一些常量值、全局配置等。在TypeScript中，可以使用static关键字来定义静态属性。静态属性是属于类本身而不是类的实例的属性。

下面是一个示例：

class MyClass {
  static myStaticProperty: string = "Hello, static property!";
}

console.log(MyClass.myStaticProperty); // 输出: Hello, static property!

在上面的示例中，我们定义了一个名为MyClass的类，并在类中使用static关键字定义了一个名为myStaticProperty的静态属性。我们可以直接通过类名来访问静态属性，而不需要创建类的实例。

4.5 this

在类中，使用this表示当前对象

4.6 继承

在TypeScript中，继承是通过使用关键字extends来实现的。一个类可以继承另一个类的属性和方法。被继承的类称为父类或基类，继承的类称为子类或派生类。

下面是一个简单的示例：

class Animal {
  name: string;

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

  move(distance: number = 0) {
    console.log(`${this.name} moved ${distance}m.`);
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof! Woof!");
  }
}

const dog = new Dog("Buddy");
dog.bark(); // 输出 "Woof! Woof!"
dog.move(10); // 输出 "Buddy moved 10m."

在上面的例子中，Animal类有一个属性name和一个方法move。Dog类通过extends关键字继承了Animal类，因此它可以访问和使用Animal类的属性和方法。Dog类还添加了一个额外的方法bark。通过创建Dog类的实例，我们可以调用bark方法和继承的move方法。

4.7 重写

在TypeScript中，可以通过在子类中重写父类的方法来实现方法的重写。重写方法的过程与JavaScript中的重写方法类似，只是需要使用override关键字来标记要重写的方法。

下面是一个示例，展示了如何在TypeScript中进行方法的重写：

class Animal {
  constructor(name: string) {
    this.name = name;
  }

  move(distance: number = 0) {
    console.log(`${this.name} moved ${distance} meters.`);
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  move(distance: number = 5) {
    console.log(`${this.name} moved ${distance} meters with four legs.`);
  }
}

const animal = new Animal("Animal");
const dog = new Dog("Dog");

animal.move(); // 输出: Animal moved 0 meters.
dog.move(); // 输出: Dog moved 5 meters with four legs.

在上面的例子中，Animal类有一个move方法，它会输出动物移动的距离。Dog类继承自Animal类，并重写了move方法，输出狗使用四条腿移动的距离。通过调用animal.move()和dog.move()，可以看到父类和子类的方法被正确地调用。

4.8 抽象类

TypeScript中的抽象类是一种特殊的类，它不能被实例化，只能被其他类继承。抽象类用于定义一组相关的方法和属性，这些方法和属性可以被继承类共享和重写。

要声明一个抽象类，需要在类名前面加上abstract关键字。抽象类可以包含抽象方法和非抽象方法。抽象方法只有方法的签名，没有具体的实现，而非抽象方法有具体的实现。

下面是一个使用抽象类的示例：

abstract class Animal {
  abstract makeSound(): void;

  move(): void {
    console.log("Moving...");
  }
}

class Dog extends Animal {
  makeSound(): void {
    console.log("Woof!");
  }
}

const dog = new Dog();
dog.makeSound(); // 输出 "Woof!"
dog.move(); // 输出 "Moving..."

在上面的例子中，Animal是一个抽象类，它包含一个抽象方法makeSound和一个非抽象方法move。Dog类继承自Animal类，并实现了makeSound方法。在创建Dog类的实例后，我们可以调用makeSound和move方法。

5 模块

TypeScript中的模块用于组织和管理代码，将相关的类、函数、变量等封装在一起，以便于重用和维护。模块可以被其他模块引用，从而实现代码的模块化和可复用性。

在TypeScript中，使用export关键字将模块中的类、函数或变量导出，以便其他模块可以使用。导出的元素可以是命名导出（named exports）或默认导出（default exports）。

下面是一个使用命名导出和默认导出的示例：

// 模块1
export class MyClass {
  // ...
}

export function myFunction() {
  // ...
}

export const myVariable = 42;

// 模块2
import { MyClass, myFunction, myVariable } from "./module1";

const obj = new MyClass();
myFunction();
console.log(myVariable);

在上面的例子中，我们在模块1中定义了一个MyClass类、一个myFunction函数和一个myVariable变量，并使用export关键字导出它们。在模块2中，我们使用import关键字引入模块1中导出的元素，并使用它们。

三、学习心得

学习JavaScript和TypeScript同样具有趣味性和实用性。JavaScript是一种强大的编程语言，可以为网页添加交互性和动态性。而TypeScript是JavaScript的超集，提供了静态类型检查和面向对象编程的特性，使得代码更加可维护和可扩展。

在学习JavaScript时，本人首先掌握了基本的语法和数据类型，包括变量、函数、条件语句和循环结构等。然后，本人学习了JavaScript的内置对象和API，例如字符串、数组、对象和日期等，以及它们提供的方法和属性。通过掌握这些基础知识，本人能够编写简单的JavaScript程序，并处理常见的数据操作和逻辑控制。

学习TypeScript时，本人了解了类型系统的概念和用法。通过使用类型注解和接口，本人可以在代码中明确指定变量和函数的类型，从而减少类型错误并提高代码的可读性和可维护性。此外，本人还学习了面向对象编程的概念，包括类、继承、多态和抽象类等。通过应用这些概念，可以更好地组织和管理代码，使其更具结构化和可扩展性。

在学习过程中，本人发现实践和项目经验对于掌握JavaScript和TypeScript至关重要。通过编写小型项目或参与开源项目，本人可以应用所学知识，并学习其他开发者的代码和技巧。此外，阅读相关的文档和教程，参加培训课程或在线学习平台也是很有帮助的，可以帮助本人深入了解语言的特性和最佳实践。

总的来说，学习JavaScript和TypeScript是一个不断提升的过程。掌握基础知识、实践和项目经验都是必不可少的。本人相信通过不断学习和实践后，能够成为一名优秀的JavaScript和TypeScript开发者，并能够构建出高质量和可维护的应用程序。