【TypeScript入门】TypeScript入门篇——数组

最新推荐文章于 2024-05-21 00:45:00 发布
最新推荐文章于 2024-05-21 00:45:00 发布
阅读量2.9k 收藏 13
点赞数 20
分类专栏： # TypeScript 文章标签： javascript typescript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxt19980308/article/details/128409114
版权

数组对象是使用单独的变量名来存储一系列的值。数组非常常用。

Array 对象

数组解构

数组迭代

多维数组

数组在函数中的使用

数组方法

假如你有一组数据，存在单独变量如下所示：

var s1="CSDN";
var s2="QQ";
var s3="WeChat";

如果有 10 个、100 个这种方式就变的很不实用，这时我们可以使用数组来解决：

var sites:string[]; 
ss = ["CSDN","QQ","WeChat"]

TypeScript 声明数组的语法格式如下所示：

var array_name[:datatype];        //声明 
array_name = [val1,val2,valn..]   //初始化

或者直接在声明时初始化：

var array_name[:datatype] = [val1,val2…valn]

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

实例

创建一个 number 类型的数组：

var numlist:number[] = [2,4,6,8]

整个数组结构如下所示：

索引值第一个为 0，我们可以根据索引值来访问数组元素：

var sites:string[]; 
sites = ["CSDN","QQ","WEchat"] 
console.log(sites[0]); 
console.log(sites[1]);

输出结果为：

CSDN
QQ

以下实例我们在声明时直接初始化：

var nums:number[] = [1,2,3,4] 
console.log(nums[0]); 
console.log(nums[1]); 
console.log(nums[2]); 
console.log(nums[3]);

输出结果为：

1 
2 
3 
4

Array 对象

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

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

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

实例

指定数组初始化大小：

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

输出结果为：

0
2
4
6

以下实例我们直接初始化数组元素：

var sites:string[] = new Array("CSDN","QQ","WeChat","Cocos") 
 
for(var i = 0;i<sites.length;i++) { 
        console.log(sites[i]) 
}

输出结果为：

CSDN
QQ
WeChat
Cocos

数组解构

我们也可以把数组元素赋值给变量，如下所示：

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

输出结果为：

12
13

数组迭代

我们可以使用 for 语句来循环输出数组的各个元素：

var j:any; 
var nums:number[] = [1001,1002,1003,1004] 
 
for(j in nums) { 
    console.log(nums[j]) 
}

输出结果为：

1001
1002
1003
1004

多维数组

一个数组的元素可以是另外一个数组，这样就构成了多维数组（Multi-dimensional Array）。

最简单的多维数组是二维数组，定义方式如下：

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

实例

定义一个二维数组，每一个维度的数组有三个元素。

var multi:number[][] = [[1,2,3],[23,24,25]]  
console.log(multi[0][0]) 
console.log(multi[0][1]) 
console.log(multi[0][2]) 
console.log(multi[1][0]) 
console.log(multi[1][1]) 
console.log(multi[1][2])

输出结果为：

1
2
3
23
24
25

数组在函数中的使用

作为参数传递给函数

var sites:string[] = new Array("Google","Runoob","Taobao","Facebook") 
 
function disp(arr_sites:string[]) {
        for(var i = 0;i<arr_sites.length;i++) { 
                console.log(arr_sites[i]) 
        }  
}  
disp(sites);

输出结果为：

Google
Runoob
Taobao
Facebook

作为函数的返回值

function disp():string[] { 
        return new Array("Google", "Runoob", "Taobao", "Facebook");
} 
 
var sites:string[] = disp() 
for(var i in sites) { 
        console.log(sites[i]) 
}

输出结果为：

Google
Runoob
Taobao
Facebook

数组方法

下表列出了一些常用的数组方法：

序号方法 & 描述实例
1.concat()

连接两个或更多的数组，并返回结果。

 
var alpha = ["a", "b", "c"]; 
var numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric); 
console.log("alphaNumeric : " + alphaNumeric );    // a,b,c,1,2,3
2.every()

