JavaScript&TypeScript学习总结

JavaScript学习总结

JavaScript基本语法

标识符

所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是按照下列格式规则组合起来的一或多个字符:
第一个字符只能是字母、下划线（ _ ）或美元符号（ $ ）之一；
其他字符可以是字母、下划线、美元符号或数字。
按照惯例，ECMAScript（European Computer Manufacturers Association） 标识符采用 驼峰大小写格式，也就是第一个字母小写，剩下的每个单词的首字母大写，如getNameById。

注意： JavaScript大小写敏感。

常用关键字

break ，do，instanceof，typeof，case，else，new，var，catch，finally，return，void，continue，for，switch，while，debugger，function，this，with，default，if，throw，delete，in，try等等。

变量

ECMAScript 的变量是松散类型的，所谓松散类型就是可以用来保存任何类型（如： String、Number、Boolean以及Object等）的数据。换句话说，每个变量仅仅是一个用于保存值的占位符而已。
定义变量时要使用 var 操作符，后跟变量名（即一个标识符），如下所示： var message; 这行代码定义了一个名为 message 的变量，该变量可以用来保存任何值。

var message = 'Hi, Chikenburger';
console.log(message);
message = OverWatch;
console.log(message);

注意： 用 var 操作符定义的变量将成为定义该变量的作用域中的局部变量。也就是说，如果在函数中使用 var 定义一个变量，那么这个变量在函数退出后就会被销毁

操作符

主要有：

1. 一元操作符：++ --
2. 布尔操作符：&& || ！（除下列值为假外其余皆为真： false、null、undefined、''、0、NaN）
3. 算术操作符：+ - * / %
4. 关系操作符：<> <=>= == === != !==（===为全等操作符，即值和类型都必须相等）
5. 条件（问号）操作符 ：? :（例如：var max = (num1 > num2) ? num1 : num2;）
6. 赋值操作符：= += -+ *= /= %=

基本语法

语句：

常用关键字：if do-while while for for-in for-of break continue switch，语句后分号并非必须。

变量：

ECMAScript的变量是松散型的，也就是可以保存任何类型的变量，定义变量时要用var操作符（如：var majiko）

函数：

通过函数JS可以封装任意多条语句，ECMAScript中的函数定义时不必指定是否返回值。同时，也不介意传递进来多少参数，什么类型的参数，也就是说即便你定义的函数只接受两个参数，在调用函数时，也未必一定要传递两个参数。另外，如果定义了两个相同名字的函数，JS规定后定义的函数有效。
例如：

 function sayHello(name, message) {
    console.log('Hello ' + name + ',' + message);
}
sayHi('鸡腿堡', '你好。');
//
function sum(num1, num2) {
    return num1 + num2;
}
var result = sum(3, 2);
console.log(result);
//
function addSomeNumber(num){
    return num + 100;
}
function addSomeNumber(num) {
    return num + 200;
}
console.log(addSomeNumber(100)); //将输出300

对象Object：

对象 Object 是ECMAScript 中使用最多的一个类型。我们常将数据和方法封装在对象中。下面是两种创建对象的方法（常用第二种）：

 //方式一new
    var person1 = new Object();//生成空对象
    person1.name = 'Elon Musk';//设置对象的属性
    person1.age = 46;
    person1.job = 'SpaceX Rocket';
    person1.sayName = function () {    //设置对象的方法/函数，注意此处
        console.log(this.name);
    };
    //方式二字面量
    var person2 = {
        name: 'Lary Page',
        age: 47,
        job: 'Software Engineer',
        sayName: function () {        //注意此处
            console.log(this.name);
        }
    };
    console.log(person1.job);
    person1.sayName();
    console.log(person2.job);
    person2.sayName();

闭包

闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。闭包就是就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配，当在一个函数内定义另外一个函数就会产生闭包。
例如：

function greeting(name) {
    var text = 'Hello ' + name; // local variable
    // 每次调用时，产生闭包，并返回内部函数对象给调用者
    return function() { console.log(text); }//注意该函数无名称，称为匿名函数
}
var sayHello = greeting('Closure');//调用greeting()返回了什么？
sayHello();  // 注意此处的使用方法。通过闭包访问到了局部变量text

TypeScript学习总结

基本语法

TypeScript总的来说是JavaScript的升级版，大部分语法与JS并无明显差异，但有以下几点比较特殊

强类型

TS使用let，const来定义变量，同时要申明变量类型，且作用域以{}为界。

let lang: string = 'TypeScript';//如果省略类型说明，TS也可进行自动推断
lang = 1010;//error! 如果需要可以使用联合类型：let lang: number | string = 'TS';
let age: number = 89;
let age = 64;//error!

const pi: number = 3.14159;//pi以后不可改变，类似常量
pi = 3.14;//error!

解构

解构可以将对象或数组中的元素拆分到指定变量以此来方便使用。
例如：

//解构数组
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);
//展开
let newArr = [89, ...others, 18];
console.log(newArr);
//解构对象
let o = {
  a: "foo",
  b: 12,
  c: "bar"
};
let {a, b} = o;//注意使用{}，且变量名需与对象中道属性名一致
console.log(a, b);

函数

使用完整函数定义：

//命名函数，有完整的参数和返回类型。可以不用，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'));

箭头函数（简化函数定义、解决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));

类Class

类的属性和函数的集合是生成对象或类的模板。
类的定义与使用如下：

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

类中的属性和函数都有访问权限，默认为public即全局可访问，其次为protected即可在类的内部和其子类的内部可访问，最后为private，只能在该类内部可访问。

模块Module

模块Module
对于大型的项目，我们需要使用模块进行管理。每个 .ts 文件就是一个模块，通过 export 来对外部模块暴露元素，通过 import 来引入模块。
在项目文件夹下新建目录modules和文件main.ts，并在modules下新建name.ts和weather.ts文件。
例如：
name.ts

export class Name { //用export对外部暴露该类
  constructor(private first: string, private second: string) {}
  get nameMessage() {
    return `Hello ${this.first} ${this.second}`;
  }
} 

weather.ts

export class WeatherLocation { //用export对外部暴露该类
  constructor(private weather: string, private city:string) {}
  get weatherMessage() {
    return `It is ${this.weather} in ${this.city}`;
  }
}  

main.ts

//用import从外部模块文件导入，默认后缀.ts去掉
import { Name } from "./modules/name";
import { WeatherLocation } from "./modules/weather";

let name = new Name('Wang', 'Yong');
let loc = new WeatherLocation('raining', 'ChongQing');

console.log(name.nameMessage);
console.log(loc.weatherMessage);       

JS与TS初步学习总结到此结束