JavaScript & TypeScript

---

一、JavaScript 是什么？

JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。

1.1 使用环境

对于JavaScript语言，可以在浏览器中运行，也可以脱离浏览器运行(需要下载Node.js。
下载链接：Node.js

1.2 基本语法

这里其他网址上有很多教程，写的比作者本人好，我这里就不再赘述了。本人这次主要想分享的就是一些我认为有意思的点。
链接：
棋哥教学网
菜鸟教程

1.3 语句

与C语言不同的是多了for-in for-of
举个例子

//for-in，专注下标
for(var c in colors){
  console.log(colors[c]);
}
//for-of，专注元素
for(var c of colors){
  console.log(c);
}

这是C语言所没有的，for in和for of 明显降低了代码量。在其他语言也有同样的遍历方式比如：C#。
另外还有一种高级遍历

//高级遍历
colors.forEach(c => console.log(c));//foreach直接可以取出里面的元素并且赋值给c,并输出
var other = colors.map(c => c + 'X');//map不仅遍历，还返回另一个数组
console.log(other);

显然这种高级遍历更加便捷。

1.4 创建对象

这里有三种方法：

//方式一new
var person = new Object();//生成空对象
person.name = 'Elon Musk';//设置对象的属性
person.age = 46;
person.job = 'SpaceX Rocket';
person.sayName = function(){    //设置对象的方法/函数，注意此处
    console.log(this.name);
};

这里明显感觉js的代码很奇怪，明明person里面没有那些属性，怎么还可以直接.出来呢？这就是JS的一个特点：随意。只有运行的时候才会报错。

//方式二字面量
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');

注意：前面的几种方式仅仅只能定义一个对象，要是要创建多个对象就显得十分的鸡肋。这里我们采用工厂模式，通过函数的形式来定义对象。

1.5 数组

这里需要注意的就是有两对很重要的函数push(队尾插入)和unshift（队首插入），pop(队尾弹出)和shift(队首弹出)

var count = colors.unshift('red', 'green'); // 推入两项
var item = colors.shift(); // 前端弹出第一项
colors.push('black'); //推入另一项
colors.push('red', 'green'); //推入两项

1.6 链式语法

链式语法已变得非常流行。实际上这是一种非常容易实现的模式。基本上，你只需要让每个函数返回 this代表包含该函数的对象，这样其他函数就可以立即被调用。看看下面的例子。

链式语法
var bird = {//定义对象字面量
    catapult: function() {
      console.log( 'Yippeeeeee!' );
      return this;//返回bird对象自身
    },
    destroy: function() {
      console.log( "That'll teach you... you dirty pig!" );
      return this;
    }
  };
  bird.catapult().destroy();//先执行第一个函数再执行第二个函数

这种链式语法，要注意的是函数的返回值一定得是this,这样才能返回后继续调用其它函数。

1.7 闭包

闭包就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配，也就说在函数返回后仍然可以使用里面的局部变量。
直接上代码：

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

var scope = 'global scope';	//全局变量
function checkScope(){
    var scope = 'local scope';	//局部变量
    function f(){
        console.log('hello');
        return scope;       
    }
    return f;
}
var hehe=checkScope()();
console.log(hehe);//返回值为local scope而非global scope

通过这两个例子，我个人的感觉是闭包就是在函数调用的过程中，把整个函数当作一个对象，然后里面的局部变量成为了其属性，这样，再次调用函数时，之前的数据就不会丢失。

二、TypeScript 是什么？

TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。我的理解是TypeScript 就是在JavaScript之上的一个装饰器，让它变得没有那么没有规则，最终，代码会转化成JS。

2.1 基本语法

同样的由于作者水平有限，双手奉上链接。
棋哥教学网
菜鸟教学
作者这里也只是针对某些点，表达自己的观点。

2.2 let 和 const

使用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!

明显可以感觉到这才是应该正确的代码，不像JS那么没有规则。

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);//这里的others成为了一个数组
console.log(...input);//...是把数组的元素提取出来
//展开
let newArr = [89, ...others, 18];
console.log(newArr);
//解构对象
let o = {
  a: "foo",
  b: 12,
  c: "bar"
};
let {a, b} = o;//注意使用{}，且变量名需与对象中道属性名一致
console.log(a, b);

注意的就是…others是将数组的元素提取出来，而others却是一个数组。

2.4 函数

可选参数

//可选参数，必须放在必要参数后
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!
          

这里注意的是``中，无论你写的什么，都会原样输出，当遇到$的时候得到变量里的值。

总结

由于时间的关系，对于JS和TS并没有经历太多深入地学习，不过我认为，编程这种技术就得从实战中学，在写代码的时候有需求，才会去进一步地了解，去深入。下一步，准备继续学习angular。