JavaScript&TypeScript总结

    <script>

        var age; //1.声明一个名称为age的变量(variable)

        age = 18;   // 2.赋值

        console.log(age); // 3.输出结果，在网页检查可看到

        var myname = 'dy';   // 4.变量初始化

        console.log(myname);

    </script>

注：

1.JavaScript语句和JavaScript变量都对大小写敏感；

2.用var操作符定义的变量将成为定义该变量的作用域中的局部变量。如果在函数中使用var定义一个变量，那么这个变量在函数退出后就会被销毁。省略var即可定义全局变量，但不推荐。

1.3 操作符

1.3.1 一元操作符 ++ --

<body>

    <p>设置y=5，计算x=++y</p>


    <script>

        var y=5;

        var x=++y;

        console.log(y);

        console.log(x);

    </script>

</body>

注：x和y值都受到影响，x=6，y=6，和c、c++语言用法一样。

1.3.2 布尔操作符 && ||

除下列值为假外其余皆为真： false、null、undefined、''、0、NaN

1.3.3 算术操作符 + - * / %

    <script>

    var result = 5 + '5'; // 一个数值和一个字符串相加

    console.log(result); // '55'

   

    var num1 = 5;

    var num2 = 10;

    var message = "The sum of 5 and 10 is " + num1 + num2;// (num1 + num2)，还可使用模板字符串``

    console.log(message); // "The sum of 5 and 10 is 510"

    </script>

注：

1.js的几个不同种类的变量直接相加时会默认把不同类型的变量当作字符串相“加”；

2.对几种不同的变量直接相减会直接输出为NaN；

3.要对变量进行我们平时所认为的加减乘除运算要对运算加上括号

1.3.4 关系操作符 <> <=>= == === != !==

        var x = 5;

        console.log(x == 5);    //true

        console.log(x !== 5);   //false

        console.log(x == '5');  //true

        console.log(x === 5);   //true

        console.log(x === '5'); //false

注：===称为全等（值和类型）。

1.3.5 其他

JS其他操作符如条件（问号）操作符和赋值操作符和C语言用法基本相同

1.4 语句

if do-while while for for-in for-of break continue switch

for-of、forEach能简洁的遍历集合中的元素，如下代码：

    var colors = ['red', 'green', 'blue', 'brown']; //colors是一个数组

    //传统遍历（基本不用了）

    for(var i=0;i<colors.length;i++){

    console.log(colors[i]);

    }

    //for-in，专注下标

    for(var c in colors){

    console.log(colors[c]);

    }

    //for-of，专注元素

    for(var c of colors){

    console.log(c);

    }

    //高级遍历

    colors.forEach(c => console.log(c));

    var other = colors.map(c => c + 'X');//map不仅遍历，还返回另一个数组

    console.log(other);

1.5 函数

函数可以在任何地方、任何时候调用执行，函数在定义时不必指定是否返回值

    function sayHi(name, message) {

        console.log('Hello ' + name + ',' + message);

    }

    sayHi('Gridwang', '你好。');

JS函数不介意传递进来多少个参数，也不在乎传进来参数是什么数据类型。JS参数在内部是用一个数组来表示的。函数接收到的始终都是这个数组，而不关心数组中包含哪些参数（如果有参数的话）。如果这个数组中不包含任何元素，无所谓；如果包含多个元素，也没有问题。

如果定义了两个名字相同的函数，则该名字只属于后定义的函数（被覆盖）。

1.6 对象Object

对象Object是ECMAScript中使用最多的一个类型，常将数据和方法封装在对象中。

方法一：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();

另：Object构造函数创建对象时会产生大量重复代码，此时可使用工厂模式的一种变体

    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');

1.7 数组Array

ECMAScript 数组的每一项可以保存任何类型的数据，数组的大小是可以动态调整的。

方式一：

var colors = new Array('red', 'blue', 'green');

方式二（常用）：

    var colors = ['red', 'blue', 'green']; // 创建一个包含 3 个字符串的数组

    console.log(colors[1]); //blue

    colors[3] = 'brown';

    console.log(colors.length);  //4

    var names = []; // 创建一个空数组

    var hyBird = [1, 2, 'haha', {firstName: 'Yong', lastName: 'Wang'}]; //不推荐！

    console.log(hyBird[3].firstName);

