【无标题】JavaScript&TypeScript学习总结

运行JavaScript有多种方式，可以直接在浏览器的控制台编写运行；也可以编写一个独立的js文件，然后在Html文件中引入，（这两种方法由浏览器解释执行，是以前唯一的方式）。也可以用编辑软件如Webstrom或VSCode编写独立的js文件，由安装好的Node.js解释执行运行。

JavaScript标识符和变量

1.标识符的命名规则跟Java相同。

2.变量：

声明变量：

var 变量名；

赋值：

变量名=值

javascript是一种弱类型语言，没有编译阶段，一个变量可以随意给其赋值。什么类型的都可以。

变量没有手动赋值时，默认赋值为：undefined。

未声明变量使用会报错。

2.局部变量和全局变量

类似C语言：

全局变量在函数体之外声明。浏览器关闭的时候才会销毁。

局部变量:在函数体内部声明。在函数体执行完后才销毁。

3.当一个变量声明的时候没有使用var关键字，那么不管这个变量是在哪里声明的，都是全局变量。

在这里插入图片描述

04.函数的定义和使用

1.JS中的函数怎么定义呢?

语法格式：

第一种方式：

function 函数名（形式参数列表）{

函数体；

}

第二种方式：

函数名=function(形式参数列表）{

函数体；

}

JS中的函数不需要指定返回值类型，返回什么类型的数据都没问题。

函数的形参也不需要声明。

如：

<script>

function sum (a,b){

alert(a+b);

}

//或者

sum=function(a,b){

alert(a+b);

}

</script>

在调用函数的时候，如果没有传参数的值，或则传了一部分，剩下未传的参数默认赋值undefined。

NaN是一个具体的值，该值表示不是数字。

如果实参的数量大于形式参数的个数，默认只取前面两个数据。即没有数量限制（弱类型语言）。因此可以看出，JS不需要重载。

2.JS的函数不能重载。

如果出现同名函数，后面定义的函数会把前面定义的函数覆盖。

因此JS函数不能重名。分辨函数就是根据函数名来分辨。

05.JS的数据类型

1.JS数据类型有:原始类型，引用类型。

原始类型：Undefined,Number,String,Boolean,Null

引用类型:Object以及子类。

2.在ES6规范后，又基于以上6种类型添加了一种新的类型：Symbol。

3.JS中有一个运算符叫做typeof,这个运算符可以在程序的运行阶段动态地获取变量的数据类型。

typeof运算符的语法格式：

typeof 变量名

typeof运算符的运算结果时以下6个字符串(全小写）结果之一：

“undefined"

“number”

“string”

“boolean”

“object”

“function”

var d=null;

alert(typeof d);//“object”

比较字符串是否相等用双等号。

4.Undefined数据类型只有一个值。这个值就是undefined，当一个变量没有手动赋值，系统默认赋值为undefined，当然也可以手动赋值为undefined。

1.number数据类型

如：NaN，表示Not a Number不是一个数字，但是属于Number类型。

Infinity，表示无穷大。

0,-1,123,…小数，复数，无穷大都是属于number类型。

除数为0时，结果为无穷大。

函数isNaN（数据）：结果为true表示不是一个数字。

parseInt()函数：可以将字符串自动转换成数字。保留Int

parseFloat()函数：将字符串转换成数字。

Math.Ceil()函数：向上取整。2.1会变为3。

2.boolean数据类型

在boolean类型中有一个Boolean（）函数，会将非boolean类型，转换成boolean类型。

当某个地方一定是boolean类型时，会自动转换成boolean类型。例如if后面的括号。

NaN,0,"",null,undefined会自动转换成false.

3.String数据类型

1.在JS当中字符串可以使用单引号和双引号。

2.在JS当中，怎么创建字符串对象

第一种：var s=“sag”;（小String，属于String类型）

第二种：var a2= new String(“ab”);（大String，属于Object类型）

Sting是一个内置的类，可以直接使用。

3.无论是小String还是大Sting字符串的长度相同。其中又一个length属性求长度(x.length)

常用函数：

indexof: 获取指定字符串在当前字符串中第一次出现的索引

lastIndexof

replace

substr

substring

toLowerCase

toUpperCase

spilt 拆分字符串

例如:alert(“fasdf".indexof(“sdf”));

replace只替换最前面一个子字符串

如果想全部替换需要使用正则表达式。

substr和substring的区别。

substr(startIndex length)

substring(startIndex endIndex)左闭右开。

4.Object数据类型

1.首先Object类型是所有类型的超类，自定义的任何类型，默认继承Object。

2.Object的prototype属性

作用：给类动态地扩展属性和函数。

3.Object类的函数：

toString()

valueof()

toLocalString()

4.在JS中定义的类默认继承Object的属性和函数。

06.在JS当中怎么定义类？怎么new对象？

1.定义类的语法：

第一种方式：

function 类名（形参）{

}

第二种方式：

类名 function (形参）{

}

小朋友你是不是有很多问号？这不是函数的定义方式么？

注意：用了new就是把他当作类看，如果没有new则是把它当作普通的函数看待。

创建对象的语法：

new 构造函数名（实参）；//构造函数和类名一致

2.JS中类的定义，同时又是一个构造函数的定义

在JS中类的定义和构造函数的定义是放在一起来完成的。

如：

function User(a,b,c){

this.sno =a;

this.sname=b;

this.sage=c;

}

//a,b,c是形参，属于局部变量

//声明属性（this 表示当前对象）

//User类中有三个属性：sno/sname/sage

3.创建对象：

var u1 = new User(111,“lisi”,30)

4.访问对象的属性：

alert(u1.sno)

alert(u1.sname)

alert(u1.sage)

或者用另一种语法访问属性：

alert(u1[“sno”]);

alert(u1[“sage”]);

定义类的另一种语法：

Emp = function (ename ,sal)

this.ename =ename;

this.sal=sal;

}

5.在类中如何定义函数:

Product = function(pno,pname,price){

//属性

this.pno=pno;

this.pname=pname;

this.price=price;

//函数

this.getPrice =function(){

 return this.price

}

//new对象

var pro = new Product(111,"西瓜",4.0)

//调用函数

var pri = pro.getPrice();

alert(pri);//4.0

6.通过prototype这个属性来动态扩展属性以及函数

//给Product类扩展函数：

Product.prototype.getPname=function(){

return this.pname;

}

//给String类扩展函数

String.prototype.getPname=function(){

alert(“Hello”);

}

TypeScript

第一个 TypeScript 实例

以下实例我们使用 TypeScript 来输出 Hello World!:

实例

const hello : string = "Hello World!" console.log(hello)

以上代码首先通过 tsc 命令编译：

tsc Runoob.ts

得到如下 js 代码：

Runoob.js 文件代码：

var hello = "Hello World!"; console.log(hello);

最后我们使用 node 命令来执行该 js 代码。

$ node Runoob.jsHello World

运行流程如下：

Runoob.ts->Runoob.js

    number类型

    let num: number = 123;

    string类型

    let name: string = "哈喽！";

    布尔类型

    let flag: boolean = true;

    在ts中 null和undefined

    var n = null;

    var u = undefined;

    n = null;

    n = undefined;

    在ts中 null和undefined他们是类型 也是值

    数组类型

    let arr2: string[] = [];

    let arr3 = ["xxx",18, true];

    any类型

    let msg: any = "1234";

    msg = 123;

    msg = true;

    msg = [];

    msg = null;

    它可以是任何类型但是它也会失去某些数据

    unknown类型 只能赋值给any和unknown类型的变量

    any类型 可以赋值给任意类型的变量

    let flag = true;

    let res: unknown;

    if(flag){

    res = fn1();}else {res = fn2();}

    let msg:unknown = res;

    console.log(res)

    Void类型: Void是不返回任何类型值的函数的返回类型。如果没有可用的数据类型，则使用它。

    枚举类型

    就是将一组可能出现的值, 一个一个列举出来, 定义在一个类型中,这个类型就是枚举类型

    枚举类型放常量 字符串 数字 (全大写)

stpescript中的函数

    type Fn = (qwerty)=>void

     

    let fn:Fn = function (){return "aaaa"}

ts中的this指向谁调用它它的this就是谁

函数中剩余的参数可以通过...es6新增的展开运算符

函数的重载

    //函数签名  通过函数签名的形式来实现函数重载

    function sum(a1:number, a2:number): number;

    function sum(a1:string, a2:string): string;

    function sum(a1: any, a2: any){

        return a1+a2

    }

    //在调用sum函数的时候,它会根据我们传入的参数类型,来决定执行函数时,到底执行哪一个函数签名

    sum(1,2);//3

    sum("1","2");//"12"

     

    //有重载的情况下,那么哪怕数据类型是any只要不符合任意一个重载函数签名,那么都是不能使用的

    // sum({a1:1},{a2:2});//"12"

     

    //通过函数重载来实现效果

    function getLength(arg: string): number;

    function getLength(arg: any[]): number;

    function getLength(arg: any){return arg.length}

    getLength("wertyuio");

    getLength([1,2,3,4,5]);

     

    //在可能的情况下,尽量来选择通过联合类型去实现

.typescript中的类

类的继承 类开头大写

    class Person{

        name!:string;

        age:number;

     

        constructor(name:string, age:number) {

            this.name = name;

            this.age = age;

        }

        running(){

            console.log(this.name + " running")

        }

        eating(){

            console.log(this.name + " eating")

        }

    }

     

    let p = new Person("ES6+",7)

    p.running()

    p.eating()

类中的继承

    class Person{

        name!:string;

        age:number;

     

        constructor(name:string, age:number) {

            this.name = name;

            this.age = age;

        }

        running(){

            console.log(this.name + " running")

        }

        eating(){

            console.log(this.name + " eating")

        }

    }

    class A{}

    //Classes can only extend a single class.

    // class Student extends Person, A{

    class Student extends Person{

        learn: string;

        constructor(name:string, age:number, learn: string) {

            super(name, age);

            this.learn = learn

        }

        running(){

            //this ==> s

            //super===> Person

            super.running()

            console.log(this.name + " Student running")

        }

    }

     

    let s: Student = new Student("学生", 20, "TypeScript");

    s.running();

    s.eating();

    console.log(s)

typescript中的成员访问

    //在typeScript中 类的属性和方法支持三种修饰符

    //1 public

    //  修饰的是在任何地方可见 公有的属性或方法 默认编写的属性就是public的

    //2 private

    //  修饰的是仅在同一类中可见 私有的属性或方法(不参与继承)

    //3 protected

    //  修饰的是仅在类自身及子类中可见 受保护的属性或方法(不能读写)

     

public方法

    class Person {

        public name!: string;

        public age: number;

     

        constructor(name: string, age: number) {

            this.name = name;

            this.age = age;

        }

        running() {

            console.log(this.name + " running")

        }

        eating() {

            console.log(this.name + " eating")

        }

    }

    let A = new Person('rrr',777)

    console.log(A);

private方法

    //private 修饰

    class Person{

        private name:string;

        constructor(name:string) {

            this.name = name;

        }

    }

     

    let p = new Person("aa");

    console.log("=======>",p)

protected方法

        class Person {

            protected name: string;

            constructor(name: string) {

                this.name = name;

            }

        }

        let p = new Person("aa");

        class Student extends Person {

            constructor(name: string) {

                super(name);

            }

            running() {

                console.log(this.name + " Student running")

            }

        }