JavaScript&TypeScript学习总结
一、JavaScript学习总结
1.什么是JavaScript
JavaScript是一种用来编写脚本的编程语言,它们可以被直接写在网页的 HTML中,在页面加载的时候自动执行,通常我们在html文件底部的<script>
进行代码的编写
2.变量
变量本质上是存储值的容器,我们通常使用关键词var或者let来创建变量
let a = 'Hello!'; // 定义变量,并且赋值
alert(a); // 显示变量a的内容Hello!
3.变量命名
JavaScript 的变量命名有两个限制:
1.变量名称必须仅包含字母、数字、符号$和_。如果命名包括多个单词,通常采用驼峰式命名法(camelCase),即除了第一个单词,其他的每个单词都以大写字母开头: myFirstName。
2.首字符必须非数字。
4.操作符
操作符一般可分为三类,如下所示:
1.一元操作符:++ 、 --
2.布尔操作符(比较结果为 Boolean 类型 ):&& 、||、 !
3.算术操作符:
- 加法 +,
- 减法 -,
- 乘法 *,
- 除法 /,
- 取余 %,
- 求幂 **.
这里我们简单的举一个取余的例子,如下:
alert( 5 % 2 ); // 显示5除以2的余数,很显然答案为1
5.遍历语句
首先我们先定义一个数组,如下:
var num = ['1', '2', '3', '4'];
1.for in语句(着重下标)
for(var n in num){
console.log(colors[n]);
}
2.for of语句(着重元素)
for(var n of num){
console.log(n);
}
3.forEach语句
colors.forEach(n => console.log(n));
var other = colors.map(n=>n+'X');//map在遍历的同时还返回另一个数组
console.log(other)
6.函数
函数是程序的主要“构建模块”。函数使该段代码可以被调用很多次,而不需要写重复的代码,我们可以通过下面的函数示例来了解一下:
function sum(n1, n2) { //该函数的功能为返回输入两个数的和
return n1 + n2;
}
var result = sum(3, 2);
alert(result);
7.对象
JavaScript 中对象则用来存储键值对和更复杂的实体,我们常将数据和方法封装在对象中,创建对象的方法有两种,如下所示:
let user = new Object(); // 第一种方法
let user = { //第二种方法
};
但是,当我们需要创建很多的对象时,会产生很多重复代码,此时,我们可以使用工厂模式的一种变体,示例如下:
function createObject(){
};
var object1 = createObject();
var object12 = createObject();
var object12 = createObject();
8.数组
1.数组的创建
数组的创建一般用如下两种方法:
car a = [1,2,3];//方法一
const a = new Array(1,2,3);//方法二
2.数组的方法
(1)队列方法
方法 | 作用位置 | 作用 |
---|---|---|
push |
数组末 | 压入 |
pop |
数组末 | 弹出 |
shift |
数组头 | 弹出 |
unshift |
数组头 | 压入 |
(2)slice()方法
它可以截取数组的部分元素,然后返回一个新的数组
var arr = [1,2,3,4,5];
arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3即 [1,2,3]
arr.slice(3); // 从索引3开始到结束即[4,5]
(2)splice()方法
它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素
var arr = [1,2,3,4,5];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'a', 'b');
二、TypeScript学习总结
1.什么是TypeScript
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
2.变量命名
在TypeScript里,我们通常使用let,const来定义变量,而不用var
例如
let user = 'Tom';
3.函数
1.定义函数
使用完整函数定义通常有两种方法,一种是命名函数,一种是匿名函数:
//命名函数
function add(x: number, y: number): number {
return x + y;
}
//匿名函数
let myAdd = function(x: number, y: number): number { return x + y; };
2.可选参数
输入多余的(或者少于要求的)参数是不允许的此时我们用?表示可选的参数,而可选参数,必须放在必要参数后
function x(a: string, b?: string) {
if (b) {
return a + ' ' + b;
} else {
return a;
}
}
let x1 = x('a', 'cat');
let x2 = x('cat');
3.默认参数
我们可以给函数的参数添加默认值,TypeScript会将添加了默认值的参数识别为可选参数,而默认参数,不必在必要参数后
function x(a: string, b: string = 'cat') {
return a + ' ' + b;
}
let x1 = x('a', 'b');
let x2 = x('a');
4.剩余参数
当涉及到多个参数时,我们可以使用...rest的方式获取函数中的剩余参数,剩余参数可以一个都没有,也可以有任意个
function x(a: string, ...restOfB: string[]) {
return a + " " + restOfB.join(" ");
}
let x1 = x("a", "b", "c", "d");
5.箭头函数
我们可以使用“箭头”( =>)定义函数,示例如下:
let x = () => 'Hello';
console.log(x());
4.类
1.类的定义
在面向对象语言中,类是一种面向对象计算机编程语言的构造,是创建对象的蓝图,描述了所创建的对象共同的属性和方法
class Hello
{
// 静态属性
static cname: string = "Hello";
// 成员属性
greeting: string;
// 构造函数
constructor(message: string) {
this.greeting = message;
}
// 成员方法
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
2.类的属性
类中的属性和函数都有访问权限
- public修饰的属性或方法是共有的 在 任何地方 都能访问
- protected修饰的属性或方法是私有的 只有 本类中访问
- private修饰的属性或方法是受保护的 在 本类 和 子类 中 能够访问
3.存取器
在 TypeScript 中,我们可以通过getter和setter方法来实现数据的封装和有效性校验,防止出现异常数据
4.类的继承
继承是一种联结类与类的层次模型。指的是一个类(称为子类、子接口)继承另外的一个类(称为父类、父接口)的功能,并可以增加它自己的新功能的能力,继承是类与类或者接口与接口之间最常见的关系。在 TypeScript 中,我们可以通过 extends
关键字来实现继承
5.模块
- 对于一些比较大型的项目,我们需要使用模块进行管理。
- 模块可分为全局模块和文件模块。
- 每个 .ts 文件就是一个模块,我们通常使用关键词export,import 来对模块进行操作
JavaScript&TypeScript学习总结的更多相关文章
- TypeScript学习指南--目录索引
关于TypeScript: TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程. TypeS ...
- TypeScript 学习一 参数,函数,析构表达式
1,TypeScript是由谷歌开发的,并且新出的Angular2框架就是谷歌公司由TypeScript语言编写的,所以现在TypeScript是有微软和谷歌一起支持的: 2,TypeScript在j ...
- Typescript 学习笔记一:介绍、安装、编译
前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...
- typeScript学习随笔(一)
TypeScript学习随笔(一) 这么久了还不没好好学习哈这么火的ts,边学边练边记吧! 啥子是TypeScript TypeScript 是 JavaScript 的一个超集,支持 es6 标准 ...
- TypeScript学习文档-基础篇(完结)
目录 TypeScript学习第一章:TypeScript初识 1.1 TypeScript学习初见 1.2 TypeScript介绍 1.3 JS .TS 和 ES之间的关系 1.4 TS的竞争者有 ...
- TypeScript学习_入门向
TypeScript学习_入门向 1-TypeScript简介 首先官网祭天 ---> https://www.tslang.cn/ TypeScript 是 JavaScript 的一个超集, ...
- 正则表达式(javascript)学习总结
正则表达式在jquery.linux等随处可见,已经无孔不入.因此有必要对这个工具认真的学习一番.本着认真.严谨的态度,这次总结我花了近一个月的时间.但本文无任何创新之处,属一般性学习总结. 一.思考 ...
- 大量Javascript/JQuery学习教程电子书合集
[推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
- [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
- JavaScript 基础学习1-day14
JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...
随机推荐
- spring.jackson.default-property-inclusion 不生效问题分析
背景 项目里每个返回体里都有@JsonInclude(JsonInclude.Include.NON_NULL) 这个注解,也就是不返回null字段 想有没有办法全局配置一下,这样就不用每个类都加这个 ...
- Spring异步Async和事务Transactional注解
Spring开发中我们我们常常用到@Transaction和@Async,但这2个注解加在一起很多的开发者不敢用,担心事务不生效.下面我们就仔细讲解一下这2个注解同时运用,文章用3个场景讲述它们之间的 ...
- Mybatis数据库批量操作
1:新增 首先,Mysql插入一条记录返回主键对Mybatis版本要求低,而批量插入返回带主键的,需要升级到3.3.1 以及以上的版本. 1.1:Mysql 上图需要注意加入useGenerate ...
- HTTPS基础原理和配置 - 1
近期又碰到了SSL相关的事情, 就心血来潮开个新专题 - <HTTPS基础原理和配置> 本文是第一篇文章, 主要介绍SSL TLS加密协议的相关内容. 加密协议历史概要 SSL TLS加密 ...
- CSP-J初赛知识点
就要初赛了,知识点还没怎么看,今天花一个小时来整理一下,希望大家在初赛中有个好成绩## 计算机常识IT : Information Technology 信息技术代别 年代 ...
- 加密,各种加密,耙梳加密算法(Encryption)种类以及开发场景中的运用(Python3.10)
不用说火爆一时,全网热议的Web3.0区块链技术,也不必说诸如微信支付.支付宝支付等人们几乎每天都要使用的线上支付业务,单是一个简简单单的注册/登录功能,也和加密技术脱不了干系,本次我们耙梳各种经典的 ...
- JZOJ 1082. 【GDOI2005】选址
\(\text{Problem}\) 很久以前,在世界的某处有一个形状为凸多边形的小岛,岛上的居民们决定建一个祭坛,居民们任务祭坛的位置离岛的顶点处越远越好. 你的任务是求凸多边形内一点,使其与各顶点 ...
- 【5】java之日期处理类
一.Date 类 在 Java 里提供有一个 java.util.Date 类,可以直接获取当前的日期时间. 范例:获取当前的日期时间 public class TestDemo { public ...
- Linux route命令修改默认路由优先级
(自测可用)摘自:https://www.cnblogs.com/luoyang712/p/11953256.html 在多个网络连接的情况下,比如以太网和WIFI同时存在的时候,路由表中就会存在多个 ...
- (2) 使用phpstudy 实现局域网内远程访问本地ThreeJS示例
1 下载phpStudy 作为本地开发服务器 hpStudy下载后解压安装.安装完成后启动服务.如下: 2 打开phpStudy的安装目录,进入到安装目录的 PHPTutorial \ WWW ...