第十一节TypeScript Array(数组)

1、描述

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

比如,你现在有一组数据,存单独变量如下:

var data1="Android";
var data2="Java";
var data3="Harmony";

那如果有10、100个这种变量呢,那这种就不实用了,这时我们可以使用数组来解决:

var array:string[]; // 声明
array= ["Android","Java","Harmony" ];

现在看起来简洁多了。

2、语法:

var array_name[:datatype];        //声明 
array_name = [val1,val2,valn..];   //初始化
或者直接在声明时初始化
var array_name[:datatype] = [val1,val2…valn];

实例:

var array:string[]; // 声明
array= ["Android","Java","Harmony" ];
console.log(array[0]);
console.log(array[1]);

执行结果:

Android

Java

3、Array对象

同样我们也可以使用array对象来创建数组。

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

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

实例(指定数组的初始化大小)(TypeScript):

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

使用tsc编译为JavaScript代码:

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

执行结果:
0

2

4

6

实例(直接初始化数组元素)(TypeScript):

var arr_list: string[] = new Array("Android","Java","Harmony");
for (var i = 0; i < arr_list.length; i++) {
console.log(arr_list[i]);
}

使用tsc编译为JavaScript后代码:

var arr_list = new Array("Android","Java","Harmony");
for (var i = 0; i < arr_list.length; i++) {
console.log(arr_list[i]);
}

执行结果:

Android

Java

Harmony

4、数组解构

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

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

使用tsc编译为JavaScript后代码:

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

执行结果:

12

13

5、数组迭代

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

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

使用tsc编译为JavaScript后代码......

执行结果:

1001

1002

1003

1004

6、数组方法

1)、concat() - 链接两个或更多的数组,并返回结果

实例:

<script type="text/javascript">var arryList1 = ["Android", "Java", "ios"];var arrayList2 = [1, 2, 3];var result = arryList1.concat(arrayList2);document.getElementById("demo").innerHTML = "result = " + result;
</script>

执行结果:result = Android,Java,ios,1,2,3

2)、forEach() – 数组每个元素都执行一次回调函数

实例:

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

执行结果:

7

8

9

3)、indexOf() – 搜索数组中的元素,并返回它所在的位置,如果没有搜索到,返回值-1,代表没有此项。

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

4)、join() – 将数组中所有元素放入一个字符串中

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

5)、lastIndexOf() – 返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后往前的搜索。

实例:

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

6)、pop() – 删除数组的最后一个元素,并返回删除的元素

实例:

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

执行结果:

element is : 9

numbers = : [1,4]

7)、push() – 向数组末尾添加一个或多个元素,并返回新的长度

实例:

var numbers = new Array(1, 4, 9); 
var length1 = numbers.push(10); 
console.log("new numbers is : " + numbers );  // 1,4,9,10 
console.log("length1 = " + length1 );  // 4
length2 = numbers.push(20); 
console.log("new numbers is : " + numbers );  // 1,4,9,10,20
console.log("length2 = " + length2 );  // 5

执行结果:

new numbers is : 1,4,9,10

length1 = 4

new numbers is : 1,4,9,10,20

length2 = 5

8)、reduce() – 将数组元素计算为一个值(从左到右)

实例:

var total = [2, 4, 6, 8];
var result = total.reduce(function(a, b) {
return a + b;
})
console.log("reduce() - result = " + result) // 20

执行结果:reduce() - result = 20

9)、reduceRight() – 将数据元素计算为一个值(从右到左)

实例同上的reduce()数组方法。

10)、reverse() – 反转数组的元素顺序

实例:

var total = [2, 4, 6, 8];
var result = total.reverse();
console.log("reverse() - result = " + result) // 8,6,4,2

执行结果:reverse() - result = 8,6,4,2 

11)、shift() – 删除并返回数组的第一个元素(跟pop()方法刚好相反)。

实例:

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

12)、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

13)、sort() – 对数组的元素进行排序

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

14)、toString() – 把数组转换为字符串并返回结果

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

15)、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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/298237.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

指法练习软件TT

