JavaScript&TypeScript学习总结

目录

一、JavaScript&TypeScript简介

1、JavaScript简介

2.TypeScript简介

二、JavaScript

1、基本语法

1.1、标识符

1.2、变量

1.3操作符

2、函数

3、数组

 三、TypeScript

1、基本语法

1.1、变量

2、解构

3、函数

3.1函数定义

3.2调用函数

3.3函数返回值

3.4带参数函数

---

一、JavaScript&TypeScript简介

1、JavaScript简介

JavaScript 是一个面向对象的脚本语言。它是作为开发页面的而出名，但是它也被用到了很多非环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

2.TypeScript简介

是一种由微软开发的支持ES6标准的编程语言,它是Angular2的开发语言。它可以编译成纯JavaScript，可以在任何浏览器，任何计算机和任何操作系统上运行，并且是开源的。

二、JavaScript

1、基本语法

1.1、标识符

1、标识符第一个字符必须是字母、下划线_或美元符号$，其后的字符可以是字母、数字或下划线、美元符号

2、自定义的标识符不能和 JavaScript 中的关键字及保留字同名，但可以包含关键字或保留字

3、标识符不能包含空格

4、标识符不能包含+、-、@、#等特殊字符

1.2、变量

JavaScript 变量是存储数据值的容器，原始数据类型为booeal,string,number,undefined,null,any，其中原始数据类型为any时这个变量可以是任意类型

//Number类型
var num = 1;
var num2 = 1.2;
var num3 = NaN;

//string类型
var str = "abc";

//boolean类型
var flag = true;

//定义null, undefined
var obj = null;
var obj2 = undefined;
var obj3;

1.3操作符

1、一元操作符

++ 自增，-- 自减

2、布尔操作符

&& 所有操作数都为true时，才返回true，|| 只要有一个操作数为true，就返回ture，！ 逻辑非

3、算术操作符

+ 加法，- 减法，* 乘法，/ 除法，% 取余

关系操作符 < 小于，> 大于，<= 小于等于，>= 大于等于，== 检查其两个操作数是否相等，===  检查其两个操作数是否相等(包括类型)，!= 检查其两个操作数是否不相等，!== 检查其两个操作数是否不相等(包括类型)

4、赋值操作符

= 用于变量赋值，+= 加法赋值，-+ 减法赋值，*= 乘法赋值，/= 除法赋值，%= 取模赋值

2、函数

JavaScript 函数是被设计为执行特定任务的代码块。JavaScript 函数会在某代码调用它时被执行。

function myFunction(p1, p2) {
    return p1 * p2;              // 该函数返回 p1 和 p2 的乘积
}

JavaScript 函数语法，JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

函数调用，函数中的代码将在其他代码调用该函数时执行

当 JavaScript 到达 return 语句，函数将停止执行。如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。函数通常会计算出返回值。这个返回值会返回给调用

3、数组

1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表];

//定义数组方式
var arr1 = new Array(1,2,3);
var arr2 = new Array(5);
var arr3 = [1,2,3,4];
var arr4 = new Array();

 三、TypeScript

1、基本语法

1.1、变量

不使用var，使用let或const申明变量，并加上类型说明，且作用域为块级即以{}为界

//number类型
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;

//Boolean类型
let flag: boolean = true;

//字符串
let name: string = 'abc'

//null和undefined
let num: number = undefined;
let u: undefined;
let u: void;

2、解构

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 输出10
console.log(b); // 输出20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 输出10
console.log(b); // 输出20
console.log(rest); // 输出数组后面的值[30, 40, 50]

({a, b} = {a: 10, b: 20});
console.log(a); // 输出10
console.log(b); // 输出20

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});

3、函数

函数是一组一起执行一个任务的语句。可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的，但在逻辑上，划分通常是根据每个函数执行一个特定的任务来进行的。

3.1函数定义

函数就是包裹在花括号中的代码块，前面使用了关键词 function

function 函数名()
{
    // 执行代码
}

3.2调用函数

函数只有通过调用才可以执行函数内的代码。

函数名()

3.3函数返回值

函数返回执行结果

function 函数名():返回类型{ 
    // 语句
    return 返回值; 
}

3.4带参数函数

在调用函数时，向函数传递值，这些值被称为参数。参数可以在调用函数中使用

function 函数名( 参数1 [:数据类型], 参数2 [:数据类型]) {   
}