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 ...
随机推荐
- 移动 WEB 开发之 阿里百秀移动端页面制作
一.技术选型 二.需求分析 1.页面布局分析 2. 屏幕划分 三.页面制作 1. 项目前期准备 搭建项目结构 创建 html 骨架结构以及引入相关样式 <head> <meta ch ...
- 【大型软件开发】浅谈大型Qt软件开发(四)动态链接库的宏冲突问题、COM组件开发的常见问题
最近工作的时候有一个链接库的对接工作,在对接时发生了一些小问题,这篇FAQ是办公室写这个库的工程师戴工写的,这里记录一下: 一.编译工程时报链接错误"不允许dllimport静态数据成员的定 ...
- day07-SpringMVC底层机制简单实现-03
SpringMVC底层机制简单实现-03 https://github.com/liyuelian/springmvc-demo.git 7.任务6-完成控制器方法获取参数-@RequestParam ...
- Snipaste下载安装(使用教程)
## Snipaste下载安装(使用教程)**一 简单介绍** Snipaste 是一个免费简单但强大的截图工具,也可以让你将截图贴回到屏幕上!下载并打开 Snipaste,按下 F1 来开始截图,再 ...
- 学习Java Day19
今天学习了包(package)将类组织在一个集合里,知道了如何导入类.
- FCoE测试重启调试记录
环境 CPU:Phytium,S2500/64 C00 内核版本:4.19.90-25.10 网讯网卡:txgbe 共两台设备,光纤直连 复现步骤 设备A.B分别执行以下操作,即可复现 modprob ...
- JZOJ 2020.07.28【NOIP提高组】模拟
2020.07.28[NOIP提高组]模拟 考试时状态不好,暴力不想打 结束前勉勉强强骗点分 已经不想说什么了······ \(T1\) 复制&粘贴2 逆推答案,枚举 \(k\),分类讨论 \ ...
- SQL 注入之:SQL Server 数据库
郑重声明: 本笔记编写目的只用于安全知识提升,并与更多人共享安全知识,切勿使用笔记中的技术进行违法活动,利用笔记中的技术造成的后果与作者本人无关.倡导维护网络安全人人有责,共同维护网络文明和谐. SQ ...
- dotnet总结
初衷: 搞了几年.Net ,一直没在博客园做过系统的总结,并打算按照下面的结构来写 语言层面 类型系统 [查看]: https://www.cnblogs.com/francisXu/p/136027 ...
- NameError: name '_name_' is not defined
if _name_ == '_main_': 错误的原因可能是name是双下划线.(明显下面的下划线要长一点) if __name_ == '_main__':