Javscript & TypeScript学习总结

一、前言

  大家好，我是唐同学，本人作为一名大二学生，今年选修了web应用基础开发这门选修课（期末计算机人真的事情多啊哭😭😭😭），对于有一定web开发基础和编程基础的我来说并不是太难，很好理解，但很多基础的东西还是需要补充并熟悉，因此就浅浅写了一下学习总结报告，供大家参考🧐；相信很多人都和我一样，在实际开发项目时，都是需要什么才去网上查，平时对于部分不常用知识的一问三不知，下面我就整理了一些本人本学期所学习的Javascript&TypeScript的基础知识点，以及自身的总结,欢迎各位大佬指教。让我们依然以hello world！开始吧!

 

二、Javascript

1.Javascript概述

  Javascript是一种动态脚本语言，常用于网页前端开发。它被设计用来与HTML和CSS协同工作，可以通过脚本来改变HTML文本的内容、属性和样式，也可以对用户的操作进行响应和交互。它可以在客户端和服务端执行，在前端开发和后端开发都有重要的应用。Javascript的基本语法和逻辑类似于其他编程语言，但它具有独特的特性，如事件驱动、异步编程和函数式编程等，具有十分强大的功能，哪个程序员能拒绝学习呢🥵🥵🥵🥵？

  老式前端三件套（😣库😇）:

2.基本数据类型

2.1总述：

  Javascript语言中有七种基础数据类型，分别为：字符串(String)、数字(Number)、布尔(Boolean)、null、undefined、Symbol和BigInt（反正我从来没用过😓）。其中字符串类型用于表示文本，数字类型用于表示数值，布尔类型用于表示真或假的值，null和undefined表示空值，Symbol用于创建独一无二的值，BigInt用于表示超过Number类型能表示的大数值。这些基础数据类型的操作和用法在Javascript中非常常见，是学习和使用Javascript的基础，最好是都给我记下来🤬，才能熟练应用😡！ 

let str = "Hello world";
let num = 42;
let bool = true;
let n = null;
let u;

console.log(typeof str); // 输出: "string"
console.log(typeof num); // 输出: "number"
console.log(typeof bool); // 输出: "boolean"
console.log(typeof n); // 输出: "object"
console.log(typeof u); // 输出: "undefined"

  需要注意的是，typeof null会返回"object"，这是一个历史问题。同时，变量u被声明了但未被赋值，因此其类型为"undefined"。这些基本数据类型在JavaScript中是非常重要的，因为它们是构建更复杂数据类型和算法的基石。

2.2数字类型

所有数字不分大小、不分正负、不分整浮，都是数字类型😅。

typeof 114514;
typeof 1.1415;
typeof -114514

2.3字符串类型常用函数

length：返回字符串的长度😪，学过c++与Java的人肯定都用烂了。

let str = "Hello world";
console.log(str.length); // 输出: 11

indexOf：返回字符串中指定字符或子字符串的位置。如果没有找到返回-1。

let str = "Hello world";
console.log(str.indexOf("world")); // 输出: 6
console.log(str.indexOf("universe")); // 输出: -1

slice：返回字符串中指定范围的子字符串。

let str = "Hello world";
console.log(str.slice(0,5)); // 输出: "Hello"
console.log(str.slice(6)); // 输出: "world"

toUpperCase：将字符串转换为大写字母。

let str = "Hello world";
console.log(str.toUpperCase()); // 输出: "HELLO WORLD"

toLowerCase：将字符串转换为小写字母。

let str = "Hello world";
console.log(str.toLowerCase()); // 输出: "hello world"

这些函数是JavaScript中常用的字符串函数之一，我们可以在开发中使用它们来处理和操作字符串。

3.复杂数据类型

  除了基本数据类型外，JavaScript还具有复杂数据类型，包括对象(Object)、数组(Array)和函数(Function)。它们是更复杂和灵活的数据类型，可以被用于构建更加复杂的应用程序。下面是这些复杂数据类型的简单解释和示例代码（太多知识点了，总结一下最基础的浅浅😋）：

1.对象(Object)：对象是键值对的集合，每个键都是唯一的字符串，值可以是基本类型或其他复杂类型，可以通过对象中的键来访问值。

let person = {
  name: "Alice",
  age: 30,
  city: "New York"
};
console.log(person.name); // 输出: "Alice"

2.数组(Array)：数组是值的有序集合，每个值都可以是任何类型😅，可以通过数组中的下标来访问值。

let fruits = ["apple", "banana", "cherry"];
console.log(fruits[1]); // 输出: "banana"

3.函数(Function)：函数是可执行的代码块，它们可以被调用，可以有输入和输出，也可以返回任何值或不返回任何值。

function addNumbers(num1, num2) {
  return num1 + num2;
}
console.log(addNumbers(2, 3)); // 输出: 5

  这些复杂数据类型是JavaScript中非常重要的，经常被用于构建应用程序的结构和逻辑。了解它们的特性和用法可以帮助我们更好地理解和运用JavaScript。

