TypeScript数组的定义与使用详解

 更新时间:2022年09月16日 16:31:31   作者:我是X大魔王  
数组对象是使用单独的变量名来存储一系列的值,数组非常常用,数组是具有连续存储位置的相似类型元素的同质集合。数组是用户定义的数据类型。数组是一种数据结构,我们在其中存储相似数据类型的元素

基本定义

声明数组时直接初始化

// 基本定义
let arr:number[] = [1,2,3];
let arrS: string[] = ["1","2"]

如果数组声明时未设置类型,则会被认为是 any 类型,在初始化时根据第一个元素的类型来推断数组的类型。

访问数组

Array对象

我们也可以使用 Array 对象创建数组。

Array 对象的构造函数接受以下两种值:

  • 表示数组大小的数值。
  • 初始化的数组列表,元素使用逗号分隔值。

声明数组时指定数组大小

var arr:number[] = new Array(10);  
for(var i = 0; i<arr.length; i++) { 
    arr[i] = i * 2 
    console.log(arr[i]) 
}

两种定义方式

let arr1:Array<number> = [1,2,3,4,5]
let arr2:number[] = new Array(1,2,3);
console.log("arr1===="+arr1);
console.log("arr2===="+arr2);

声明多维数组(含泛型)

有一个例子说的挺好的,这里直接用了:

定义一个多维数组:

var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]

普通版

var arr:number[][] = [[1,2,3],[4,5,6]]  
console.log(arr[0][0]) 
console.log(arr[0][1]) 
console.log(arr[0][2]) 
console.log(arr[1][0]) 
console.log(arr[1][1]) 
console.log(arr[1][2])

泛型版

// 声明多维数组
let arr:number[][] = [[1,2,3], [4,5,6]];
// 泛型形式声明多维数组(联合类型)
let arr1:Array<Array<number | string>> = [[1,2,3,"123"],[4,5,6,"789"],[]];
console.log(arr)
console.log(arr1)

类数组

// 类数组
function Arr(... args:any):void{
    console.log(arguments) //类数组,arguments是参数
    let arr:IArguments = arguments  //用IArguments去接收
}
Arr(1,2,3)  //[Arguments] { '0': 1, '1': 2, '2': 3 }

数组解构

// 数组解构
var arr = [12, 13];
var x = arr[0], y = arr[1]; // 将数组的两个元素赋值给变量 x 和 y
console.log(x);
console.log(y);

通过接口描述数组

// 通过接口描述数组
interface NumberArray{
    [index:number]:number;  //只要索引的类型是数字,那么值的类型也必须是数字,换成string也是一样的
}
let arr:NumberArray = [1,2,3];
console.log(arr);

数组迭代

使用for…of来玩

// 数组迭代
var j:any; 
var nums:number[] = [1,2,3,4] 
for(j in nums) { 
    console.log(nums[j]) 
}

到此这篇关于TypeScript数组的定义与使用详解的文章就介绍到这了,更多相关TypeScript数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS实现匀速运动的代码实例

    JS实现匀速运动的代码实例

    这篇文章主要介绍了JS实现匀速运动的代码实例,有需要的朋友可以参考一下
    2013-11-11
  • JS实现点击事件统计的简单实例

    JS实现点击事件统计的简单实例

    下面小编就为大家带来一篇JS实现点击事件统计的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Javascript实现跨域后台设置拦截的方法详解

    Javascript实现跨域后台设置拦截的方法详解

    这篇文章主要给大家介绍了关于Javascript实现跨域后台设置拦截的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。
    2017-08-08
  • js数字滑动时钟的简单实现(示例讲解)

    js数字滑动时钟的简单实现(示例讲解)

    下面小编就为大家带来一篇js数字滑动时钟的简单实现(示例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JavaScript实现网页视频添加水印的示例代码

    JavaScript实现网页视频添加水印的示例代码

    这篇文章主要介绍了通过js给网页视频添加水印,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-02-02
  • 小程序实现手写签名

    小程序实现手写签名

    这篇文章主要为大家详细介绍了小程序实现手写签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • js实现模态框拖拽

    js实现模态框拖拽

    这篇文章主要为大家详细介绍了js实现模态框拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 客户端限制只能上传jpg格式图片的js代码

    客户端限制只能上传jpg格式图片的js代码

    客户端限制只能上传jpg格式图片的js代码,对用户体验较好,适合网页中只能使用jpg格式图片的情况。
    2010-12-12
  • js实现文字闪烁特效的方法

    js实现文字闪烁特效的方法

    这篇文章主要介绍了js实现文字闪烁特效的方法,使用style对象来设置css属性,结合定时器就可以实现该功能,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • js模拟点击事件实现代码

    js模拟点击事件实现代码

    在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的“提交”按钮来提交表单。上代码吧
    2012-11-11

最新评论