目录
三、JavaScript & TypeScript 学习总结
一、JavaScript
JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都可以使用 JavaScript。
运行JavaScript有多种方式,可以直接在浏览器的控制台编写运行;也可以编写一个独立的js文件,然后在Html文件中引入,(这两种方法由浏览器解释执行,是以前唯一的方式)。也可以用编辑软件如Webstrom或VSCode编写独立的js文件,由安装好的Node.js解释执行运行
1.新建一个js文件
安装Node.js,用VSCode新建一个js文件,注意添加js的后缀
文件内容如下:
输出结果:
创建js新文件成功
2.基本语法
标识符
第一个字符只能是字母、下划线( _ )或美元符号( $ )之一;
其他字符可以是字母、下划线、美元符号或数字。
js标识符采用 驼峰大小写格式,也就是第一个字母小写,剩下的每个单词的首字母大写
注释
js的注释是在要注释的语句后面加“//”
例如
可以选中要添加的区域使用ctrl+/快捷键进行注释,再次使用ctrl+/快捷键取消注释的部分
语句
js对每条语句加不加分号不做要求,即加不加分号对程序运行都没有影响
变量
ECMAScript 的变量是松散类型的,即可以用来保存任何类型,每个变量仅仅是一个用于保存值的占位符而已。
定义变量时要使用 var
操作符,后跟变量名
如上所示,定义了一个变量,并没有明确规定变量的类型,他可以输出字符串、数字、小数等不同类型的值
用 var
操作符定义的变量将成为定义该变量的作用域中的局部变量,在函数中使用 var
定义一个变量,那么这个变量在函数退出后就会被销毁,例如
变量在函数里面被定义,在函数外不能输出变量的值
3.操作符
一元操作符 ++ --
从上可以看出js对一元操作符 ++ --和c语言、c++的用法一样
布尔操作符 && || !
除下列值为假外其余皆为真: false、null、undefined、''、0、NaN
示例如下:
从上可以看出js对 && || !的语法和c语言、c++一样
算术操作符 + - * / %
示例:
如上所示,js的几个不同种类的变量直接相加时会默认把不同类型的变量当作字符串相“加”,对几种不同的变量直接相减会直接输出为NaN;要对变量进行我们平时所认为的加减乘除运算要对想得出的结果加上括号:()
关系操作符 <> <=>= == === != !==
示例如下:
===为全等(值和类型)
关系操作符和c语言用法相同,js其他操作符如条件(问号)操作符和赋值操作符和c语言用法基本相同
4.语句
示例如下
注意:多用{}符号,不要节省{}符号,for-of、forEach
能简洁的遍历集合中的元素
5.函数
新建一个js函数
一定要有function
js在函数在定义时不必指定是否返回值
如上图,没有指定返回值照样能正常输出
js函数不介意传递进来多少个参数,也不在乎传进来参数是什么数据类型。js参数在内部是用一个数组来表示的。函数接收到的始终都是这个数组,而不关心数组中包含哪些参数(如果有参数的话)。如果这个数组中不包含任何元素,无所谓;如果包含多个元素,也没有问题。
如果在 ECMAScript中定义了两个名字相同的函数,则该名字只属于后定义的函数,如下图
输出的是值是传递值到后定义的函数后在输出结果
6.对象Object
对象 Object
是ECMAScript 中使用最多的一个类型。我们常将数据和方法封装在对象中。
创建对象一般使用字面量的方法,如下
用字面量的方法有更好的结构性,便于观察;当使用这种方法在使用同一个接口创建很多对象,会产生大量的重复代码,工厂模式的一种变体可以解决这个问题,如下
定义了一个函数,函数里面定义了对象,并把函数参数的值赋给对象,就可以直接定义很多变量即相同类型的对象并把每个对象对应的值传递给该函数
7.数组Array
ECMAScript 中的数组与其他多数语言中的数组有着相当大的区别。ECMAScript 数组的每一项 可以保存任何类型的数据; 数组的大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。
常用的创建数组的方法如下
元素联合
如上图使用元素联合可以对数组内的所有元素后加上一个符号
堆栈方法
js中用 push()
和 pop()
方法实现“后进先出”
队列方法
用shift()移除数组中的第一个项并返回该项,同时将数组长度减1
unshift()
方法能在数组前端添加任意个项并返回新数组的长度,如下图
反转数组项
用reverse()反转数组项
slice()分片方法
基于当前数组中的一或多个项创建一个新数组。 slice()
方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下, slice()
方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。
8.链式语法
每个函数返回 this
代表包含该函数的对象
示例如下
对这个对象而言,其他函数可以快速调用,且可以连续快速的调用对象的函数
9.闭包
当在一个函数内定义另外一个函数就会产生闭包,闭包就是:函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。
二、Typescript
TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript;TypeScript给JavaScript加上可选的类型系统,给JavaScript加上静态类型后,就能将调试从运行期提前到编码期,诸如类型检查、越界检查这样的功能才能真正发挥作用。TypeScript可以构建大型程序,并在任何浏览器、任何计算机和任何操作系统上运行,且是开源的。
1.let 和 const
TS使用let或const申明变量,并加上类型说明,且作用域为块级即以{}为界
示例如下
如果用let定义变量则变量的值可以改变,用const定义的变量的值不可以改变,无论是用let还是const定义变量,都有声明变量的类型。
2.解构
将对象、数组中的元素拆分到指定变量中,方便使用
对数组进行解构时要注意加[ ]号,对对象解构时要加{ },用解构可以较为灵活的选择想要的数组或对象的一部分的值。
3. 函数
建两个简单的函数如下
可以看出TS定义的函数有完整的参数和返回类型,且没有返回类型时TS将自动进行类型推断,TS不像JS定义函数那样“随意”,TS调用函数时要有函数变量所对应变量的类型和数量,否则会报错
可选参数
示例如下
可选参数变量定义时要加上问号,可选参数必须放在必要参数后, 在调用函数时可以不对可选参数进行赋值,但必须对必要参数赋值
默认参数
示例如下
默认参数不必在必要参数后 ,在调用函数时可以不对默认参数赋值,也可以对默认参数赋值,对默认参数赋值后默认参数就会变成新定义的参数,且调用函数时定义的变量数不能少于必要参数,也不能多于所有参数加起来的数量
剩余参数
必要参数,默认参数和可选参数有个共同点:它们表示某一个参数。TS里 可以用剩余参数把所有参数收集到一个变量里
剩余参数,会被当做个数不限的可选参数。可以一个都没有,也可以有任意个
箭头函数
示例如下
使用箭头函数可以简化函数的定义
4.类class
类的定义和使用
从上图可以看出TS类的定义和使用跟c++十分相似,TS定义类名时默认全部大写首字母,且TS也有构造函数,在定义类的对象时要与构造函数相对应,也可以在类中定义函数,对象可以直接调用类所定义的函数
类的属性和函数的访问权限
和c++类似类中的属性和函数都有访问权限,默认为public即全局可访问,protected在类的内部和其子类的内部可访问,private只能在该类内部可访问。
存取器-getter、setter
在类外部时,建议设置getter和setter操作其private属性,public属性也可以设置,如下图
readonly定义的变量只可以读
静态属性
类中的属性或函数用static修饰时可直接使用而不需要实例化
继承
C++使用parent来继承类,TS与C++不同,通过extends关键字继承其它类,从而成为其子类,继承类可以访问父类的public和protected变量
5.模块Module
对于大型项目需要使用模块进行管理,每个 .ts 文件就是一个模块,通过 export 来对外部模块暴露元素,通过 import 来引入模块。
三、JavaScript & TypeScript 学习总结
HTML 定义了网页的内容,CSS 描述了网页的布局,JavaScript 控制了网页的行为,JavaScript 是 Web 的编程语言。用JavaScript与CSS、HTML相结合,可以设计出更完善、功能更强大的网页。JavaScript的语言语法相对很多语言设计更简单随意,但JavaScript只在运行时报错,且无法检查错误。所有可以用Typescript代替JavaScript进行编程,Typescript的结构更严谨,更有层次性,对对象、类、函数的定义更明确;Typescript在编写程序时如果错误会直接提醒错误,便于修改代码和改进程序,Typescript可以用VScode的插件直接转化成JavaScript文件,在与HTML、CSS相结合。