检测数值元素的每个元素是否都符合条件。

 
function isBigEnough(element, index, array) { 
        return (element >= 10); 
} 
        
var passed = [12, 5, 8, 130, 44].every(isBigEnough); 
console.log("Test Value : " + passed ); // false
3.filter()

检测数值元素，并返回符合条件所有元素的数组。

 
function isBigEnough(element, index, array) { 
   return (element >= 10); 
} 
          
var passed = [12, 5, 8, 130, 44].filter(isBigEnough); 
console.log("Test Value : " + passed ); // 12,130,44
4.forEach()

数组每个元素都执行一次回调函数。

 
let num = [7, 8, 9];
num.forEach(function (value) {
    console.log(value);
});

编译成 JavaScript 代码：

var num = [7, 8, 9];
num.forEach(function (value) {
    console.log(value);  // 7   8   9
});
5.indexOf()

搜索数组中的元素，并返回它所在的位置。

如果搜索不到，返回值 -1，代表没有此项。

 
var index = [12, 5, 8, 130, 44].indexOf(8); 
console.log("index is : " + index );  // 2
6.join()

把数组的所有元素放入一个字符串。

 
var arr = new Array("Google","Runoob","Taobao"); 
          
var str = arr.join(); 
console.log("str : " + str );  // Google,Runoob,Taobao
          
var str = arr.join(", "); 
console.log("str : " + str );  // Google, Runoob, Taobao
          
var str = arr.join(" + "); 
console.log("str : " + str );  // Google + Runoob + Taobao
7.lastIndexOf()

返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

 
var index = [12, 5, 8, 130, 44].lastIndexOf(8); 
console.log("index is : " + index );  // 2
8.map()

通过指定函数处理数组的每个元素，并返回处理后的数组。

 
var numbers = [1, 4, 9]; 
var roots = numbers.map(Math.sqrt); 
console.log("roots is : " + roots );  // 1,2,3
9.pop()

删除数组的最后一个元素并返回删除的元素。

 
var numbers = [1, 4, 9]; 
          
var element = numbers.pop(); 
console.log("element is : " + element );  // 9
          
var element = numbers.pop(); 
console.log("element is : " + element );  // 4
10.push()

向数组的末尾添加一个或更多元素，并返回新的长度。

 
var numbers = new Array(1, 4, 9); 
var length = numbers.push(10); 
console.log("new numbers is : " + numbers );  // 1,4,9,10 
length = numbers.push(20); 
console.log("new numbers is : " + numbers );  // 1,4,9,10,20
11.reduce()

将数组元素计算为一个值（从左到右）。

 
var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); 
console.log("total is : " + total );  // 6
12.reduceRight()

将数组元素计算为一个值（从右到左）。

 
var total = [0, 1, 2, 3].reduceRight(function(a, b){ return a + b; }); 
console.log("total is : " + total );  // 6
13.reverse()

反转数组的元素顺序。

 
var arr = [0, 1, 2, 3].reverse(); 
console.log("Reversed array is : " + arr );  // 3,2,1,0
14.shift()

删除并返回数组的第一个元素。

 
var arr = [10, 1, 2, 3].shift(); 
console.log("Shifted value is : " + arr );  // 10
15.slice()

选取数组的的一部分，并返回一个新数组。

 
var arr = ["orange", "mango", "banana", "sugar", "tea"]; 
console.log("arr.slice( 1, 2) : " + arr.slice( 1, 2) );  // mango
console.log("arr.slice( 1, 3) : " + arr.slice( 1, 3) );  // mango,banana
16.some()

检测数组元素中是否有元素符合指定条件。

 
function isBigEnough(element, index, array) { 
   return (element >= 10); 
          
} 
          
var retval = [2, 5, 8, 1, 4].some(isBigEnough);
console.log("Returned value is : " + retval );  // false
          
var retval = [12, 5, 8, 1, 4].some(isBigEnough); 
console.log("Returned value is : " + retval );  // true
17.sort()