1.7.1 元素联合

    var colors = ['red', 'green', 'blue'];

    console.log(colors.join(',')); //red,green,blue

    console.log(colors.join('||')); //red||green||blue

1.7.2 堆栈方法

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

    var colors = []; // 创建一个数组

    var count = colors.push('red', 'green'); // 末尾推入两项

    console.log(count); //2

    count = colors.push('black'); // 末尾推入另一项

    console.log(count); //3

    console.log(colors); //'red','green','black'

    var item = colors.pop(); // 末尾弹出最后一项

    console.log(item); //'black'

    console.log(colors); //'red','green'

1.7.3 队列方法

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

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

    var colors = new Array();       //创建一个数组

    colors.push('red', 'green');    //推入两项

    console.log(colors);            //'red','green'

    count = colors.push('black');   //推入另一项

    console.log(colors);            //'red','green','black'

    var item = colors.shift();      //前端弹出第一项

    console.log(item);              //'red'

    console.log(colors);            //'green','black'

反之，unshift()方法能在数组前端添加任意个项并返回新数组的长度。

1.7.4 反转数组项

    var values = [1, 2, 3, 4, 5];

    values.reverse();

    console.log(values); //5,4,3,2,1

1.7.5 链接方法

    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返回一个新数组，原数组没改变

1.7.6 分片方法

slice()能够基于当前数组中的一或多个项创建一个新数组，不会更改原始数组。

slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。

一个参数：返回从该参数指定位置开始到当前数组末尾的所有项；

两个参数：返回起始和结束位置之间的项，但不包括结束位置的项。

    var colors1 = ['red', 'green', 'blue', 'yellow', 'purple'];

    var colors2 = colors1.slice(1);

    var colors3 = colors1.slice(2, 4);

    var colors4 = colors1.slice(2, 2);

    console.log(colors2);//'green', 'blue', 'yellow', 'purple'

    console.log(colors3);//'blue', 'yellow'

    console.log(colors4);//空数组

1.7.7 splice方法

Splice可对数组进行如下三种操作：

删除：可以删除任意数量的项，splice(起始位置,删除项数)；

插入：可以向指定位置插入任意数量的项，splice(起始位置,删除项数,插入项，...)，如果要插入多个项，可以再传入第四、第五，以至任意多个项；

替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，插入的项数不必与删除的项数相等，splice (起始位置,删除项数,插入项数，...) 。

注：splice()方法直接更改原始数组。

    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，返回的数组中只包含一项

1.8 链式语法

每个函数返回this代表包含该函数的对象，对这个对象而言，其他函数可以快速调用，且可以连续快速的调用对象的函数。

    var bird = {//定义对象字面量

    catapult: function() {

        console.log( 'Yippeeeeee!' );

        return this;//返回bird对象自身

    },

    destroy: function() {

        console.log( "That'll teach you... you dirty pig!" );

        return this;

    },

    test: function(){

        console.log("destroy()后能够继续链接")

    }

    };

    bird.catapult().destroy().test()

1.9 闭包

当在一个函数内定义另外一个函数就会产生闭包，闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。

    function greeting(name) {

        var text = 'Hello ' + name; // local variable

        // 每次调用时，产生闭包，并返回内部函数对象给调用者

        return function() { console.log(text); }//注意该函数无名称，称为匿名函数

    }

    var sayHello = greeting('Closure');//调用greeting()返回了 "Hello Closure"

    sayHello();  // 注意此处的使用方法。通过闭包访问到了局部变量text

2 TypeScript总结

2.1 TypeScript简介

TypeScript是JavaScript的超集，扩展了JavaScript的语法，因此现有的 JavaScript代码可与TypeScript一起工作无需任何修改，TypeScript通过类型注解提供编译时的静态类型检查，TypeScript可处理已有的JavaScript代码，并只对其中的 TypeScript 代码进行编译。

2.2 let和const

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

let a:string='Hello,TypeScript'

console.log(a);

a='Hello';//修改a的值

console.log(a);


let age:number=99;

console.log(age);

age=80;//修改age的值

console.log(age);


const pi:number=3.14159

