JS&TS

JavaScript

基本了解

JavaScript是一种脚本语言，用于在网页中添加交互性和动态性。
它可以在网页的 <script> 标签中编写（比如一些加减乘除），并直接在浏览器中运行。
JavaScript可用于处理用户输入、操作DOM元素、发送网络请求等。

基本用法

根据下面的例子来了解Js的基本用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="greet()">点击我</button>
</body>
<script>
  function greet() {
  alert("hhh")
  }
</script>
</html>

这里要注意当在 HTML 标签中使用 onclick 属性调用函数时，需要在函数名后添加 () 来表示函数的调用。
点击按钮时会调用 greet() 函数，该函数会弹出‘hhh’的框。onclick 属性的值是字符串，因此函数名需要用引号括起来。运行结果如下：

变量和数据类型

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 变量和数据类型</title>
</head>
<body>
  <h1>JavaScript 变量和数据类型</h1>

  <script>
    // 声明变量并赋值
    var num = 10;
    let message = "Hello World";
    const PI = 3.14;

    // 打印变量的值
    console.log(num); // 输出: 10
    console.log(message); // 输出: Hello World
    console.log(PI); // 输出: 3.14

    // 修改变量的值
    num = 20;
    message = "Updated Message";

    // 打印变量的新值
    console.log(num); // 输出: 20
    console.log(message); // 输出: Updated Message

    // 数组
    var fruits = ['apple', 'banana', 'orange'];
    console.log(fruits); // 输出: ["apple", "banana", "orange"]

    // 对象
    var person = {
      name: 'John',
      age: 25,
      isStudent: true
    };
    console.log(person); // 输出: {name: "John", age: 25, isStudent: true}

    // 布尔值
    var isTrue = true;
    var isFalse = false;
    console.log(isTrue); // 输出: true
    console.log(isFalse); // 输出: false
  </script>
</body>
</html>

变量和常量被声明并赋予初始值，然后使用console.log()函数将它们的值输出到控制台。包括数组和对象的使用，以及布尔类型的变量声明和输出。

运行结果如下：

条件语句和循环

<!DOCTYPE html>
<html>
<head>
    <title>条件语句和循环示例</title>
</head>
<body>
    <h1 id="message"></h1>

    <script>
        // 条件语句示例
        var hour = new Date().getHours();
        var messageElement = document.getElementById('message');

        if (hour < 12) {
            messageElement.textContent = '上午好！';
        } else if (hour < 18) {
            messageElement.textContent = '下午好！';
        } else {
            messageElement.textContent = '晚上好！';
        }

        // 循环语句示例
        var numbers = [1, 2, 3, 4, 5];
        var sum = 0;

        for (var i = 0; i < numbers.length; i++) {
            sum += numbers[i];
        }

        console.log('数组元素的和为:', sum);
    </script>
</body>
</html>

该示例实现了一个页面根据现实的时间，显示上午、下午、晚上好的功能。

在标签内使用了一个 <h1>标签，它的 id 属性被设置为 "message"，用于显示一条问候信息。
条件语句：JavaScript 代码部分首先获取当前时间的小时数var hour = new Date().getHours();，然后根据时间判断是上午、下午还是晚上，并将相应的问候信息赋值给messageElement 元素的 textContent 属性，从而改变页面上的显示内容。
循环：数组 numbers，使用 for 循环遍历数组中的每个元素，相加得到总和。最后，我们通过 console.log() 输出了数组元素的和。

运行结果：在这里插入图片描述

函数

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 函数示例</title>
</head>
<body>
    <h1 id="message"></h1>

    <script>
        // JavaScript 函数示例
        function greet(name) {
            var message = 'Hello, ' + name + '!';
            return message;
        }

        var name = 'John';
        var greeting = greet(name);

        var messageElement = document.getElementById('message');
        messageElement.textContent = greeting;
    </script>
</body>
</html>

在基本用法中就有一个函数的例子，但那个是无参的，这里举一个有参的例子

