JavaScript & TypeScript 学习总结

一、JavaScript

1.简介

JavaScript是互联网上最流行的脚本语言，这门语言可用于 HTML和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备，JavaScript是一种轻量级的编程语言。

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

2.基本语法

- 大小写敏感
JavaScript是一种区分大小写的语言，这就是说，在输入语言的关键字，变量，函数名以及所有的标识符时，都必须采取一致的字符大小写形式。例如关键字“while"就必须被输入为"while"，而不能输入为"While"或者"WHILE",同样的，“online”,“Online”,"OnLine"和"ONLINE"是四个不同的变量名。
- 标识符
在JS中所有的我们可以自主命名的都可以称之为 标识符。例如：变量名、函数名、属性名都属于标识符。
命名一个标识符需要遵守如下规则：

1、标识符中可以含有字母，数字，下划线 _，$
2、标识符不能以数字开头。用字母，下划线 _，$开头都没问题
3、标识符不能是ES中的关键字或是保留字；
4、标识符一般都采用驼峰命名法。首字母小写，每个单词的开头字母大写，其余字母小写。
- 语句
语句后的分号建议添加，但不必须。
- 关键字/保留字
Javascript关键字是指在Javascript语言中有特定含义，成为Javascript语法中一部分的那些字。Javascript关键字是保留的，不能用作变量名或函数名使用。使用Javascript关键字作为变量名或函数名，会使Javascript在载入过程中出现编译错误。
- 变量
变量是数据的“命名存储”。
在 JavaScript 中创建一个变量，我们需要用到 let 关键字。
下面的语句创建（也可以称为 声明 或者 定义）了一个名称为 “message” 的变量：

let message;

现在，我们可以通过赋值运算符 = 为变量添加一些数据：

let message;

message = 'Hello'; // 将字符串 'Hello' 保存在名为 message 的变量中

现在这个字符串已经保存到与该变量相关联的内存区域了，我们可以通过使用该变量名称访问它：

let message;
message = 'Hello!';

alert(message); // 显示变量内容

简洁一点，我们可以将变量定义和赋值合并成一行：

let message = 'Hello!'; // 定义变量，并且赋值

alert(message); // Hello!

也可以在一行中声明多个变量：

let user = 'John', age = 25, message = 'Hello';

多行变量声明有点长，但更容易阅读：

let user = 'John';
let age = 25;
let message = 'Hello';

3.操作符

• 一元操作符 ++ - -

var s1 = '2' ;
var s2 = 'z';
var b = false;
var f = 1.1;
var o = {
 valueOf：function(){
      return -1;
 }
};
s1++;   //值变成数值3;
s2++;   //值变成NaN
b++;    //值变成1
f--;    //值变成0.100000000 
o--;    //值变成数值-2

• 布尔操作符 && || ！
  除下列值为假外其余皆为真： false、null、undefined、‘’、0、NaN
  &&和||都属于 短路操作！

// 普通if判断语句，判断条件为a > b,执行c = a - b的语句
// 假设a,b,c均为数字
if(a > b){
    c = a - b;
}
 
// 使用&&判断
// 注意：使用赋值语句需要外部加上();
a > b && (c = a - b)；
 
// 使用||判断
!(a > b) || (c = a - b)
 
// 如果执行的语句为函数d，那么可以将 c = a - b 改为 d(),此时d()外部不需要加上();

• 算术操作符 + - * / %

		var a = 1 + 2; //加法
        var b = 1 - 2; //减法
        var c = 1 * 2; //乘法
        var d = 1 / 2; //除法

		var a = 1;
        var b = 2;
        var c = a + b; //c的值为3

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

let a = 1
let b = 2
let c = 3
console.log(a > b)
console.log(a < b)
console.log(a + b <= c)
console.log(a + b >= c)

• 条件（问号）操作符 ? :

var max = (num1 > num2) ? num1 : num2;

• *赋值操作符 = += -+ = /= %=

var x = 8;
x += 5;
console.log(x);  // 输出：13

var y = 10;
y -= 3;
console.log(y);  // 输出：7

var z = 8;
z *= 5;
console.log(z); // 输出：40

var w = 8;
w /= 4;
console.log(w); // 输出：2

var p = 8;
p %= 5;
console.log(p); // 输出：3

4.函数

函数实际上是对象，每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。

创建一个函数，在创建Funciton类型实例的同时还会创建一个原型对象，函数变量的prototype属性指向该原型对象。

4.1 函数声明和表达式

函数通常是使用函数声明语法定义的。

1.function xxx(){}

2.var xx = function(){}

3.var test3 = newFunction(“a”,“b”,“return a+b;”);//不常用，定义在方法内也是顶级作用域。

第一种和第二种方式基本一致，除了第二种解析方式是顺序解析，需要在调用的方法前定义。

4.2 arguments

函数内部的arguments是一个类数组对象，包含着传入函数中的所有参数。虽然 arguments的主要用途是保存函数参数，但是arguments存储的参数和形式参数存储的变量空间是独立的。arguments对象为其内部属性以及函数形式参数创建 getter和 setter方法。因此，改变形参的值会影响到 arguments对象的值，反之亦然。严格模式下不允许创建这些getter和setter，所以两者值互不影响。

