0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙TypeScript入门学习第11天【Array(数组)】

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-04-09 14:38 次阅读

1、TypeScript Array(数组)

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

数组非常常用。

假如你有一组数据(例如:网站名字),存在单独变量如下所示:

var site1="Google"; var site2="Runoob"; var site3="Taobao";复制

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

var sites:string[]; sites = ["Google","Runoob","Taobao"]复制

这样看起来就简洁多了。

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]

整个数组结构如下所示:

cke_15112.png

索引值第一个为 0,我们可以根据索引值来访问数组元素:
[qr23.cn/AKFP8k]点击学习更多

TypeScript

var sites:string[]; 
sites = ["Google","Runoob","Taobao"] 
console.log(sites[0]); 
console.log(sites[1]);复制

编译以上代码,得到以下 JavaScript 代码:

JavaScript

sites = ["Google", "Runoob", "Taobao"];
console.log(sites[0]);
console.log(sites[1]);复制

输出结果为:

Google
Runoob

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

搜狗高速浏览器截图20240326151547.png

TypeScript

鸿蒙NEXT开发文档与视频教学——mau123789是v直接领
var nums:number[] = [1,2,3,4] 
console.log(nums[0]); 
console.log(nums[1]); 
console.log(nums[2]); 
console.log(nums[3]);复制

编译以上代码,得到以下 JavaScript 代码:

JavaScript

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

输出结果为:

1 
2 
3 
4

2、Array 对象

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

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

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

实例

指定数组初始化大小:

TypeScript

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]) 
}

编译以上代码,得到以下 JavaScript 代码:

JavaScript

ar arr_names = 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

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

TypeScript

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

编译以上代码,得到以下 JavaScript 代码:

JavaScript

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

输出结果为:

Google
Runoob
Taobao
Facebook

3、数组解构

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

TypeScript

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

编译以上代码,得到以下 JavaScript 代码:

JavaScript

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

输出结果为:

12
13

4、数组迭代

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

TypeScript

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

编译以上代码,得到以下 JavaScript 代码:

JavaScript

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

输出结果为:

1001
1002
1003
1004

5、多维数组

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

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

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

实例

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

cke_90769.png

TypeScript

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])

编译以上代码,得到以下 JavaScript 代码:

JavaScript

