美文网首页
TypeSrcipt一起学习(三)

TypeSrcipt一起学习(三)

作者: 感觉不错哦 | 来源:发表于2018-11-21 15:03 被阅读41次

今天我们来学习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,好执行命令之后我运行一下



.好嘛,成功打印,因为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了。

下次有时间为大家编写TS中的正则以及面向编程继承等,这块是难点,我也需要更多的时间去研究学习,尽量使用我的文字就能让大家学会

相关文章

  • TypeSrcipt一起学习(三)

    今天我们来学习ts中的引用类型-数组 最近公司有点忙 很久没更新了 抱歉 初识引用类型 通过上面的案例,我们看到引...

  • TypeSrcipt一起学习(二)

    之前我们学习了TypeScript的数据类型,我们来看看TS中是如何声明函数的 我们先看看js中的函数声明 fun...

  • TypeSrcipt一起学习(一)

    Node.js之父瑞安达尔(Ryan Dahl)发布新的开源项目 deno,从官方介绍来看,可以认为它是下一代 N...

  • typesrcipt react项目实践小结

    安装 首先全局安装typescript模块。 安装react和reactDom依赖 安装ts-loader web...

  • 人一生的三次学习机会

    人的一生有三次学习机会, 第一次,自己学习; 第二次,跟着孩子一起学习; 第三次,跟着孙子一起学习。

  • {人们学会 理解《古兰经》,古兰经会教会人们一切}

    关于这个话题, 以下三个方面和大家一起学习教育孩子的一种理念: 第一、学习古兰经。 第二、学习圣训。 第三、谁和...

  • 室友一

    我们一起牵手去食堂 一起去宿舍,一起去学习 似乎还沉浸在高三的学习生活中 我们手牵着手,肩并肩的 一起迎过朝霞别过...

  • 三月里的自我反思

    从六月初毅然选择回来学习,到现在已经三个月了。在小组的这三个月时间里,我和小伙伴们一起去学习,一起健身,一起聚会组...

  • 一起学习小学数学设计(三)

    数学学习的需要是教学设计的起点。 一、学习是一种需要 根据马斯洛的需要层次理论,在学校环境中,影响学习动机的内驱力...

  • 三世同堂一起学习

    妈妈、妹妹和我与闺女一起小组聚会。 妈妈见面就对我们说,羡慕你们年轻啊,记性好,知识吸收快。我老了眼睛也不好使,记...

网友评论

      本文标题:TypeSrcipt一起学习(三)

      本文链接:https://www.haomeiwen.com/subject/wgjdfqtx.html