javaScript & TypeScript 学习总结

最新推荐文章于 2023-08-04 15:09:57 发布

七倾城

最新推荐文章于 2023-08-04 15:09:57 发布

阅读量841

点赞数

文章标签： javascript typescript 学习

本文链接：https://blog.csdn.net/weixin_52686749/article/details/125647648

版权

javaScript & TypeScript 学习总结

JavaScript笔记

1、概述

1.1概念

JavaScript 是脚本语言，是一种解释性脚本语言（代码不进行预编译）

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易入门。

1.2 作用

1、为网页添加各式各样的动态功能,

2、为用户提供更流畅美观的浏览效果。

通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1.3 用法

JavaScript通常简称为js,或者js脚本。

1.3.1 HTML页面中的javaScript

在html页面中的脚本必须位于script围堵标签之间，script标签放在head中可以，body中也可以，

放在最后也可以，对位置要求不严格。

我们可以在 HTML 文档中放入不限数量的script标签，通常的做法是把内容统一放入head或者页

面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

PS:有些案例中可能会在 script 标签中出现type=“text/javascript”。现在完全可以省略了，JavaScript已经是所有现代浏览器以及 HTML5 中的默认脚本语言。

1.3.2 外部的javaScript

可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。

当我们使用外部文件时，在HTML页面的script 标签的 “src” 属性中设置该 .js 文件：

myScript.js文件 //外部js文件中不能有script标签，直接编写JavaScript脚本代码即可 
function fun1(){ 
	alert("hello JavaScript"); 
}
<!DOCTYPE html> 
    <html>
    	<head>
    		<script src="js/myScript.js"/> 
        </head> 
        <body>
       		 <script>
       			 fun1();//调用脚本中的内容s 
        	</script> 
        </body> 
</html> 
外部文件引入一次即可，在head或者body中都可以。

PS:外部脚本不能包含 script标签。

1.4 JavaScript显示数据

使用window.alert()弹出框
使用document.write()将内容写入到html文档
使用console.log写入到浏览器控制台

2、JavaScript基本语法

JavaScript注释与java的单行和多行注释相同。

单行注释以 // 开头。

多行注释以 /* 开始，以 */ 结尾。

3、JavaScript基本语法

JavaScript 是一个脚本语言。它是一个轻量级，但功能强大的编程语言。

JavaScript语法跟Java很相似，但是也有区别。JavaScript是弱语言类型，即有些时候有些错误不影响运行，但是依然推荐按照规范去编写代码，语言弱，程序员不能弱。

3.1 JavaScript变量

声明变量的关键字：var

语法：var 变量名称；

var myCompany; //声明变量 
myCompany='重庆'; //赋值 
var x=5;//声明的同时赋值 
var y=6; 
var z=x+y;//变量也可以存储表达式

变量的命名规则

变量必须以字母开头
变量也能以 $ 和 _ 符号开头
变量名称对大小写敏感（y 和 Y 是不同的变量）
不能使用关键字保留字

变量的命名规范：

见名知意。例如：breadPirce,userService等，避免无意义的a,b,c等
推荐驼峰命名法，即第一个单词的首字母小写，以后每个单词的首字母大写。例如lastName

3.2 JavaScript的语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执

行前对所有代码进行编译。

JavaScript中也有分支结构和循环结构，语法与java类似，此处就不再深入讲解。细节上的内容等我们

后面使用过的时候再给大家单独指出。

PS：一般一行只写一条语句，每句结尾编写分号结束。

3.3 JavaScript的数据类型

3.3.1字符串string

字符串是存储字符的变量。字符串可以是引号中的任意文本。必须使用单引号或双引号；

var gameName="王者荣耀"; 
var hairstylist='tony';
//PS：注意引号嵌套 
var message1='我的发型师是"tony"老师'; 
var message2="我的发型师是'tony'老师";

3.3.2 数字Number

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

var breadPrice=15.9; 
var gameLevel=66; 
//极大或极小的数字可以通过科学计数法来书写： 
var myMoney1=666e5; //66600000 
var myMoney2=-666e-5; //-0.00666

3.3.3 布尔Boolean

只能有两个值：true 或 false。

var isUnderstand=true; 
var isSingle=false;

3.3.4 空Null

var email=null;

3.3.6 未定义Undefined

表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。

共有4中情况会出现undefifined的值（有些知识语法还未学习，但是不影响理解，大家根据学过的java知

识对比理解）

1、变量声明且没有赋值；

var obj; 
alert(obj);//obj值为undefined

2、获取对象中不存在的属性时；

var obj; 
alert(obj.name);//报错信息： "Uncaught TypeError: Cannot read property 'name' of undefined"

3、函数需要实参，但是调用时没有传值，形参是undefifined；

4、函数调用没有返回值或者return后没有数据，接收函数返回的变量是undefifined。

function printNum(num){ 
    alert(num); 
}
var result=printNum();//调用函数未传递参数，执行函数的时候num的值是undefined
alert(result);//result的值也是undefined，因为printNum()没有返回值

3.4 JavaScript中的运算符

算数运算符：+ - * / % 、 ++ 、 –