functiontest(num1, num2) {
    'use strict';
    num1 = 11;
    console.log(arguments[0]);
}

4.3 this

函数内部的另一个特殊对象是 this ,其行为与 Java中的 this大致类似。this引用的是执行函数的环境对象（当在网页的全局作用域中调用函数时，this对象引用的就是window）。

全局范围内使用this，它指向全局对象。

this//浏览器里就是window
foo() //这种函数调用中的this也是全局对象，如果在严格模式下将是undefined
test.foo(); //this指向test对象
new foo();  //this指向新创建的对象

5.错误处理

7种错误类型:Error,EvalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError。

内置的Error对象具有两个标准属性name和message。

· name：错误名称

· message：错误提示信息

· stack：错误的堆栈

functionfn(){
  try {
    var x = 1;
    thrownewError('error');
  } catch (e) {
    console.log('x=' + x);
    return x;
  } finally {
    x = 2;
    console.log('x=' + x);
  }
}

上面代码说明，即使有return语句在前，finally代码块依然会得到执行，且在其执行完毕后，并不影响return语句要返回的值。

6.对象

无序属性的集合，其属性可以包含基本值、对象或者函数。

7.对象使用和属性

一种方式是使用对象字面量表示法。属性名可以是字符串也可以是Symbol类型的数据（后者必须使用方括号包含）

var person = {
  name : 'Howie',
  age : 26
};

另一种方法是通过构造函数

functionPerson(){
  this.name = 'Howie';
  this.age = 26;
}
var person = new Person();

构造函数一般首字母大写，如果构造函数没有参数，使用new时后面的括号也可以省略。

7.1 创建对象

functionPerson(name, age, job){
  this.name = name;
  this.age = age;
  this.job = job;
  //方法
  if (typeof this.sayName != "function"){
    Person.prototype.sayName = function(){
      alert(this.name);
    };
  }
}

7.2 class

classPerson{
  constructor(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
  }
  sayName(){
    alert(name);
  }
}
var friend = new Person("Nicholas", 29, "Software Engineer");

上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。
与函数一样，Class也可以使用表达式的形式定义。

const MyClass = classMe {
  getClassName() {
    return Me.name;
  }
};

在Class内部可以使用get和set关键字，定义访问器属性。

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}
inst.prop = 123;

如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

