js/ts学习总结

js:

//1变量,在这里面变量就像是对象，和python'里面一样
var a0='hi';
var a1=true;
var a2=new Date();
var a3=100;
console.log(message);
//变量区分大小写
//可以使用双引号或者单引号
//同名变量会覆盖前面的变量
//数据类型
/*
* number 数字类型
* String 字符串
* boolean 布尔
* null和undifined 空 注意区分
* */
//操作符
var result =5+'5';
var num1=1;
var num2=2
//字符串和数字连接
var message="the sum of 1 and 2 is" +num1+num2;
//关系符号
var x=5;
console.log(x==5);//判等
console.log(x===5)//全等
var max=(num1>num2)?num1:num2//和c++里面是一样的
//基本函数
var colors = ['red', 'green', 'blue', 'brown'];	//colors是一个数组
///便利
//for-in，专注下标
for(var c in colors){
    console.log(colors[c]);
}
//for-of，专注元素
for(var c of colors){
    console.log(c);
}
//函数
/*声明函数
1 func 函数名 （形参）
2 var 函数名 =new Function(形参)
3 var 变量名=function(形参)
* */
function sayHi(name, message) {
    console.log('Hello ' + name + ',' + message);
}
sayHi('Gridwang', '你好。');

function sum(num1, num2) {
    return num1 + num2;
}
//函数可以作为实参传递
function  testobj(a)
{
    alert(a());
}
var testParam =function ()
{
    alert('函数参数')
}
testobj(testParam());
//数组array
//创建
//方式一new
var colors = new Array('red', 'blue', 'green');
//方式二字面量
var colors = ['red', 'blue', 'green']; // 创建一个包含 3 个字符串的数组
//数组访问 arr[i]
console.log(colors[1]);
colors[3] = 'brown';
console.log(colors.length);
//注意数组不存在的时候返回undifined
;
//数组联合
var colors = ['red', 'green', 'blue'];
console.log(colors.join(',')); //red,green,blue
console.log(colors.join('||')); //red||green||blue
//堆栈方法push和pop
var colors = []; // 创建一个数组
var count = colors.push('red', 'green'); // 末尾推入两项
console.log(count); //2
colors.push('black'); // 末尾推入另一项
console.log(colors); //3
var item = colors.pop(); // 末尾弹出最后一项
console.log(item); //'black'
console.log(colors); //2
//队列方法
var colors = new Array(); //创建一个数组
colors.push('red', 'green'); //推入两项
console.log(colors); //2
count = colors.push('black'); //推入另一项
console.log(colors); //3
var item = colors.shift(); // 前端弹出第一项
console.log(item); //'red'
console.log(colors);

//反转数组
var values = [1, 2, 3, 4, 5];
values.reverse();
console.log(values); //5,4,3,2,1
//链接方法
var colors1 = ['red', 'green', 'blue'];
var colors2 = ['yellow', 'black'];
console.log(colors1.concat(colors2));
console.log(colors2.concat(colors1));
console.log(colors2.concat('brown'));
console.log(color2)//concat返回一个新数组，原数组没改变
//切片 和 python一样
//1
var colors1 = ['red', 'green', 'blue', 'yellow', 'purple'];
var colors2 = colors1.slice(1);
var colors3 = colors1.slice(2, 4);
var colors4 = colors1.slice(2, 2);
var colors = ['red', 'green', 'blue'];
var removed = colors.splice(0,1); // 删除第一项
console.log(colors); // green,blue
console.log(removed); // red，返回的数组中只包含一项
removed = colors.splice(1, 0, 'yellow', 'orange'); // 从位置 1 开始插入两项
console.log(colors); // green,yellow,orange,blue
console.log(removed); // 返回的是一个空数组
removed = colors.splice(1, 1, 'red', 'purple'); // 插入两项，删除一项
console.log(colors); // green,red,purple,orange,blue
console.log(removed); // yellow，返回的数组中只包含一项
//链式语法
var bird = {//定义对象字面量
    catapult: function() {
        console.log( 'Yippeeeeee!' );
        return this;//返回bird对象+
        // 自身
    },
    destroy: function() {
        console.log( "That'll teach you... you dirty pig!" );
        return this;
    }
};
//数组其他操作
//arr.concat(b,c)
//指定间隔转换字符串 var a=arr.jion('-')
//类的使用
/*类的声明
function 类名 （形参）
this. 属性 = 形参
*/
function Person (name,age)
{
    this.name=name;
    this.age=age;
}
/*类的继承
prototype 实现数据共享
*/
/*自定义对象
* var 对象名= new object
* var 对象名 ={}
* */
//对象object
//创建
//方式一new
var person = new Object();//生成空对象
person.name = 'Elon Musk';//设置对象的属性
person.age = 46;
person.job = 'SpaceX Rocket';
person.sayName = function(){    //设置对象的方法/函数，注意此处
    console.log(this.name);
};
//方式二字面量
var person = {
    name: 'Lary Page',
    age: 47,
    job: 'Software Engineer',
    sayName: function(){        //注意此处
        console.log(this.name);
    }
};
console.log(person.job);
person.sayName();