var multi = [[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

6、数组在函数中的使用

作为参数传递给函数

TypeScript

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);

编译以上代码,得到以下 JavaScript 代码:

JavaScript

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

输出结果为:

Google
Runoob
Taobao
Facebook

7、作为函数的返回值

TypeScript

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

编译以上代码,得到以下 JavaScript 代码:

JavaScript

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

输出结果为:

Google
Runoob
Taobao
Facebook

8、数组方法

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

image.png

image.png

image.png

image.png

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • Array
    +关注

    关注

    98

    文章

    18

    浏览量

    17519
  • 鸿蒙
    +关注

    关注

    57

    文章

    2301

    浏览量

    42665
收藏 人收藏

    评论

    相关推荐

    鸿蒙TypeScript入门学习4:【TS变量声明】

    变量是一种使用方便的占位符,用于引用计算机内存地址。 我们可以把变量看做存储数据的容器。
    的头像 发表于 03-29 14:49 1312次阅读

    鸿蒙TypeScript入门学习6:【条件语句】

    条件语句用于基于不同的条件来执行不同的动作。 TypeScript 条件语句是通过一条或多条语句的执行结果(True 或 False)来决定执行的代码块。
    的头像 发表于 04-01 13:51 693次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>入门</b><b class='flag-5'>学习</b><b class='flag-5'>第</b>6<b class='flag-5'>天</b>:【条件语句】

    鸿蒙TypeScript学习7:【TypeScript 循环】

    有的时候,我们可能需要多次执行同一块代码。一般情况下,语句是按顺序执行的:函数中的第一个语句先执行,接着是第二个语句,依此类推。 编程语言提供了更为复杂执行路径的多种控制结构。
    的头像 发表于 04-02 14:28 773次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b><b class='flag-5'>第</b>7<b class='flag-5'>天</b>:【<b class='flag-5'>TypeScript</b> 循环】

    鸿蒙TypeScript 开发学习9:【TypeScript Number】

    TypeScript 与 JavaScript 类似,支持 Number 对象。 Number 对象是原始数值的包装对象。
    的头像 发表于 04-07 18:02 743次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b> 开发<b class='flag-5'>学习</b><b class='flag-5'>第</b>9<b class='flag-5'>天</b>:【<b class='flag-5'>TypeScript</b> Number】

    鸿蒙语言TypeScript学习16:【类】

    TypeScript 支持面向对象的所有特性,比如 类、接口等。
    的头像 发表于 04-15 09:29 930次阅读
    <b class='flag-5'>鸿蒙</b>语言<b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b><b class='flag-5'>第</b>16<b class='flag-5'>天</b>:【类】

    鸿蒙TypeScript学习17:【对象】

    对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象等
    的头像 发表于 04-15 15:33 593次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b><b class='flag-5'>第</b>17<b class='flag-5'>天</b>:【对象】

    鸿蒙TypeScript学习20:【模块】

    TypeScript 模块的设计理念是可以更换的组织代码。 模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。
    的头像 发表于 04-18 15:19 672次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b><b class='flag-5'>第</b>20<b class='flag-5'>天</b>:【模块】

    限时免费领取\LabVIEW机器视觉基础篇—7入门

    `【赠送福利】电子发烧友为了感谢大家一直以来的支持,特将《LabVIEW机器视觉实用教程基础篇-7入门LabVIEW》课程免费赠送给200个想入门的工程师们学习。获取方式扫描进群分享
    发表于 05-18 19:19

    【触觉智能 Purple Pi OH 开发板体验】二、鸿蒙系统APP应用例程学习HDC使用学习

    :JavaScript在运行时才能检测错误。而TypeScript在编码期间就能检测错误1。 总的来说,TypeScript比JavaScript更易于大项目的开发1。 2022年111
    发表于 08-31 11:13

    数组和C++ std::array详解

    std::array是C++容器库提供的一个固定大小数组的容器。其与内置的数组相比,是一种更安全、更容易使用的数组类型。
    的头像 发表于 07-19 11:02 996次阅读
    ​<b class='flag-5'>数组</b>和C++ std::<b class='flag-5'>array</b>详解

    鸿蒙TypeScript入门学习2TypeScript安装】

    本文介绍 TypeScript 环境的安装。 我们需要使用到 npm 工具安装,如果你还不了解 npm,可以参考我之前文档。
    的头像 发表于 03-27 15:22 440次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>入门</b><b class='flag-5'>学习</b><b class='flag-5'>第</b>2<b class='flag-5'>天</b>【<b class='flag-5'>TypeScript</b>安装】

    鸿蒙TypeScript开发入门学习3:【TS基础类型】

    任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型,它常用于以下三种情况。
    的头像 发表于 03-28 15:02 461次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b>开发<b class='flag-5'>入门</b><b class='flag-5'>学习</b><b class='flag-5'>第</b>3<b class='flag-5'>天</b>:【TS基础类型】

    鸿蒙TypeScript入门学习8:【TypeScript 函数】

    函数是一组一起执行一个任务的语句。 您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的,但在逻辑上,划分通常是根据每个函数执行一个特定的任务来进行的。
    的头像 发表于 04-03 14:54 368次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>入门</b><b class='flag-5'>学习</b><b class='flag-5'>第</b>8<b class='flag-5'>天</b>:【<b class='flag-5'>TypeScript</b> 函数】

    鸿蒙TypeScript学习13:【元组】

    元组中允许存储不同类型的元素,元组可以作为参数传递给函数。
    的头像 发表于 04-11 14:43 414次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b><b class='flag-5'>第</b>13<b class='flag-5'>天</b>:【元组】

    鸿蒙TypeScript学习21:【声明文件】

    TypeScript 作为 JavaScript 的超集,在开发过程中不可避免要引用其他第三方的 JavaScript 的库。
    的头像 发表于 04-19 15:02 494次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b>21<b class='flag-5'>天</b>:【声明文件】