class Foo {
  static classMethod() {
    return'hello';
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod()
// TypeError: undefined is not a function
```javascript
父类的静态方法，可以被子类继承。

ES6为new命令引入了一个`new.target`属性，（在构造函数中）返回new命令作用于的那个构造函数。如果构造函数不是通过new命令调用的，`new.target`会返回undefined，因此这个属性可以用来确定构造函数是怎么调用的。

需要注意的是，子类继承父类时，`new.target`会返回子类。

利用这个特点，可以写出不能独立使用、必须继承后才能使用的类。
```javascript
classShape {
  constructor() {
    if (new.target === Shape) {
      throw new Error('本类不能实例化');
    }
  }
}
```javascript
### 共享变量
在构造函数原型上定义的属性可以被所有实例共享。

### 静态变量
ES6加入了static关键字。

构造函数原型链上定义的变量或属性只能通过构造函数访问，也可以当做是静态的。

### 私有变量
严格来讲,JavaScript 中没有私有成员的概念;所有对象属性都是公有的。不过,倒是有一个私有变量的概念。任何在函数中定义的变量,都可以认为是私有变量,因为不能在函数的外部访问这些变量。私有变量包括函数的参数、局部变量和在函数内部定义的其他函数。

我们把有权访问私有变量和私有函数的公有方法称为特权方法(privileged method)。有两种在对象上创建特权方法的方式。第一种是在构造函数中定义特权方法
```javascript
function MyObject(){
    //私有变量和私有函数
    var privateVariable = 10;
    functionprivateFunction(){
        returnfalse;
    }
    //特权方法
    this.publicMethod = function(){
        privateVariable++;
        return privateFunction();
    };
}

7.3静态私有变量

(function(){
    //私有变量和私有函数
    var privateVariable = 10;
    functionprivateFunction(){
        returnfalse;
    }
    //构造函数
    MyObject = function(){
    };
    //公有/特权方法
    MyObject.prototype.publicMethod = function(){
        privateVariable++;
        return privateFunction();
    };
})();

8.Object

JavaScript语言的所有对象都是由Object衍生的对象；所有对象都继承了Object.prototype的方法和属性，尽管它们可能被覆盖。

Object原型属性：

· Object.prototype.constructor：返回一个指向创建了该对象原型的函数引用

· Object.prototype.proto：非标准，一个对象的proto属性和自己的内部属性[[Prototype]]指向一个相同的值 (通常称这个值为原型),原型的值可以是一个对象值也可以是null(比如说Object.prototype.proto的值就是null)

9.闭包

可以理解成一个函数内的内部函数，它被创建在一个函数内部，引用这其外部函数的变量值。

var a = function(){
 varx = 1;
 return function(y){
​     console.log(x+=y);//外部函数的x值就被包裹在引用对象中
 }
}
var b = a();//实际上是返回function(y){...}的引用

b();//执行上面的引用，此时的x值变成了private的属性

闭包的两个作用：

1.可以读取函数体所在外部函数的局部变量

2.就是让这些变量的值始终保持在内存中

10.数组

数组是一组数据的集合，其中每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将数据存储在单个变量名下的优雅方式。

10.1 创建数组

var arr1 = [];     // 创建一个数组
var arr2 = [20];   // 创建一个包含1项数据为20的数组
var arr3 = ['lily','lucy','Tom'];  // 创建一个包含3个字符串的数组

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

10.2 数组方法

数组原型方法主要有以下这些：

join()：用指定的分隔符将数组每一项拼接为字符串
push()：向数组的末尾添加新元素
pop()：删除数组的最后一项
unshift()：向数组首位添加新元素
shift()：删除数组的第一项
slice()：按照条件查找出其中的部分元素
splice()：对数组进行增删改
filter()：过滤功能
concat()：用于连接两个或多个数组
indexOf()：检测当前值在数组中第一次出现的位置索引
lastIndexOf()：检测当前值在数组中最后一次出现的位置索引
every()：判断数组中每一项都是否满足条件
some()：判断数组中是否存在满足条件的项
includes()：判断一个数组是否包含一个指定的值
sort()：对数组的元素进行排序
reverse()：对数组进行倒序
forEach()：es5及以下循环遍历数组每一项
map()：es6循环遍历数组每一项
find()：返回匹配的项
findIndex()：返回匹配位置的索引
reduce()：从数组的第一项开始遍历到最后一项，返回一个最终的值
reduceRight()：从数组的最后一项开始遍历到第一项，返回一个最终的值
toLocaleString()、toString()：将数组转换为字符串
entries()、keys()、values()：遍历数组

二、TypeScript

1. 简介

TypeScript是JavaScript类型的超集（当前我们处于ES5），它可以编译成纯JavaScript。

TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验，无需运行程序即可修复潜在bug。

TypeScript支持未来的ES6甚至ES7。在TypeScript中，可以直接使用ES6的最新特性，在编译时它会自动编译到ES3或ES5。

TypeScript可以构建大型程序，并在任何浏览器、任何计算机和任何操作系统上运行，且是开源的。

2.function

2.1 定义

function function_name()
{
    // 执行代码
}

2.2 调用函数

function test() {   // 函数定义
    console.log("调用函数") 
} 
test()              // 调用函数

2.3函数返回值

function function_name():return_type { 
    // 语句
    return value; 
}

2.4 匿名函数

不带参数

var msg = function() { 
    return "hello world";  
} 
console.log(msg())

带参数

var res = function(a:number,b:number) { 
    return a*b;  
}; 
console.log(res(12,2))

2.5 构造函数

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

2.6 递归函数

function factorial(number) {
    if (number <= 0) {         // 停止执行
        return 1; 
    } else {     
        return (number * factorial(number - 1));     // 调用自身
    } 
}; 
console.log(factorial(6));      // 输出 720

2.7 函数重载

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 
 
function disp(x:any,y?:any):void { 
    console.log(x); 
    console.log(y); 
} 
disp("abc") 
disp(1,"xyz");

3.class

3.1 定义

class class_name { 
    // 类作用域
}

定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：

字段 ：字段是类里面声明的变量。字段表示对象的有关数据。

构造函数：类实例化时调用，可以为类的对象分配内存。

方法：方法为对象要执行的操作。

3.2 继承

TypeScript 支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类。

类继承使用关键字 extends，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。

TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 
 
class Circle extends Shape { 
   disp():void { 
      console.log("圆的面积:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.disp()

3.3 static 关键字

static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("num 值为 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法

3.4 类和接口

类可以实现接口，使用关键字 implements，并将 interest 字段作为类的属性使用。

interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 
 
var obj = new AgriLoan(10,1) 
console.log("利润为 : "+obj.interest+"，抽成为 : "+obj.rebate )

4. module

TypeScript 模块的设计理念是可以更换的组织代码。

模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。

两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。

5. 优点

• 代码的可读性和可维护性
• 在编译阶段就发现大部分错误，避免了很多线上bug
• 增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等

6. 缺点

• ts编译是需要时间的，这就意味着项目大了以后，开发环境启动和生产环境打包的速度就成了考验
• 一些JavaScript库需要兼容，提供声明文件，像vue2，底层对ts的兼容就不是很好。

三、总结

JavaScript，主要是表现网页的行为，换句话说，之前学习的HTML和CSS是静态的，但是JavaScript就是一个动态的；可以实现点击调用函数，鼠标移动展现效果，键盘按下调用事件等多种方式。当然了，JavaScript和TypeScript的内容比CSS和HTML还要多的多总的来说，短暂的学习掌握的东西不是很多，但是接触的东西却很多，平时的学习习惯也没有培养起来，学习的不到位，只是靠第一印象的记忆去运用，脑子里的东西难免有点少，希望接下来自己能更多的自学，更好的掌握这些知识并且运用。