对数组的元素进行排序。

 
var arr = new Array("orange", "mango", "banana", "sugar"); 
var sorted = arr.sort(); 
console.log("Returned string is : " + sorted );  // banana,mango,orange,sugar
18.splice()

从数组中添加或删除元素。

 
var arr = ["orange", "mango", "banana", "sugar", "tea"];  
var removed = arr.splice(2, 0, "water");  
console.log("After adding 1: " + arr );    // orange,mango,water,banana,sugar,tea 
console.log("removed is: " + removed); 
          
removed = arr.splice(3, 1);  
console.log("After removing 1: " + arr );  // orange,mango,water,sugar,tea 
console.log("removed is: " + removed);  // banana
19.toString()

把数组转换为字符串，并返回结果。

 
var arr = new Array("orange", "mango", "banana", "sugar");         
var str = arr.toString(); 
console.log("Returned string is : " + str );  // orange,mango,banana,sugar
20.unshift()

向数组的开头添加一个或更多元素，并返回新的长度。

 
var arr = new Array("orange", "mango", "banana", "sugar"); 
var length = arr.unshift("water"); 
console.log("Returned array is : " + arr );  // water,orange,mango,banana,sugar 
console.log("Length of the array is : " + length ); // 5
肩匣与橘
关注
  • 20
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
TypeScript(2)
weixin_44978043的博客
04-22 3970
1.数组 数组：用于存放多个数据的集合 let names: string[] = ['张三', '李四', '王五'] 注：数组中，通常是相同类型的数据 1.创建数组 let names: string[] = [] 表示一个空数组,数组的类型注解是由两部分组成：类型+[],此处表示字符串类型的数组（只能出现字符串类型） let names: string[] = ['张三','李四'] console.log(names) 语法二 let ages: number[] =new Array(20,
一些常用Array数组的方法
weixin_43844696的博客
06-03 347
concat()连接两个或更多的数组，并返回结果。 // 连接两个或更多的数组，并返回结果。 var alpha = ["a", "b", "c"]; var numeric = [1, 2, 3]; var alphaNumeric = alpha.concat(numeric); console.log("alphaNumeric : " + alphaNumeric ); // a,b,c,1,2,3 every()检测数值元素的每个元素是否都符合条件。 // ...
「TypeScript系列」TypeScript Array(数组)
最新发布
日常笔记/总结/系列知识梳理
05-21 1681
与 JavaScript 类似，TypeScript 中的数组可以包含任何类型的元素，但 TypeScript 提供了类型安全，允许你指定数组中的元素类型。）类型与 JavaScript 中的数组非常相似，并且支持所有标准的 JavaScript 数组方法。元组是 TypeScript 中一种特殊的数组，它允许你表示一个具有固定数量和固定类型的元素的数组。创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。创建一个新数组，新数组中的元素是通过检查指定函数中提供的条件所有元素返回的。
TypeScript 之 Array
qq_24726043的博客
08-14 3149
TypeScript 关于数组[] 和Array对象的使用
typescript定义对象、数组、函数
逆袭的菜鸟X
11-10 2960
前面我们提到，输入多/少的参数式不被允许的，这在接口定义中也存在着这个限制，同样的，我们也可以使用？用接口(interface)表示数组。「类型 + 方括号」表示法。传统的定义函数的输入与输出。用接口定义函数的输入与输出。
Typescript学习2 ( 对象 | 数组 | 函数 )
m0_74573297的博客
12-29 1311
目录 一.Object,object,{}区别 二.接口和对象类型 三.数组类型 四.函数类型
【零基础入门TypeScript】数组
共同学习、强我国家
01-23 938
使用变量来存储值有以下限制 -变量本质上是标量。换句话说，变量声明一次只能包含一个。这意味着要在程序中存储 n 个值，需要 n 个变量声明。因此，当需要存储更大的值集合时，使用变量是不可行的。程序中的变量以随机顺序分配内存，因此很难按照声明的顺序检索/读取值。TypeScript 引入了数组的概念来解决这个问题。数组是同质值的集合。简单来说，数组是相同数据类型的值的集合。它是用户定义的类型。
TypeScript入门教程——pdf文档
03-16
这篇入门教程将帮助初学者理解 TypeScript 的基本概念，掌握其核心语法，并能开始编写自己的 TypeScript 代码。 ### 1. 类型系统 TypeScript 引入了静态类型系统，允许开发者在编写代码时指定变量、函数参数和...
TypeScript入门-基本数据类型
08-30
本篇文章将深入探讨TypeScript中的基本数据类型，这对于初学者来说是非常重要的基础知识。 在TypeScript中，有多种基本数据类型，包括： 1. **布尔类型（boolean）**：布尔类型只有两个值，即`true`和`false`。...
TypeScript入门指南案例教程.zip
07-17
本篇教程将通过一系列案例，帮助初学者快速入门TypeScript。 1. **类型系统**：TypeScript的核心特性之一是类型系统，它允许开发者在编写代码时定义变量、函数参数和返回值的数据类型。类型检查有助于在编译阶段...
Typescript入门指南中文WORD版
07-22
资源名称：Typeｓｃｒｉｐｔ 入门指南 中文WORD版   内容简介： 本文档是Typeｓｃｒｉｐｔ 入门指南;Typeｓｃｒｉｐｔ 是微软开发的 Javaｓｃｒｉｐｔ 的超集，Typeｓｃｒｉｐｔ兼容Javaｓｃｒｉｐｔ，...
TSArray:使用TypeScript的数组
05-14
TSArray 使用TypeScript的数组
TypeScript 入门教程.pdf
05-09
此外，TypeScript 编译器不会优化代码，它只是将 TypeScript 代码转换为等效的 JavaScript 代码。 04 原理概述 TypeScript 的核心原理在于它的静态类型系统和编译过程。静态类型系统允许在编写代码时就对变量、函数...
总结TypeScript 的一些知识点：TypeScript Array(数组)
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
05-26 5346
一个数组的元素可以是另外一个数组，这样就构成了多维数组（Multi-dimensional Array）。如果数组声明时未设置类型，则会被认为是 any 类型，在初始化时根据第一个元素的类型来推断数组的类型。定义一个二维数组，每一个维度的数组有三个元素。数组对象是使用单独的变量名来存储一系列的值。我们也可以使用 Array 对象创建数组。
TypeScript 数组
weixin_42274805的博客
09-10 284
ts的数组几乎与js数组操作一致。本文主要讲一些需要关注的地方。
五、TypeScript 数组
weixin_46261309的博客
07-29 4359
TypeScript 数组1. 数组概述2. 创建数组3. 数组长度和索引3.1 概述3.2 数组长度4. 取值和存值4.1 取值4.2 存值4.3 添加元素5. 遍历数组 现在我们来学习TypeScript 数组，学完这一节，我们要知道，如何使用数组；如何创建数组；如何获取数组中的元素；如何遍历数组。 1. 数组概述 ​ 首先，什么是数组呢？我们为什么要使用数组呢？带着这两个疑问，我们来思考以下问题： 问题1：存储一个人的名字，怎么存？ ​ 你可能会觉得这个问题很简单，人的名字应该是字符串，那么声明
typescript对象、数组、函数类型详解
热门推荐
小青蛙的博客
09-19 1万+
目录   一、对象的类型：接口 二、数组的类型 三、函数的类型（* 核心） 一、对象的类型：接口 概述：在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implements） 1.接口使用 这个例子中定义了一个接口 Person，接着定义了一个变量 tom，它的类型是 Person。这样，我们就约束...
TypeScript基础-模块
Blog | Loch
12-22 2184
TypeScript 模块从TypeScript 1.5开始，内部模块称作“命名空间”，外部模块则简称为“模块”；模块构造出了一个独立的作用域，模块内的变量、函数、类在模块外部不可见；如果想要暴露 A 模块内的 a 函数给 B 模块，需要在 A 中使用 export 语法，同时在 B 模块中 import 从 A 暴露出的 a 函数（可以改变 B 中引用的函数名称）

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

肩匣与橘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值