赋值运算符：= 、 +=、 -= 、*= 、 /= 、 %=

字符串的连接符：+

逻辑运算符： && || ！

条件运算符：？:

比较运算符： == 、！= 、 > 、<、 >= 、 <=

以上运算符的运算规则与 java 一样，在这里不再赘述。接下来强调两个新的比较运算符：

比较运算	描述
===	绝对等于（值和类型均相等）
！==	不绝对等于（值和类型有一个不相等，或两个都不相等）

var x=5; 
var res=(x===5); // true 
res=(x==='5');// false 
res=(x!==5); // false 
res=(x!=='5');// true

4、JavaScript对象

4.1 JavaScript的String对象

var str="我喜欢看海贼王,最喜欢的海贼是\'大剑豪\'索隆"; 
//注意：字符串中出现的\'是一个字符，转义为一个单引号 
console.log(str); 
//获取字符串的长度：，切记：所有转移符号的长度都算一个，即\'长度为1 
console.log("字符串的长度="+str.length);//22

4.2 JavaScript的Array对象

Array 对象用于在变量中存储多个值，也就是数组。

4.2.1 声明数组

//声明数组的方式1:使用Array对象，与java语言中的ArrayList相似
var names=new Array();
names[0]="啊吗粽";
names[1]="老谭胡说";
names[2]="徐大虾";
names[3]="云流";
//获取数组的长度:数组名称.length 
for(var i=0;i<names.length;i++){
    document.write(names[i]+"<br/>");
}
//声明数组的方式2:
var cars=["大众", "保时捷" , "法拉利"];
for(var i=0;i<cars.length;i++){
    document.write(cars[i]+"<br/>");
}
//声明数组的方式3:
var classes=new Array( "1班","2班","3班");
for(var i=0;i<classes.1ength;i++){
    document.write(classes[i]+"<br/>");
}

4.2.2 数组长度length属性

PS：大家需要注意的length是数组的属性，不是方法，所以调用的时候没有括号。

var nameArr=["宝玉","黛玉","湘云"]; 
var len=nameArr.length; //获取数组的长度

4.3 JavaScript的Date对象

4.3.1 创建日期对象

var date1 = new Date(); 
var date2 = new Date(milliseconds); 
var date3 = new Date(dateString); 
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

4.3.2 日期对象的常用方法

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)
setFullYear()	设置 Date 对象中的年份（四位数字）
setHours()	设置 Date 对象中的小时 (0 ~ 23)
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)
setMonth()	设置 Date 对象中月份 (0 ~ 11)。

4.4 JavaScript的Math对象

与java中的Math相似，跟数学相关的内容都这里。有很多方法属性与java中的也类似。

4.4.1 Math常用方法

var pi=Math.PI;//返回圆周率

4.4.2 Math常用方法

var num=Math.random();// 返回 0 ~ 1 之间的随机数。 
var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。 
var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值

5、 JavaScript的函数

5.1 JavaScript的常用全局函数

5.1.1 isNaN(param)

用于检查其参数是否是非数字值。

是数值的返回false，不是数值返回true。

console.log(isNaN(666));//false 
console.log(isNaN(1+2));//false 
console.log(isNaN("hello"));//true

5.1.2 parseFloat(String)

可解析一个字符串，并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。

console.log(parseFloat("66"));//66 
console.log(parseFloat("199.99"));//199.99 
console.log(parseFloat("1024 2048 4096"));//1024 
console.log(parseFloat("128"));//128 
console.log(parseFloat("10年"));//10 
console.log(parseFloat("今天是8号"));//NaN

字符串中只返回第一个数字。
开头和结尾的空格是允许的。
如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。

5.1.3 parseInt(string,radix)

可解析一个字符串，并返回一个整数。

参数	描述
string	必需。要被解析的字符串。
radix	可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。

当忽略参数 radix , JavaScript 默认数字的基数如下:

如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。
如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八制或十六进制的数字。
如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

5.2 JavaScript的自定义函数

与java中学过的方法类似。

5.2.1 自定义函数语法

使用function关键字定义函数。

function 自定义函数名称(参数列表){ 
    //函数体 
}

5.2.2 自定义函数实例

注意：1、函数的形参直接写参数名称，不需要声明类型，即不需要写var.

2、函数的返回取决于函数体中是否有return关键字。

//函数:类似java语言中的方法
//function声明函数的关键字
//声明无参无返回值的函数
function print(){
    document.write( "helloworld--function");
}
//声明有参数有返回值的函数
/*
*参数:直接写从参数名称即可，不能有类型var
*返回值: 有return关键字， 而且return后面有内容，则认为函数有返回值，否则没有返回值;
*/
function getSum(a,b){
    var he=a+b;
    return he;
}
//调用函数--无参无返回值，直接函数名称()调用
var res=getSum(1,2.3);
document.write("<br/>结果是"+res+"<br/>");

5.3 JavaScript的匿名函数

<script>
    //匿名函数
    var fun=function(){
        document.write("helloWorld--fu-------------<br/>");
    }
	var fun2=function(a,b){
        document.write( a+"------fun2--------"+b+"<br/>");
    }
    var fun3=function(a,b){
        document.write(a+"------fun3--------"+b+"<br/>");
        return a+b;
    }
    //调用匿名函数
    fun();
	fun2(1,3);
	var result=fun3(10,10);
	alert(result);