定义了一个名为 greet 的 JavaScript 函数。该函数接受一个参数 name，并在函数体内使用该参数构建一条问候消息。然后，函数通过 return 关键字返回这条消息。
声明了一个名为 name 的变量，将其赋值为 'John'。然后，我们调用 greet 函数并传递 name 变量作为参数，将返回的问候消息赋值给变量 greeting。
使用 document.getElementById() 获取 <h1> 元素，将问候消息赋值给 textContent 属性，从而在页面上显示问候信息。

事件

鼠标移入事件（onmouseover）

<!DOCTYPE html>
<html>
<head>
  <title>鼠标移入事件示例</title>
  <script>
    function showMessage() {
      alert('您将鼠标移入了按钮！');
    }
  </script>
</head>
<body>
  <button onmouseover="showMessage()">将鼠标移入我</button>
</body>
</html>

当用户将鼠标移入按钮时，会触发onmouseover事件，调用showMessage()函数来显示弹窗。运行结果如下：

输入框失去焦点事件（onblur）

<!DOCTYPE html>
<html>
<head>
  <title>失去焦点事件示例</title>
  <script>
    function validateInput() {
      var inputValue = document.getElementById('myInput').value;
      if (inputValue === '') {
        alert('输入框不能为空！');
      }
    }
  </script>
</head>
<body>
  <input type="text" id="myInput" onblur="validateInput()" placeholder="请输入内容">
</body>
</html>

在上面的示例中，当输入框失去焦点时，会触发onblur事件，调用validateInput()函数来检查输入框是否为空，并显示相应的提示。运行结果如下：

模块和模块化开发

  // module.js
        // 导出一个函数
        export function sayHello(name) {
            console.log(`Hello, ${name}!`);
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Module Example</title>
</head>
<body>
    <script type="module">
        // main.js
        // 导入模块中的函数
        import { sayHello } from './module.js';

        // 使用导入的函数
        sayHello('zga');
    </script>
</body>
</html>

在上面的示例中，创建了一个名为module.js的模块，其中导出了一个函数sayHello。然后，在main.js中，我们通过import语句导入了sayHello函数，并在控制台中调用了该函数，传递了一个参数Fengfeng。运行结果如图：

TypeScript

基本了解

TypeScript是JavaScript的超集，提供了类型系统和其他增强功能。
它通过在开发过程中捕获错误、提供更好的代码提示等方式，提高了代码的可维护性和可靠性。
TypeScript代码需要经过编译，转换为JavaScript后才能在浏览器中运行。

安装

安装TypeScript编译器

npm install -g typescript

编译TypeScript文件

tsc yourfile.ts

类

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

  greet() {
    console.log("Hello, " + this.name + "!");
  }
}
let person = new Person("John");
person.greet(); // 输出：Hello, John!

通过这个类的例子我们还可以发现，ts使用的变量名为let或const而不是var了。

ts解构

当涉及到从对象或数组中提取值并赋给变量时，TypeScript 提供了解构（Destructuring）的功能。解构可以简化代码并使代码更具可读性。以下是一个 TS解构的例子：

// 对象解构
const person = {
  name: "John",
  age: 25,
  city: "New York"
};

const { name, age } = person;

console.log(name); // 输出：John
console.log(age); // 输出：25

// 数组解构
const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;

console.log(first); // 输出：1
console.log(second); // 输出：2
console.log(rest); // 输出：[3, 4, 5]

在上面的例子中，我们首先设置了一个包含个人信息的对象 person，然后使用对象解构从中提取 name 和 age 属性，并将其赋给对应的变量。这样我们可以直接通过变量名来访问这些属性的值。

同样，我们也可以对数组进行解构。在上面的例子中，我们有一个包含一组数字的数组 numbers。使用数组解构，我们可以将数组的第一个元素赋给变量 first，第二个元素赋给变量 second，剩余的元素则以数组形式赋给变量 rest。

通过使用解构，可以更轻松地访问对象和数组中的值，并将其赋给相应的变量，从而提高代码的可读性和简洁性。

可选、默认、剩余参数

当在 TypeScript 函数中定义参数时，可以使用可选参数、默认参数和剩余参数来增加函数的灵活性。例如：

// 可选参数示例
function eatFruit(fruit: string, isRipe?: boolean) {
  if (isRipe) {
    console.log(`Eating a ripe ${fruit}. Enjoy!`);
  } else {
    console.log(`Eating an unripe ${fruit}. It needs more time to ripen.`);
  }
}