1、说明 这个是90年代后期读书时写的C语言练习软件&#xff0c;模仿当时的打字练习软件。 在技能上使用屏幕直接输出&#xff0c;支持彩色&#xff0c;能够在DOS和Windows98的窗口下运行。 2、主要界面 支持多用户档案&#xff0c;以键盘操作。 进入具体用户档案后&#xff0c…

路由器介绍和命令操作

先来回顾一下上次的内容&#xff1a; ip地址就是由32位二进制数组 二进位数就是只有数字0和1组成 网络位&#xff1a;类似于区号&#xff0c;表示区域作用 主机位&#xff1a;类似于号码&#xff0c;表示区域中编号 网络名称&#xff1a;网络位不变&#xff0c;主机位全为0 …

java IO

主要内容 java.io.File类的使用 IO原理及流的分类 文件流 FileInputStream / FileOutputStream / FileReader / FileWriter 缓冲流 BufferedInputStream / BufferedOutputStream / BufferedReader / BufferedWriter 转换流 InputStreamReader / OutputStreamWriter 标准…

树莓派,opencv,Picamera2利用舵机云台追踪人脸(PID控制)

一、需要准备的硬件 Raspiberry Pi 4b两个SG90 180度舵机&#xff08;注意舵机的角度&#xff0c;最好是180度且带限位的&#xff0c;切勿选360度舵机&#xff09;二自由度舵机云台&#xff08;如下图&#xff09;Raspiberry CSI 摄像头 组装后的效果&#xff1a; 二、项目目…

MP3音乐播放器搜索引擎-窗口实现

在Headers里面添加新文件 想在mainwindow里面通过点击按钮出现这个新的对话框我们应该将新的对话框的头文件添加到mainwindow.h 然后我们可以创建一个AboutADialog对象&#xff0c;模态对话框就是只能对模态对话框进行操作点不了主窗口&#xff0c;非模态对话框则可以&#xff…

tensorboard可视化——No dashboards are active for the current data set.

No dashboards are active for the current data set. 出现问题的原因是事件的路径未用绝对路径&#xff0c;tensorboard --logdir./runs --port6007 改为tensorboard --logdirD:\Code\Python\Study\CL\hat-master\hat-master\run s\one --port6007就好了

论文阅读:Blind Super-Resolution Kernel Estimation using an Internal-GAN

这是发表在 2019 年 NIPS 上的一篇文章&#xff0c;那个时候还叫 NIPS&#xff0c;现在已经改名为 NeurIPS 了。文章中的其中一个作者 Michal Irani 是以色 Weizmann Institute of Science (魏茨曼科学研究学院) 的一名教授&#xff0c;对图像纹理的内在统计规律有着很深入的研…

yolo实现数据增强(数据集不够,快速增加数据集)

目录结构 附上数据增强的全部代码 # -*- codingutf-8 -*-import time import random import copy import cv2 import os import math import numpy as np from skimage.util import random_noise from lxml import etree, objectify import xml.etree.ElementTree as ET imp…

leetcode 1576. 替换所有的问号(easy)(优质解法)

链接&#xff1a;1576. 替换所有的问号 代码&#xff1a; class Solution {public String modifyString(String s) {char[] charSs.toCharArray();int lengthcharS.length;//遍历找到 &#xff1f;for(int i0;i<length;i){if(charS[i]?){//遍历 a ~ z 选择一个合适的字符来…

探索应用程序的指路明灯:Route 和 Router 入门指南(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

obsidian使用分享

ob对比其他软件 上文提到obsidian&#xff0c;这里对obsidian做一个简要的总结 优点&#xff1a;对比notion&#xff0c;语雀这些软件&#xff0c;内容存储在应用商的服务器上。它是存在本地的。 对比思源笔记。说一下思源笔记的不足。思源是块来控制的&#xff0c;回车就是一…

爬虫响应cookie阿里系案例:某财经

声明&#xff1a; 该文章为学习使用&#xff0c;严禁用于商业用途和非法用途&#xff0c;违者后果自负&#xff0c;由此产生的一切后果均与作者无关 一、响应cookie阿里系特点 cookie中一定有acw_sc__v2清除所有cookie刷新页面时&#xff0c;会自动debugger到设置cookie的文件…