//pi=3.14 会报错

注：

1.如果省略类型说明，TS可以自动推断；

2.用let定义变量则变量的值可以改变,但不能将一个类型改为另一类型，如果需要可以使用联合类型：let a: number | string = 'TS'；

3.用const定义的变量的值不可以改变

2.3 解构

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

//解构数组

let input = [89, 64, 2018, 10];

let [first, second] = input;//注意使用[]

console.log(first); // 89

console.log(second); // 64

let [one, ...others] = input; //剩余变量

console.log(...others);// 64 2018 10

//展开

let newArr = [89, ...others, 18];

console.log(newArr);//[89,64,2018,10,18]

//解构对象

let o = {

  a: "foo",

  b: 12,

  c: "bar"

};

let {a, b} = o;//注意使用{}，且变量名需与对象中属性名一致

console.log(a, b);

注：对数组进行解构时要注意加[ ]号，对对象解构时要加{ }，用解构可以较为灵活的选择想要的数组或对象的一部分的值。

2.3 函数

2.3.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

    let c=myAdd(3,2);

    console.log(c);

2.3.2 可选参数

    //可选参数，必须放在必要参数后

    function greeting(firstName: string, lastName?: string) {

        if(lastName) {

            return `Hello ${firstName} ${lastName}!`;

        }

        return `Hello ${firstName}!`;

    }

    console.log(greeting('d'));

    console.log(greeting('d', 'y'));

    //  console.log(greeting('d', 'y', 'y'));//error!

2.3.3 默认参数

    //默认参数，不必在必要参数后

    function greeting(firstName: string, lastName = 'y') {

        return `Hello ${firstName} ${lastName}!`;

    }

    console.log(greeting('d'));

    console.log(greeting('d', 'yyy'));

//  console.log(greeting('d', 'y', 'y'));//error!

2.3.4 剩余参数

TS里可以用剩余参数把所有参数收集到一个变量里。

    //剩余参数，会被当做个数不限的可选参数。可以一个都没有，也可以有任意个

    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'));

2.3.5 箭头函数

使用箭头函数可以简化函数定义。

//无参数，函数体代码只有一行，则该行结果即为函数返回值

let greeting1 = () => `Hello TS!`;

console.log(greeting1());

 

//一个参数，函数体代码只有一行，则该行结果即为函数返回值

let greeting2 = (name: string) => `Hello ${name}`;

console.log(greeting2('dy'));

 

//两个及以上的参数，函数体代码只有一行，则该行结果即为函数返回值

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++结果仍为3

}

console.log(add2(1, 2));

2.4 类class

2.4.1 类的定义和使用

    //类的定义和使用

    class MyInfo { //类名默认全部大写首字母

        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，即该类的实例

    myData.printInfo();

2.4.2类的属性和函数的访问权限

类中的属性和函数都有访问权限。public：可全局访问，protected：类的内部和其子类的内部可访问，private：在该类内部可访问。

2.4.3 存取器-getter、setter

当在类外部时，建议设置getter和setter操作其private属性，即使public属性也如此。

class MyInfo {

    private readonly _name: string; //私有属性，外部不可访问。readonly使其只能在初始化时赋值，以后不可更改。    

    private _weather: string; //私有属性，习惯以_开头进行命名

 

    constructor(name: string, weather: string){ //构造函数，一般用于初始化

      this._name = name;

      this._weather = weather;

    }

    get name(): string {

      return this._name;

    }

    // set name(value: string) {  //error！ _name有readonly属性

    //   this._name = value;

    // }

    get weather(): string {

      return this._weather;

    }

    set weather(value: string) {

      this._weather = value;

    }

  }

   

  let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象

  console.log(myData.name, myData.weather);

  myData.weather = 'sunny'; //OK

//  myData.name = 'Wang'; //error!

  console.log(myData);

2.4.4 静态属性

类中的属性或函数用static修饰时可直接使用而不需要实例化

    //静态属性，内建或自定义，无需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();

2.4.5 继承

可以通过extends关键字继承其它类，从而成为其子类

2.5 模块Module

对于大型的项目，需要使用模块进行管理。每个 .ts 文件就是一个模块，通过export来对外部模块暴露元素，通过import来引入模块。