JavaScript+TypeScript学习总结

最新推荐文章于 2022-09-25 02:33:22 发布

m0_52324322

最新推荐文章于 2022-09-25 02:33:22 发布

阅读量110

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_52324322/article/details/125701283

版权

一、JavaScript学习总结

1.基础语法

（1）注意事项

JavaScript严格区分大小写。

语句后的分号建议添加，但不必须。

单行注释//

多行注释/* */

（2）变量

var a;
a=1;
var a=123

在JavaScript中有五种基本类型：String、Number、Boolean、Undefined、Null。这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。

（3）操作符

3.1 算术运算符

最基本加减乘除以及自加、自减和求模

x=y+2;
x=y-2;
x=y*1;
x=y/1;
x++;
y--;
x=y%2;

3.2 关系运算符

大于、小于、大于等于、小于等于

x>y;
x<y;
x>=y;
x<=y;

3.3其他运算符

条件操作符

x=(a>b)?a:b;

赋值运算符

+=、-=、*=、=、/=

2.语句

条件语句 if else 、switch…case

var age = 16;
if (age < 18) {
    console.log("未成年");
}

switch (语句) {
    case 表达式1:
        语句...
    case 表达式2:
        语句...
    default:
        语句...
}

循环语句 while 、 do while 、 for

while(条件表达式){
    语句...
}

do{
    语句...
}while(条件表达式);

for(初始化表达式 ; 条件表达式 ; 更新表达式){
    语句...
}

3.函数

函数（ function）对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。

ECMAScript 中的函数在定义时不必指定是否返回值。实际上，任何函数在任何时候都可以通过 return 语句后跟要返回的值来实现返回值。

4.对象Object

对象 Object 是ECMAScript 中使用最多的一个类型。我们常将数据和方法封装在对象中。Object 构造函数或对象字面量都可以用来创建单个对象，但这些方式有个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。

5.数组Array

常用的数组方法如下：

（1）元素联合

var colors = ['red', 'green', 'blue'];
console.log(colors.join(',')); //red,green,blue
console.log(colors.join('||')); //red||green||blue

（2）堆栈方法

栈是一种 LIFO（Last-In-First-Out，后进先出）的数据结构，也就是最新添加的项最早被移除。而栈中项的插入（叫做推入）和移除（叫做弹出），只发生在一个位置——栈的顶部。

ECMAScript 为数组专门提供了 push() 和 pop() 方法，以便实现类似栈的行为。

（3）队列方法

栈数据结构的访问规则是 LIFO（后进先出），而队列数据结构的访问规则是 FIFO（First-In-First-Out，先进先出）。队列在列表的末端添加项，从列表的前端移除项。

由于 push() 是向数组末端添加项的方法，因此要模拟队列只需一个从数组前端取得项的方法。实现这一操作的数组方法就是shift()，它能够移除数组中的第一个项并返回该项，同时将数组长度减1。

ECMAScript 还为数组提供了一个 unshift() 方法。它能在数组前端添加任意个项并返回新数组的长度。

var colors = new Array(); //创建一个数组
var count = colors.unshift('red', 'green'); // 推入两项
console.log(colors);
count = colors.unshift('black'); // 推入另一项
console.log(colors);
var item = colors.pop(); // 取得最后一项
console.log(item); //'green'
console.log(colors);

（4）反转数组项
（5）链接方法
（6）分片方法

slice() ，它能够基于当前数组中的一或多个项创建一个新数组。 slice() 方法可以接受一或两个参数，即要返回项的起始和结束位置。

在只有一个参数的情况下， slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。slice() 方法不会影响原始数组。

（7）splice方法

a、删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。
b、插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。
c、替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。

6.链式语法

每个函数返回 this代表包含该函数的对象，这样其他函数就可以立即被调用。

7.闭包

闭包就是：函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。

闭包就是就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配。当在一个函数内定义另外一个函数就会产生闭包。

二、TypeScript

1.let 和 const

使用let或const申明变量，并加上类型说明，且作用域为块级即以{}为界。

2.解构

将对象、数组中的元素拆分到指定变量中，以方便使用。

2.函数

（1）使用完整函数类型定义

//命名函数，有完整的参数和返回类型。可以不用，TS将自动进行类型推断但推荐使用！
function add(x: number, y: number): number {
  return x + y;
}
//匿名函数
let myAdd = function(x: number, y: number): number { return x + y; };
console.log(myAdd(1, '2'));//error
console.log(myAdd(1));//error
console.log(typeof myAdd(1, 2));//number

（2）可选参数

//可选参数，必须放在必要参数后
function greeting(firstName: string, lastName?: string) {
  if(lastName) {
      return `Hello ${firstName} ${lastName}!`;
  }
  return `Hello ${firstName}!`;
}
console.log(greeting('QiGe'));
console.log(greeting('QiGe', 'Wang'));
console.log(greeting('QiGe', 'Wang', 'Yong'));//error!

（3）默认参数

//默认参数，不必在必要参数后
function greeting(firstName: string, lastName = 'Wang') {
  return `Hello ${firstName} ${lastName}!`;
}
console.log(greeting('QiGe'));
console.log(greeting('QiGe', 'HaHaHa'));
console.log(greeting('QiGe', 'HaHaHa', 'Yong'));//error!

（4）剩余参数

//剩余参数，会被当做个数不限的可选参数。可以一个都没有，也可以有任意个
function greeting(firstName: string, ...restName: string[]) {
  return `Hello ${firstName} ${restName.join(' ')}!`;
}
console.log(greeting('Osama', 'bin', 'Muhammad', 'bin', 'Awad', 'bin', 'Laden'));
console.log(greeting('Laden'));

（5）箭头函数

简化函数定义、解决this问题

//无参数，函数体代码只有一行，则该行结果即为函数返回值
let greeting1 = () => `Hello TS!`;
console.log(greeting1());
//一个参数，函数体代码只有一行，则该行结果即为函数返回值
let greeting2 = (name: string) => `Hello ${name}`;
console.log(greeting2('QiGe'));
//两个及以上的参数，函数体代码只有一行，则该行结果即为函数返回值
let add1 = (n1: number, n2: number) => n1 + n2;
console.log(add1(1, 2));
//两个及以上的参数，函数体代码多于一行,则必须用{}包裹，且显式给出return
let add2 = (n1: number, n2: number) => {
  let sum = n1 + n2;
  return sum;//改为sum++结果如何？
}
console.log(add2(1, 2));

4.类class

类是属性和函数的集合，是生成对象（Object）或类实例的模板。

（1）类的定义与使用

//类的定义和使用
class MyInfo { //class是关键字，类名默认全部大写首字母
  name: string; //属性
  weather: string; //属性
  
  constructor(name: string, weather: string){ //构造函数，一般用于初始化。如果没有，TS会自动生成一个，以备用new创建类实例时调用。
    this.name = name;
    this.weather = weather;
  }
  printInfo(): void { //其它函数，无返回值
    console.log(`Hello, ${this.name}.`);
    console.log(`Today is ${this.weather}.`);
  }
}

let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象，即该类的实例
myData.printInfo();