Typescript Array实例

迪鲁宾
313 阅读3分钟

Typescript Array examples

Typescript Array:通过使用实例来学习。

阵列对象在Typescript中的应用

数组是任何语言的基础，数组用于在一个集合名下存储多个值。基本上，在网络应用中，我们将使用Arrays ，用于存储对象列表JSON值的列表，和自定义条目，以及通过从数据库获取数据来存储原始值。

在类型脚本中，数组是对象。 数组中的元素可以通过索引来检索。

数组语法声明

var  variableArrayName[:Data-type];  
variableArrayName=[list of objects/elements]  
or   
var variableArrayName[:Array[Data-type]];  
variableArrayName=[list of objects/elements]

variablename是一个有效的标识符 数组是typescript中的一个关键词。 datatype是数组中数据的数据类型。

如何在Typescript中声明和初始化数组？

在typescript中我们有很多方法可以声明数组。

首先，它用方括号语法([])声明一个类型的变量

并用方括号中的数值初始化一个数组.在这里,一个空数组被分配了数值.

上述两行都可以用单行句法代替

第二，数组可以用Array 类型进行声明和初始化。

var array2: string[] = new Array();  
var array3: string[] = Array();  
var array5: Array = new Array();  
var array6: Array = Array();

第三，你也可以用单行语法声明和初始化一个数组，如下所示

var array1: string[] = ['one','two','three'];

上述数组在索引0-'1'，索引1-'2'，索引2-'3'处保存数值。

我们也可以声明一个没有数据类型的数组，数据类型从分配的数据中推断出来。数组将假定数组的数据类型可以根据数组的值来决定。

我们将看到数组的例子，检查数组的typeof ，数组的长度，从数组中检索一个元素。

var array1: string[] = ['one','two','three'];  
console.log(typeof array1) //returns object  
console.log(array1.length) //returns 3  
console.log(array1[0]) // returns 'one'  
console.log(array1[1]) // returns 'two'  
console.log(array1[2]) // returns 'three'  
console.log(array1[3]) // returns undefined

如何声明对象的数组？

在typescript中，用接口或类来声明一个对象。 让我们用typescript为雇员声明一个类

interface Employee{
  id:number,
  name:string
    constructor(_id:number, _name:string) {
    this.id = _id;
    this.name = _name;
  }

}

一种方法是，让我们用方括号的语法声明一个对象数组

另一种方法是，用Array语法声明一个数组

let emps1: Array<Emloyee>;

还有，用数组声明一个数组，其中有一个类型的对象，如下图所示

let employees: Array<{ id: number, name: string }>;

最后，用单个语句声明并初始化一个对象数组

let emps: Employee[] =
  [new Employee(11, "John"), new Employee(12, "Eric")];

同样，初始化也可以通过分配json字符串对象来完成，如下图所示

let emps: Employee[] =  [{
  id: 11,
  name: "John"
},
{
  id: 12,
  name: "Eric"
}
  ];

如何声明数组字符串？

我们也可以使用空数组或参数构造器创建数组对象

var emps: string[] = new Array(2)    
emps.push('emp1')  
emps.push('emp2')  
emps.push('emp3')  
for(var i = 0;i<emps.length;i++) {   
   console.log(emps[i])   
}  
var newemps: string[] = new Array('test1','test2')   // accepts parameters separted by comma in Array object Constrcutor

typescript中的数组解构

[Destructing](/2018/08/es-6-features-destructuring-assignment.html) typescript在最新的javascript中引入了这个功能，同时也在对象和数组中实现了这个功能。 解除代码更容易阅读，并且减少了代码的大小。 解除是将数组中的元素分开。

下面的例子是复制两个变量而不使用第三个变量。

var var1 = 5, var2 = 8;  
console.log(var1, var2); // returned 5,8  
[var1, var2] = [var2, var1];  
console.log(var1, var2); // returned 8,5

同样的方法，我们可以在一个数组对象中实现。

  
var arrays:number[] =[7, 4,5];  
var [m,n] =arrays   
console.log(m, n); // 7, 4

使用transpile生成的javascript是

  
var arrays = =[7, 4,5];  
var x = arrays[0], y = arrays[1];  
console.log(m, n); // 7, 4

在typecript中对数组进行解构