6、JavaScript变量的作用域

6.1 局部JavaScript变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问。

在不同的函数中可以声明名称相同变量，因为局部变量出该函数就失效了。

6.2 全局JavaScript变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

<script>
    var userId=1001;//全局变量:整个script脚本中都可用，要注意先后顺序
	function printMessage() {
        var userName = "李白";//局部变量:只在当前函数中生效
        document.write(userId);//使用全局变量的时候，保证使用(方法被调用)之前定义并赋值
        document.write(userName) ;/ /使用局部变量
    }
PrintMessage();
</script>
<script>
    function printMessage2(){
    var userName2 = "李白2";
    document.write(userId);//这里也可以使用userId
    // document .write (userName1);//错误:调用不到printMessage函数中的局部变量
    documen.write(userName2); //正确:可以使用自己函数中的局部变量
	}
</script>

6.3 变量的生命周期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

7、JavaScript自定义对象

对象也是一个变量，但对象可以包含多个值（多个变量）。

7.1 定义对象

对象中可以有属性，也可以有方法

//定义对象
var student={name : "宝玉"，age :18, height:178.5};
//定义JavaScript 对象可以跨越多行，空格跟换行不是必须的:
var student2={
    name: "张大仙",
    age:30,
    height:180,
    work:function(){
    	alert("千局乐不疲，唯我张大仙")
	}
};

7.2 对象的属性

可以说 “JavaScript 对象是变量的容器”。

但是，我们通常认为 “JavaScript 对象是键值对的容器”。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为对象属性。

7.3 访问对象的属性

//访问对象的属性:
//方式1:
var n=student.name ;
//方式2:
var n2=student [ "name"] ;
alert(n+"--"+n2) ;

7.4 访问对象的方法

var student2={
    name: "张大仙",
    age:30,
    height:180,
    work:function(){
    	alert("千局乐不疲，唯我张大仙")
	}
//访问对象的方法
student2.work();

TypeScript总结

由于本人在课下自学过程中，并未对 TypeScript深入了解，故以下内容都是关于 TypeScript一些简单知识以及老师网站（qige.io）中的内容。

1、TypeScript介绍

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

2、TypeScript的优缺点

2.1 TypeScript优点

它提供了可选静态类型的优点。在这里，Typescript提供了可以添加到变量、函数、属性等的类型。
Typescript能够编译出一个能在所有浏览器上运行的JavaScript版本。
它使用基于类的面向对象编程。
TypeScript总是在编译时强调错误，而JavaScript在运行时指出错误。

2.2 TypeScript的缺点

如果我们在浏览器中运行TypeScript应用程序，需要一个编译步骤将TypeScript转换成JavaScript。
要使用任何第三方库，必须使用定义文件。并不是所有第三方库都有可用的定义文件。
TypeScript不支持抽象类。

3、TypeScript的基础用法

3.1 数据类型定义

不使用var（类似于C语言中全部变量的概念，但在弱语言中我们多次声明一个变量，不一定会报错，所以就会引出一些莫名其妙的错误），使用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!

3.2 解构数组

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

//解构数组
let input = [1，2];
let [first, second] = input;//注意使用[]
console.log(first); // 1
console.log(second); // 2

3.3 函数定义

TypeScript为JavaScript函数添加了额外的功能，让我们可以更容易地使用。

3.3.1 完整函数

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

3.3.2 可选参数函数

//可选参数，必须放在必要参数后
function asd(firstName: string, lastName?: string) {
  if(lastName) {
      return `Hello ${firstName} ${lastName}!`;
  }
  return `Hello ${firstName}!`;
}
console.log(asd('zby'));
console.log(asd('zby', 'qqc'));
console.log(asd('zby', 'qqc', 'Yuan'));//参数数量超过

3.3.3 默认参数函数

//默认参数，不必在必要参数后
function asd(firstName: string, lastName = 'Yuan') {
  return firstName+" "+lastName;
}
console.log(asd('zby'));			//返回"zby Yuan"
console.log(asd('zby', 'qqc'));		//返回"zby qqc"
console.log(asd('zby', 'qqc', 'Yuan'));//参数数量超过

3.3.4 剩余参数

剩余参数，会被当做个数不限的可选参数。可以一个都没有，也可以有任意个

function asd(firstName: string, ...lastName: string[]) {
  return firstName+" "+lastName.join(" ");
}
console.log(asd('a','s','d'));
console.log(greeting('a'));

3.3.5 箭头函数

简化函数定义、解决this问题（不用绑定this）。

//两个及以上的参数，函数体代码多于一行,则必须用{}包裹，且显式给出return
let add = (n1: number, n2: number) => {
  let sum = n1 + n2;
  return sum;
}
console.log(add(1, 2));

3.4 类

类是属性（有些什么）和函数（能干什么）的集合，是生成对象（Object）或类实例的模板。

//类的定义和使用
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('yxl', 'sunny'); //使用new关键字生成对象，即该类的实例
myData.printInfo();