eatFruit("Apple"); // 输出：Eating an unripe Apple. It needs more time to ripen.
eatFruit("Banana", true); // 输出：Eating a ripe Banana. Enjoy!


// 默认参数示例
function sliceFruit(fruit: string, slices: number = 4) {
  console.log(`Slicing ${slices} slices of ${fruit}.`);
}

sliceFruit("Watermelon"); // 输出：Slicing 4 slices of Watermelon.
sliceFruit("Orange", 6); // 输出：Slicing 6 slices of Orange.


// 剩余参数示例
function mixFruits(...fruits: string[]) {
  console.log(`Mixing fruits: ${fruits.join(", ")}`);
}

mixFruits("Apple", "Banana"); // 输出：Mixing fruits: Apple, Banana
mixFruits("Strawberry", "Blueberry", "Raspberry"); // 输出：Mixing fruits: Strawberry, Blueberry, Raspberry

可选参数：在 eatFruit 函数中，isRipe 参数是可选的。如果提供了 isRipe 参数并且值为 true，则表示水果已经成熟。否则，水果被认为是未成熟的。
默认参数：在 sliceFruit 函数中，slices 参数有一个默认值为 4。如果调用函数时不提供 slices 参数的值，将使用默认值。函数会将水果切成指定数量的片段。
剩余参数：在 mixFruits 函数中，fruits 参数是一个剩余参数，可以接收任意数量的水果参数。函数内部使用 join 方法将所有水果连接成一个字符串，用于混合水果。

可选参数使得判断水果是否成熟变得灵活，可以根据实际情况传递参数。默认参数定义了切水果的默认切片数量，当不提供切片数量时，使用默认值。剩余参数可以接收不确定数量的水果参数，并进行相应的处理。

继承（感觉类似于Java）

// 基类 Animal
class Animal {
  name: string;

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

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

// 派生类 Dog 继承自 Animal
class Dog extends Animal {
  breed: string;

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

  bark() {
    console.log(`Woof! Woof!`);
  }
}

// 使用继承的例子
const dog = new Dog("Buddy", "Labrador");
dog.move(10); // 输出：Buddy moved 10 meters.
dog.bark(); // 输出：Woof! Woof!

在上面的例子中，有一个基类 Animal 和一个派生类 Dog。派生类 Dog 继承了基类 Animal 的属性和方法。

基类 Animal：它有一个 name 属性和一个 move 方法。构造函数 constructor 接受一个参数 name，并将其赋值给 name 属性。move 方法可以接受一个参数 distance，默认值为 0，并打印出动物移动的距离。
派生类 Dog：它继承了基类 Animal，并添加了一个额外的属性 breed。它的构造函数 constructor 接受两个参数 name 和 breed，并调用基类的构造函数 super 来初始化基类的属性。它还定义了一个新的方法 bark，用于打印狗的叫声。

在使用继承的例子中，创建了一个名为 dog 的 Dog 对象。我们可以通过 dog.move(10) 调用继承自基类的 move 方法，打印出狗移动的距离。同时，我们可以调用 dog.bark() 方法，打印出狗的叫声。

继承允许我们通过派生类扩展基类的功能，并在派生类中添加新的属性和方法。这样可以实现代码的重用和组织，使代码更加可维护和扩展。

静态类型检查

let message: string = 'Hello TypeScript';
// 尝试给一个字符串类型的变量赋值一个数字
message = 10; // 编译时会报错

TypeScript是JavaScript的超集，它引入了静态类型检查。在编译时，TypeScript会检查变量的类型，并在代码中发现类型错误时发出警告。这有助于减少在运行时出现类型相关的错误。

JavaScript & TypeScript 学习总结

JS&TS

JavaScript

基本了解

基本用法

变量和数据类型

条件语句和循环

函数

事件

鼠标移入事件（onmouseover）

输入框失去焦点事件（onblur）

模块和模块化开发

TypeScript

基本了解

安装

安装TypeScript编译器

编译TypeScript文件

类

ts解构

可选、默认、剩余参数

继承（感觉类似于Java）

静态类型检查