我们将看到用[rest operator](/2018/08/es6-spread-operator-in-javascript.html 来对数组进行解构。

上面的例子中有一个有三个元素的数组，分配了两个变量，从数组中复制了两个值到两个变量，第三个将被忽略。

var arrays:number[] =[7, 4,5,12];  
var [m,n,...q] =arrays   
console.log(m, n); // 7, 4  
console.log(q); // 5,12

我们将看到数组忽略解构。

  
var arrays:number[] =[7, 4,5,12];  
var [m,,...q] =arrays   
console.log(m); // 7  
console.log(q); // 5,12

使用空变量，用逗号将空变量隔开
数组对象属性
length返回数组对象中元素的数量数组对象方法数组对象
有不同的方法来操作一个元素数组。

方法说明
反转()倒转数组中元素的顺序。最后一个元素将是第一个元素，第一个元素是最后一个元素。
推进()接收一个或多个元素作为参数，将该元素添加到数组的末端，并返回数组的新长度。
pop()从数组中的最后一个位置删除一个元素
连接()接收一个或多个元素作为参数，将该元素添加到一个原始数组中，并通过协程返回新数组。
slice()以开始和结束索引为参数，返回数组元素的一部分
toString()输出数组对象的字符串形式
shift()从一个索引为0的数组中删除第一个元素并返回第一个元素
unshift()多取一个元素，这些元素在数组的开始位置，即零索引位置，返回全新的数组元素。

我们将在下一节的例子中看到数组的真实使用情况。

如何从一个数组中删除一个元素？

使用splice 方法，我们可以从一个数组中删除元素。

splice(0,1) - 这个元素移除第一个元素并返回。

第一个参数表示从一个数组开始，即起始元素。第二个参数表示要移除的元素的数量，splice(arrays. length,1)这些元素移除最后一个元素并返回最后一个元素。

如何声明一个多维数组？

这些用于数学矩阵对象的二层数组。 多维数组是一个数值的数组。

数组包含元素，这些元素持有数组。 多维数组可以按以下方式声明和初始化。

  
var dimensions:number[][] = [[11,12,13],[3,2,5]]    
console.log(dimensions[0][0])  // returns 11  
console.log(dimensions[0][1])  // returns 12  
console.log(dimensions[0][2])  // returns 13  
console.log(dimensions[1][0])  // returns 3  
console.log(dimensions[1][1])  // returns 2  
console.log(dimensions[1][2])  // returns 5

使用索引，我们可以像普通数组一样用多维索引来检索元素。

如何在typescript中把JSON转换为数组对象。

在应用程序中，我们习惯于以JSON对象的形式从REST获取数据。 在前端，我们需要操作JSON对象并在用户界面上显示它们。 将JSON转换为数组是开发人员必须知道的高效编程的情况。

const json = {  
    "Employees": [  
        { "id": "1", "name": "john" },  
        { "id": "2", "name": "Franc" },  
        { "id": "3", "name": "Kiran" },  
  
    ]   
}  
  
const arraysItem = json.Employees.map(emp => emp.name);  
console.log(arraysItem); //return array with three elements -john,Franc,Kiran

如何在数组中持有多种数据类型的值。

通常情况下，数组持有相同数据类型的类似值。我们也可以像元组数组的例子那样持有多种数据类型。

一个元组类型的例子

  
var types1:[number, string] = [11, "cloudhadoop"]  
console.log(types1); //return index0 - 11, index1 - cloudhadoop

如何在typescript中对一个数组进行排序

Arrays.sort(comparator)方法用于对数组中的元素进行排序。

let list = ['11', '5', '9'];  
console.log(list) // return - return 11,5,9  
list.sort((p,q)=> p - q )  
console.log(list); // Ascending Order - return 5,9,11  
  
  
let data = [  
   {value:"testuser", key:11},  
   {value:"demo", key:31},  
   {value:"zoo", key:2},  
];

根据键和值对JSON对象进行排序并转换为数组

// sort value in natural ascending  order  
data.sort((d1, d2) => {  
  if (d1.value > d2.value) return 1;  
  if (d1.value < d2.value) return -1;  
  return 0;  
});  
console.log(data);

输出

{value: "demo", key: 31},  
{value: "testuser", key: 11},  
{value: "zoo", key: 2},

这里有一个自然排序的代码

// sort key in natural ascending  order  
data.sort((d1, d2) => {  
  if (d1.key > d2.key) return 1;  
  if (d1.key < d2.key) return -1;  
  return 0;  
});  
  
{value: "zoo", key: 2},  
{value: "testuser", key: 11},  
{value: "demo", key: 31}

如何迭代/循环数组中的元素/对象。

我们可以使用[forEach](/2018/08/typescript-for-loop-tutorials-with.html) 或正常的for循环来迭代对象。

在同样的逻辑中，我们可以在数组中使用循环对象。

let list = ['11', '5', '9'];  
list.forEach( (element) => {  
    console.log(element)   
});  
  
//returns 11,5,9

总结

综上所述，你已经通过实例学习了typecript中的数组。

avatar
文章
阅读
粉丝