JavaScript&TypeScript学习总结

Javascript

1,JavaScript简介

JavaScript 是一门跨平台、面向对象的脚本语言,而Java语言也是跨平台的、面向对象的语言,只不过Java是编译语言,是需要编译成字节码文件才能运行的;JavaScript是脚本语言,不需要编译,由浏览器直接解析并执行。

JavaScript 是用来控制网页行为的,它能使网页可交互;那么它可以做什么呢?如改变页面内容、修改指定元素的属性值、对表单进行校验等。

2,JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种:

  • 内部脚本:将 JS代码定义在HTML页面中
  • 外部脚本:将 JS代码定义在外部 JS文件中,然后引入到 HTML页面中

2.1 内部脚本

在 HTML 中,JavaScript 代码必须位于 <script></script> 标签之间

代码如下:

alert(数据) 是 JavaScript 的一个方法,作用是将参数数据以浏览器弹框的形式输出出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    alert("hello js1");
</script>
</body>
</html>

2.2 外部脚本

第一步:定义外部 js 文件。如定义名为 demo.js的文件
demo.js 文件内容如下:

alert("hello js");

第二步:在页面中引入外部的js文件

在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="../js/demo.js"></script>
</body>
</html>

注意:

  • 外部脚本不能包含 <script> 标签

    在js文件中直接写 js 代码即可,不要在 js文件 中写 script 标签

  • <script> 标签不能自闭合

    在页面中引入外部js文件时,不能写成 <script src="../js/demo.js" />

3、JavaScript基础语法

3.1变量声明

JavaScript 中用 var 关键字(variable 的缩写)来声明变量。格式 var 变量名 = 数据值;。而在JavaScript 是一门弱类型语言,变量可以存放不同类型的值;如下在定义变量时赋值为数字数据,还可以将变量的值改为字符串类型的数

var test = 20;
test = "张三";

js 中的变量名命名也有如下规则,和java语言基本都相同

  • 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
  • 数字不能开头
  • 建议使用驼峰命名

JavaScript 中 var 关键字有点特殊,有以下地方和其他语言不一样

  • 作用域:全局变量

    {
        var age = 20;
    }
    alert(age);  // 在代码块中定义的age 变量,在代码块外边还可以使用
    
  • 变量可以重复定义

    {
        var age = 20;
        var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉
    }
    alert(age); //打印的结果是 30
    

3.2 数据类型

JavaScript 中提供了两类数据类型:原始类型 和 引用类型。

使用 typeof 运算符可以获取数据类型

alert(typeof age); 以弹框的形式将 age 变量的数据类型输出

原始数据类型:

  • number:数字(整数、小数、NaN(Not a Number))

    var age = 20;
    var price = 99.8;
    
    alert(typeof age); // 结果是 : number
    alert(typeof price);// 结果是 : number
    
  • string:字符、字符串,单双引皆可

    var ch = 'a';
    var name = '张三'; 
    var addr = "北京";
    
    alert(typeof ch); //结果是  string
    alert(typeof name); //结果是  string
    alert(typeof addr); //结果是  string
    
  • boolean:布尔。true,false

    var flag = true;
    var flag2 = false;
    
    alert(typeof flag); //结果是 boolean
    alert(typeof flag2); //结果是 boolean
    
  • null:对象为空

    var obj = null;
    
    alert(typeof obj);//结果是 object
    

3.3 运算符

JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的,不同的是 JS 关系运算符中的 =====,一会我们只演示这两个的区别,其他运算符将不做演示

  • 一元运算符:++,–

  • 算术运算符:+,-,*,/,%

  • 赋值运算符:=,+=,-=…

  • 关系运算符:>,<,>=,<=,!=,==,===…

  • 逻辑运算符:&&,||,!

  • 三元运算符:条件表达式 ? true_value : false_value

3.3.1 ==和===区别

概述:

  • ==:

    1. 判断类型是否一样,如果不一样,则进行类型转换

    2. 再去比较其值

  • ===:js 中的全等于

    1. 判断类型是否一样,如果不一样,直接返回false
    2. 再去比较其值

代码:

var age1 = 20;
var age2 = "20";

alert(age1 == age2);// true
alert(age1 === age2);// false

3.4 流程控制语句

JavaScript 中提供了和 Java 一样的流程控制语句,如下

  • if
  • switch
  • for
  • while
  • dowhile
3.6.1 if 语句
var count = 3;
if (count == 3) {
    alert(count);
}
3.6.2 switch 语句
var num = 3;
switch (num) {
    case 1:
        alert("星期一");
        break;
    case 2:
        alert("星期二");
        break;
    case 3:
        alert("星期三");
        break;
    case 4:
        alert("星期四");
        break;
    case 5:
        alert("星期五");
        break;
    case 6:
        alert("星期六");
        break;
    case 7:
        alert("星期日");
        break;
    default:
        alert("输入的星期有误");
        break;
}
3.6.3 for 循环语句
var sum = 0;
for (let i = 1; i <= 100; i++) { //建议for循环小括号中定义的变量使用let
    sum += i;
}
alert(sum);
3.6.4 while 循环语句
var sum = 0;
var i = 1;
while (i <= 100) {
    sum += i;
    i++;
}
alert(sum);
3.6.5 dowhile 循环语句
var sum = 0;
var i = 1;
do {
    sum += i;
    i++;
}
while (i <= 100);
alert(sum);

3.5 函数

函数(就是Java中的方法)是被设计为执行特定任务的代码块;JavaScript 函数通过 function 关键词进行定义。

3.7.1 定义格式

