JavaScript&TypeScript 学习总结

以下为本人web应用基础课程期末大作业。

在学习之前，我们要先配置环境。

安装NodeJS后，以管理员身份运行终端，使用npm -g install ts-node typescript命令进行全局安装。

如在VS Code中开发，请安装TSLint、TypeScript Hero、Bracket Pair Colorizer等插件。新建一个.ts后缀的文件，任意写一段JS代码，点击运行试试是否配置成功。

然后就可以开始我们的学习啦。

 1.变量

js脚本的变量是一个相对松散类型的，就是说你可以将各种数据赋给变量都没问题，那么该怎么定义变量呢？定义变量的方式有三种，var 、let 、const 关键字。

var a = "hh";
console.log(a);
var b = 3;
console.log(b);

let a = '哈哈';
console.log(a);
let b = 4;
console.log(b);
const c = "5";
console.log(b+c);
let d = b+a;
console.log(d);

看上边这两段代码，我们将任意类型的数据变量都可以赋给var、let、const，那他们之间有什么区别呢？var类型声明的是局部变量，只在其定义的范围内（在一个{}语句块内）生效，所以如果你在外部定义他就是一个全局变量，而我们在编程过程中应该尽量避免全局变量的出现，所以尽量少使用。那应该用什么呢？没错，我们还介绍了两个关键字，我们一起来看看吧。const 与c语音中类似，定义一个常量数据，后续无法修改；let就是var的一个升级版，你可以先将数字赋给var，然后再用字符串给先前定义的var修改变量的值，但一个let变量只有一种类型（没有特别设置情况下），所以该怎么定义变量你学会了吗😄

注：操作符与c语言相同

2.数据结构

数组：

//方式1
var colors = new Array('red', 'blue', 'green');
//方式2
var colors = ['red', 'blue', 'green'];
console.log(colors[1]);
var a = [1,'hh',{firstName: 'c', lastName: 'h'}];

在上述代码中，前两行是定义数组的两种方式，完整版是方式1，但我们在定义数组一般会使用方式2（别问，就是少了几个字）。之前我们也说过，var中可以用不同类型变量给不同类型变量赋值，在数组中也是一样的，就像最后一行一样，可以把数值，字符串，甚至是一个对象赋给数值（但不推荐用对象赋值）。

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

我们在有时候为了方便，会把数组解构，取到其中的数据，上面的案例相信你看一眼就能懂。

这里还要介绍数组方法里一个非常强大的函数splice();

对于这样一个splice（a,b,c...）,你可以把他理解成从第a个位置开始，删除b个元素，然后插入c...（c后面有多少插入多少）。

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

类和对象：

class MyInfo {
  name: string; //属性
  weather: string; //属性
  
  constructor(name: string, weather: string){ 
    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');
myData.printInfo();

class是定义类的关键字，类名默认全部大写首字母（驼峰命名），下面两行是类的属性。

constructor为构造函数，一般用于初始化。如果没有，TS会自动生成一个，以备用new创建类实例时调用。下面一行为类的功能函数，在面向对象编程中，必须要通过定义类的对象才能使用，类的功能函数，即最后两行内容。

相比与类来说，对象的定义与使用更为宽泛。

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

由于使用var定义对象，因此我们可以随意的设置对象的属性和功能函数，不必像上一个案例那样，只能按照类的定义填写对象的属性。（虽然这样简单，但在操作过程中如果要大量定义一个相同类型的对象，那么class是一个不错的选择。）

3.语句

分支语句

if  else ，switch 都和c语音中的定义相同，这里不在赘述。但有一点需要注意的。

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

循环语句

循环语句中大多也和c语言中相同。其中特别说明一下for语句。

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

对于前三种遍历来说，在本质上最终都是转化成了第一种遍历方式，因此在对数据量很大的数组进行操作时，我们还是会使用第一种遍历方式，节省时间开销。

那么我们来分析一下最后这种高级遍历。他是对于每一个（foreach）colors的元素，都把此元素赋值给c，然后c进行一个箭头函数 ，箭头（=>）后面是函数的语句，此案例中因为只有一条语句，所以没加区域符{}，如果你在使用是需要执行多条语句一定不要忘记加{}哦。后面我们再继续说箭头函数，这里继续往下看，对于数组的map()操作，他将每一个元素赋值给c然后c又是执行一个箭头函数，在每个元素后面加'X',然后把新的数组返回给other，聪明的你应该会想到other里边的元素都什么样了吧。other=['redX','greenX','blueX','brownX']。 

4.函数

函数（ function）对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。

function sum(num1, num2) {
    return num1 + num2;
}
var result = sum(3, 2);
console.log(result);

函数在定义时不必指定是否返回值。实际上，任何函数在任何时候都可以通过 return 语句后跟要返回的值来实现返回值。 

//可选参数，必须放在必要参数后//默认参数，不必在必要参数后
function greeting(firstName: string, secondName?: string, lastName = 'hcp') {
  if(secondName) {
      return `Hello ${firstName} ${lastName}!`;
  }
  return `Hello ${firstName}!`;
}
console.log(greeting('QiGe'));
console.log(greeting('QiGe', 'Wang'));
console.log(greeting('QiGe', 'Wang', 'Yong'));
          

这个函数中，第二个参数为可选参数，就是如果你输入也可以，不输入也不会使用；第三个参数是默认参数 ，如果不输入会默认一个值，如果输入就会修改这个默认值。

然后让我们一起来学一下刚才心心念念的箭头函数吧。

//无参数，函数体代码只有一行，则该行结果即为函数返回值
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关键字；解决this问题。

5.事物处理

在我们实际开发过程中，需要在html界面上获取事件，需要用到document对象

let btn = document.getElementById('myButton');
let btn = document.getElementByTagName('button');
let btn = document.getElementByName('myButton');
let btn = document.getElementByClassName('myButton');

document对象的一些操作会根据html界面中的id、标签、name、类名等来获取到该元素。

然后就是对这些元素添加响应事件。

let btn = document.getElementById('mybtn');
btn.onclick = function () {
    alert('hh');
}

以上就是本人学到js，ts知识，在使用过程中可以融合使用的，相信对你也能有一定帮助。