今天我们来学习ts中的引用类型-数组
最近公司有点忙 很久没更新了 抱歉
初识引用类型
let ts = {
name:'typescript',
age:18,
saySometing:function(){
console.log('热爱前端技术')
}
}
console.log(ts.name)
ts.saySometing()
通过上面的案例,我们看到引用类型是一种复合的数据类型,引用类型中封装了很多对属性,每一对属性都有属性名和属性值。属性名是字符串,属性值是任意类型的数据。可以通过变量名和属性名获取属性的值或者调用属性的方法。
在TypeScript中也给我们提供了一些引用类型,例如:Array(数组)、String(字符串)、Date(日期对象)、RegExp(正则表达式)等。我们慢慢来学习。
声明数组的方法
声明数组跟声明一个普通变量是一样的,都是通过 var let 关键字实现的,只不过数组的类型说明符比较复杂而已。
let arr1:number[ ] //声明一个数值类型的数组
let arr2:Array<string> //声明一个字符串类型的数组
给数组赋值
1.字面量赋值法
什么叫字面量?就是我们通过=号进行同类型的赋值,其实js在背后默默支持我们,省去了大量的内部操作
//定义一个空数组,数组容量为0
let arr1:number[] = []
//定义一个数组时,直接给数组赋值
let arr2:number[] = [1,2,3,4,5]
根据前面我们打的基础再加上小伙伴完美的js能力看懂这个简直不要太简单,此时我们调皮一下,更改一下代码
//定义一个空数组,数组容量为0
let arr1:number[] = ['ts']
//定义一个数组时,直接给数组赋值
let arr2:number[] = [1,2,3,4,5]
console.log(arr1,arr2)
注意我把第一个数组加入了一个字符串的值,此时TS文件是报错的,但我们不管,我们就要让它编译js,好执行命令之后我运行一下
![](https://img.haomeiwen.com/i14714949/cb51b3b52a7572f2.png)
.好嘛,成功打印,因为js不在乎这些,js对数组的定义只是一系列对象有序的集合,管你什么字符串,你来函数老子都要的起
所以ts的强类型声明机制有效的过滤了我们编程的数据类型,好处很多,以后大家在使用的时候自然会发现
那我们如果也想像js一样,放什么类型都可以勒,我们给arr声明any属性就可以了
let arr1:any[] = ['ts',1,2,function(){}]
完全没有报错,好 这就是字面量赋值,通过等号赋值
let arr4:Array<boolean> = [ true,false]
使用Array声明也是一样的赋值
构造函数赋值
在 TypeScript 中使用 Array 这个引用类型来表示数组的,那么每一个数组都是 Array 类型的实例。那么,我们在创建数组的时候也可以使用构造函数来进行赋值。
//声明一个Number数组 值为空
let arr1:number[] = new Array()
//声明一个Number数组 值为右边
let ara2:number[] = new Array(1,2,3,4,5)
是不是没什么难度呢?太easy了
这里为大家介绍一下元组
元祖是一种特殊的数组,元祖类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。比如,你可以定义一对值分别为string和number类型的元祖。元祖在实际开发中使用的非常少,大家了解一下就可以了,不做过多介绍。
//声明一个元祖类型
let x : [string,number]
//正确的初始化
x = ['hello',10]
//错误的初始化方法 已报错
x = [10,'hello']
阵列解构
ES6的结构赋值不晓得小伙伴们了不了解,不了解可以看下我的ES6入门篇,针对新手讲解
列阵结构就是指分手一个实体的结构。在阵列的上下文中使用时TypeScript支持解构
var arr:number[] = [12,13]
var[x,y] = arr
console.log(x)
console.log(y)
有点类似ES6的结构赋值哈, 我们来看看js的代码
//Generated by typescript
var arr = [12, 13];
var x = arr[0], y = arr[1];
console.log(x);
console.log(y);
如果你还是不理解TS的一些写法原理,可以多看看编译之后的js代码,就会理解许多
TS中的数组方法与JS是相同的,简单写个例子
let arr:number[]=[1,2,3,4,5]
console.log(arr.filter(v=>v%2==0))
用了filter数组方法过滤了一下value 看不懂我们可以看看js代码
"use strict";
var arr = [1, 2, 3, 4, 5];
console.log(arr.filter(function (v) { return v % 2 == 0; }));
很简单吧,其实就是js啦,还能for循环遍历
let arr:number[]=[1,2,3,4,5]
//既然是数组就能遍历
for(var i in arr){
console.log(i) //for in 循环的是索引 0 1 2 3 4
}
for(var j of arr){
console.log(j) //for of 循环的是内容 1 2 3 4 5
}
TS中的字符串
字符串的两种类型
基本类型字符串:由单引号或者双引号括起来的一串字符串。
引用类型字符串:用new 实例化的 String类型。
其实我觉得大佬完全可以看官方文档学习,不用在这边看我废话,打扰打扰
let names:string='TS'
let sex:String = new String('nan')
字符串同样使用字面量与构造函数可以赋值哦
let names:string='TS'
let sex:String = new String('nan')
console.log(names,sex) //TS [String: 'nan']
编译打印之后,两种命名方式的内容有点差别,所以一般我们方便运用都是直接复制,而不用构造函数的方法,获取字符串的长度以及方法都是与js相同的,我们简单看两个例子
let names:string='TS'
console.log(names.length) //2
var s:string='S'
console.log(names.indexOf(s))//1 找到返回下标 找不到返回-1
哎呦这啥子玩意嘛,这么简单的嘛!!好嘛 就是这么简单
最后我们来看看日期对象
let d:Date = new Date()
console.log(d) //当前时间
上面是不传递参数,我们来传递参数耍耍
传递整数
传递一个整数,这个整数代表的是距离1970-01-01 00:00:00的毫秒数(具体为什么是这个时间,小伙伴可以自己百度一下)。例如:传入参数为1000,将创建一个表示1970-01-01 00:00:01的日期对象。
我们举个例子,传递一个整数,看一下结果。
let d:Date = new Date(1000)
let da:Date = new Date(2000)
console.log(d) //1970-01-01T00:00:01.000Z
console.log(da) //1970-01-01T00:00:02.000Z
传递字符串
如果传递一个表示日期的字符串,就会生成相对应的日期对象。字符串的格式常用:yyyy/MM/dd hh:mm:ss,yyyy-MM-dd hh:mm:ss,yyyy-MM-ddThh:mm:ss等,具体可以参看下面的例子。
let d1:Date = new Date('2018/09/06 05:30:00')
let d2:Date = new Date('2018-09-06 05:30:00')
let d3:Date = new Date('2018-09-06T05:30:00')
console.log(d1) //2018-09-05T21:30:00.000Z
console.log(d2) //2018-09-05T21:30:00.000Z
console.log(d3) //2018-09-05T21:30:00.000Z
当然,他们打印出来的结果时完全相同的,所以在开发中你不用太过于纠结使用哪种方式进行声明。
传递表示年月日时分秒的变量
let d:Date = new Date(year,month,day,hours,minutes,seconds,ms);
year 表示年份,4位数字。
month表示月份,数值是0(1月)~11(12月)之间的整数。
day 表示日期。数值是1~31之间的整数。
hours 表示小时,数值是0-23之间的整数。
minutes 表示分钟数,数值是0~59之间的整数。
seconds 表示秒数,数值是0~59之间的整数。
ms 表示毫秒数,数值是0~999之间的整数。
至于Date类型的方法,跟JavaScript完全一样,所以我就不在重复讲述了,要不就变成讲JavaScript了。
网友评论