4.Javascript函数

在JavaScript中，函数是一种特殊的对象，可以像其他对象一样通过变量进行传递，作为参数传递给其他函数，或从函数中返回😴😴😴。

函数通常用于封装常用的代码块，使代码更加模块化和可重用。在JavaScript中，函数可以以多种方式定义，如下所示：

1.函数表达式：使用变量名将函数作为值赋给变量。

let addNumbers = function(num1, num2) {
  return num1 + num2;
};

2.箭头函数：一种简写形式的函数定义。

let addNumbers = (num1, num2) => num1 + num2;

函数也可通过参数来接受输入，并通过返回值来输出结果。例如，下面的函数将两个数字相加并返回结果：

function addNumbers(num1, num2) {
  return num1 + num2;
}

console.log(addNumbers(2, 3)); // 输出: 5

  在JavaScript中，函数不仅可以返回一个值，也可以不返回任何值。如果没有指定返回值，则函数将返回“undefined”。函数可以使用局部变量和全局变量，以及调用其他函数来实现更复杂的逻辑。函数可以使用连续的参数（称为“剩余参数”）来接受任意数量的参数，并且可以使用默认参数来指定某些参数的默认值。

5.总结以及个人心得

  本次学习主要总结了Javascript基础语法和语言特性，我们了解JavaScript的基本语法、数据类型、运算符、控制流和函数等基础知识是非常重要的，我们依然要拓广思维，多学习框架和库，JavaScript有许多流行的框架和库，如React、Angular、Vue、jQuery等等。学习框架和库可以让我们更快地编写应用程序，提高开发效率。网上有许多好用的JS包，能帮助我们构建更加灵活、美观的界面，我推荐了几个处理前端页面的js文件，已放在文章顶端，有兴趣可以自己下载。

三、TypeScript

1.TypeScript概述

本人参照官网进行学习与讨论:https://www.tslang.cn/samples/index.html,了解更多好康的😍🥵🥵🥵请去官网。

 看了一下官网，TypeScript的语言特性太多了，实际开发时我们应该用不来这么多，就算实在要用到时候去官网查一下就ok了。这里总结一下常用的🤪😴，欢迎大家讨论。

2.基础数据类型

由于有许多类型与上述Javascript类型相似，这里主要介绍有差别的几个类型😇

1.元组Tuple

这当然不是元祖蛋糕（吃吃吃吃😍😍😍），但它的成分与元祖蛋糕一样复杂，元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同(感觉用处不大)。比如，你可以定义一对值分别为 string和number类型的元组，注意在赋值时一定要把位置搞对，不然就错啦！😭

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['114514', 10]; // 正确的，中肯的
// Initialize it incorrectly
x = [10, 'hello']; // 错误的，极端的

访问里面的元素也可以调用该类型的函数，如下

console.log(x[0].substr(1)); // 可以
console.log(x[1].substr(1)); // 又错啦！, 'number' 没有这个'substr'函数

让人惊奇的是，它还可以越界访问😅（大家尽量少用），下面是官网给的解释,当访问一个越界的元素，会使用联合类型替代：

x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型

console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString

x[6] = true; // Error, 布尔不是(string | number)类型

2.枚举enum

enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字鉿哈😰。

enum Car {Daben, BenTian, FaLaLi}
let c: Car = Car.Daben;

默认情况下，依然从0开始为元素编号。 你也可以手动的指定成员的数值。

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;

3.类与接口

1.interface

interface与type，个人认为差别不大😫，这对于c++与Java的人来说主要是看习惯用谁，下面是例子代码。

interface People{
  name: string;
  age: number;
  skill: string;
  skinNum?: number;
  say(): string; // say函数返回值为string
  [propname: string]: any; // 当前People可定义任意字符串类型的key
}
// 继承
interface littleSoldier extends People{
  rush(): string;
}
// 任意类型
interface IAnyObject {
  [key: string]: any;
}

type People = {
  name: string,
  age: number,
  skill: string,
  skinNum?: number,
};

4.函数

和JavaScript一样，TypeScript函数可以创建有名字的函数和匿名函数。 我们可以随意选择适合应用程序的方式，不论是定义一系列API函数还是只使用一次的函数。

function add(x: number, y: number): number {
    return x + y;
}

let myAdd = function(x: number, y: number): number { return x + y; };

5.总结与自身心得

1.相较于Javascript，TypeScript在编译期间就可以查看发现绝大部分错误，能够有效避免代码跑起来后出现一堆错误，让人血压升高👿。

2.但有一定的学习成本，要熟练运用还得去官网多学习。

3.对Javascript有些库的兼容性不太好，比如使用Vue2框架时就dddd😓。

4.本学期只是稍微了解了一下TypeScript，还未用到实际项目中，需要更多的实践才知道到底符不符合自己打代码的习惯（对不对味！）。