函数定义格式有两种:

  • 方式1

    function 函数名(参数1,参数2..){
        要执行的代码
    }
    
  • 方式2

    var 函数名 = function (参数列表){
        要执行的代码
    }
    

4,JavaScript常用对象

4.1数组

4.1.1数组定义

数组的定义格式有两种:

  • 方式1

    var 变量名 = new Array(元素列表); 
    

    例如:

    var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据(元素)
    
  • 方式2

    var 变量名 = [元素列表];
    

    例如:

    var arr = [1,2,3]; //1,2,3 是存储在数组中的数据(元素)
    

    注意:Java中的数组静态初始化使用的是{}定义,而 JavaScript 中使用的是 [] 定义

4.1.2 元素访问

访问数组中的元素和 Java 语言的一样,格式如下:

arr[索引] =;

代码演示:

 // 方式一
var arr = new Array(1,2,3);
// alert(arr);

// 方式二
var arr2 = [1,2,3];
//alert(arr2);

// 访问
arr2[0] = 10;
alert(arr2)
4.1.3 特点

JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的,而 JavaScript 是弱类型,所以可以存储任意的类型的数据。

例如如下代码:

// 变长
var arr3 = [1,2,3];
arr3[10] = 10;
alert(arr3[10]); // 10
alert(arr3[9]);  //undefined

上面代码在定义数组中给了三个元素,又给索引是 10 的位置添加了数据 10,那么 索引3索引9 位置的元素是什么呢?我们之前就介绍了,在 JavaScript 中没有赋值的话,默认就是 undefined

如果给 arr3 数组添加字符串的数据,也是可以添加成功的

arr3[5] = "hello";
alert(arr3[5]); // hello
4.1.4 属性

length 属性,该数组可以动态的获取数组的长度。而有这个属性,我们就可以遍历数组了

var arr = [1,2,3];
for (let i = 0; i < arr.length; i++) {
    alert(arr[i]);
}
4.1.5 方法
  • push 函数:给数组添加元素,也就是在数组的末尾添加元素

    参数表示要添加的元素

    // push:添加方法
    var arr5 = [1,2,3];
    arr5.push(10);
    alert(arr5);  //数组的元素是 {1,2,3,10}
    
  • splice 函数:删除元素

    参数1:索引。表示从哪个索引位置删除

    参数2:个数。表示删除几个元素

    // splice:删除元素
    var arr5 = [1,2,3];
    arr5.splice(0,1); //从 0 索引位置开始删除,删除一个元素 
    alert(arr5); // {2,3}
    

5、总结

我对JavaScript的感觉是 Java 是完全不同,不论是概念还是设计,只是名字比较像而已。但是基础语法类似,所以我们有java的学习经验,再学习JavaScript 语言就相对比较容易些。

Typescript

1、Typescript是什么

TypeScript是JavaScript类型的超集(当前我们处于ES5),它可以编译成纯JavaScript。

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

2、Typescript

2.1let 和 const

不使用var,使用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!

2.2解构

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


//解构数组
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);
          

2.3函数

使用完整函数类型定义


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

剩余参数

必要参数,默认参数和可选参数有个共同点:它们表示某一个参数。 有时,你想同时操作多个参数,或者你并不知道会有多少参数传递进来, 在TypeScript里,你可以把所有参数收集到一个变量里


//剩余参数,会被当做个数不限的可选参数。可以一个都没有,也可以有任意个
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));
          

2.4类class

类是属性(有些什么)和函数(能干什么)的集合,是生成对象(Object)或类实例的模板。(请注意,我们要用的Angular框架大量使用类)

类的定义和使用


//类的定义和使用
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,只能在该类内部可访问。


//访问权限
class MyInfo { //class是关键字,类名默认全部大写首字母
  public name: string; //public属性,可省略
  private _weather: string; //私有属性,习惯以_开头进行命名
  
  constructor(name: string, weather: string){ //构造函数,一般用于初始化
    this.name = name;
    this._weather = weather;
  }
  printInfo(): void { //其它函数
    this._test();
    console.log(`Hello, ${this.name}.`);
    console.log(`Today is ${this._weather}.`);
  }
  private _test(): void {
    console.log('You can not call me outside!');
  }
}

let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象
console.log(myData._weather); //error!
myData._test(); //error
myData.printInfo();
          

存取器-getter、setter

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


//getter和setter
class MyInfo { //class是关键字,类名默认全部大写首字母
  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);
          

静态属性

类中的属性或函数有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();
          

继承

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


class Animal {
  // 当构造函数传入的参数加上了“访问权限控制符”,则同时会声明同名类属性,并赋值
  constructor(public name: string) { }
  protected log(message: string) {
    console.log(message);
  }
  move(distanceInMeters: number = 0) {        
    this.log(`${this.name} moved ${distanceInMeters}m.`);//请注意name来自何处
    this.log('==============');
  }
}

class Horse extends Animal {
  constructor(name: string) { 
    super(name); // 通过super调用父类构造器
  }
  run(distanceInMeters = 50) { //自己独有的函数
    this.log("Clop, clop..."); 
    super.move(distanceInMeters); // 通过super调用父类方法
  }
}

class Eagle extends Animal {
  constructor(name: string) { super(name); }
  reborn() { //自己独有的函数
    console.log('Reborn? It is a joke, hahaha!');
  }

}

let tom: Horse = new Horse("Tommy the Palomino");
tom.run(8964);
let sam: Eagle = new Eagle("Sammy the Hawk");
sam.move(1024);//sam的move函数来自何处?
sam.reborn();
          

3、总结

Typescript是我学习使我们能够更早的发现错误,比使用JavaScript的开发更加便捷,效率也更高。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值