function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        console.log(this.name);
    };
    return o;
}
var person1 = createPerson('Steve Jobs',56 , 'Inventor');
var person2 = createPerson('Linus Torvalds', 49, 'Software Engineer');
var person2 = createPerson('Julian Assange', 47, 'Ethical Hacker');
//常用方法和对象
/*
* String对象
* Date 对象
* Math 对象
* GLOBA 对象
* */

ts:

//变量
var flag:boolean=true;
// flag=123;  //error
flag=false;
console.log(flag);

var num:number=123;
num=456;
console.log(num);
//num='str';    //error

let lang: string = 'TypeScript';//如果省略类型说明，TS也可进行自动推断
//lang = 1010;//error! 如果需要可以使用联合类型：let lang: number | string = 'TS';
const pi: number = 3.14159;//pi以后不可改变，类似常量
//pi = 3.14;//error!

let arr:[number,string]=[123,'this is ts'];
console.log(arr);

let u: undefined = undefined;
let n: null = null;
console.log(num)


//函数
//命名函数，有完整的参数和返回类型。可以不用，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
//可选参数，必须放在必要参数后
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!

//默认参数，不必在必要参数后
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!

//剩余参数，会被当做个数不限的可选参数。可以一个都没有，也可以有任意个
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'));

//无参数，函数体代码只有一行，则该行结果即为函数返回值
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));
function getInfo(name:string):string;
function getInfo(age:number):string;
function getInfo(str:any):any{
    if(typeof str==='string'){
        return '我叫：'+str;
    }else{
        return '我的年龄是'+str;
    }
}
// alert(getInfo('张三'));   //正确
// alert(getInfo(20));   //正确
// alert(getInfo(true));    //错误写法
function getInfo(name: string): string;
function getInfo(name: string, age: number): string;
function getInfo(name: any, age?: any): any {
    if (age) {
        return "我叫：" + name + "我的年龄是" + age;
    } else {
        return "我叫：" + name;
    }
}
// alert(getInfo('zhangsan'));  正确
// alert(getInfo(123));  错误
// alert(getInfo('zhangsan',20));正确


//类
//类的定义和使用
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}.`);
    }
}


//访问权限
// private protected public
class MyInfo { //class是关键字，类名默认全部大写首字母
    public name: string; //public属性，可省略
    private _weather: string; //私有属性，习惯以_开头进行命名

    constructor(name: string, weather: string){ //构造函数，一般用于初始化
        this.name = name;
        this._weather = weather;
    }
    printInfo(): void { //其它函数
        this._test();
        console.log(`Hello, ${this.name}.`);
        console.log(`Today is ${this._weather}.`);
    }
    private _test(): void {
        console.log('You can not call me outside!');
    }
}

let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象
console.log(myData.name, myData.weather);
myData.weather = 'sunny'; //OK
myData.name = 'Wang'; //error!
console.log(myData);

//继承
class Person{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    run():string{
        return `${this.name}在运动`
    }
}
class Web extends Person{
    constructor(name:string){
        super(name);  /*初始化父类的构造函数*/
    }
}
// var w=new Web('李四');
// alert(w.run());


//静态属性，内建或自定义，无需new即可使用
console.log(Math.round(89.64)); //90
console.log(Math.pow(2, 8)); //256
class MyStaticClass {
    static place = 'Earth';
    static printInfo() {
        console.log('We have only one Earth!');
    }
}
console.log(MyStaticClass.place);
MyStaticClass.printInfo();

//抽象类
abstract class Animal {
    public name: string;
    constructor(name: string) {
        this.name = name;
    }
    abstract eat(): any; //抽象方法不包含具体实现并且必须在派生类中实现。
    run() {
        console.log("其他方法可以不实现");
    }
}
// var a=new Animal() /*错误的写法*/
class Dog extends Animal {
    //抽象类的子类必须实现抽象类里面的抽象方法
    constructor(name: any) {
        super(name);
    }
    eat() {
        console.log(this.name + "吃粮食");
    }
}
var d = new Dog("小花花");
d.eat();
class Cat extends Animal {
    //抽象类的子类必须实现抽象类里面的抽象方法
    constructor(name: any) {
        super(name);
    }
    run() {}
    eat() {
        console.log(this.name + "吃老鼠");
    }
}
var e=new Cat('小花猫');
e.eat();

//接口
interface FullName {
    firstName: string;
    secondName: string;
}
function printName(name: FullName) {
    // 必须传入对象  firstName  secondName
    console.log(name.firstName + "--" + name.secondName);
}
// printName('1213');  //错误

var obj = {
    /*传入的参数必须包含 firstName  secondName*/
    age: 20,
    firstName: "张",
    secondName: "三",
};
printName(obj);