当前位置：极客教程 > TypeScript > TypeScript 教程 > 如何在TypeScript中创建一个对象数组

如何在TypeScript中创建一个对象数组

如何在TypeScript中创建一个对象数组

在TypeScript中，数组包含数据或不同的值，也可以包含一个对象。对象包含TypeScript中的属性和方法。我们可以通过引用对象来访问对象的属性和调用对象的方法。

在本教程中，我们将学习如何在TypeScript中创建一个由多个对象组成的数组。我们还将学习执行一些操作，比如对对象的数组进行排序。

语法

在这里，我们已经给出了创建对象数组的语法。

let obj_array: Array<Object_Type> = [{object properties}]
TypeScript

在上面的语法中，Object_Type是一种对象的类型，它定义了数组的所有对象将包含哪些属性，其数据类型。

示例

在这个例子中，我们使用了类型别名来创建一个类型的对象。objType包含数字类型的obj_id和字符串类型的obj_value。

我们已经创建了objType对象的数组，其中包含了五个不同属性值的对象。另外，我们正在从第一个索引访问对象，并读取其属性值。

// Creating the type for the object
type objType = {
   obj_id: number;
   obj_value: string;
};
// creating the array of objects
let objArray: Array<objType> = [
   { obj_id: 1, obj_value: "TutorialsPoint" },
   { obj_id: 2, obj_value: "TypeScript" },
   { obj_id: 3, obj_value: "Shubham" },
   { obj_id: 4, obj_value: "TutorialsPoint" },
   { obj_id: 5, obj_value: "TypeScript" },
];
console.log(
   "The properties values of the object at the first index in objArray is "
);
// accessing the object and its properties
console.log(objArray[0].obj_id);
console.log(objArray[0].obj_value);
TypeScript
// creating the array of objects
var objArray = [
   { obj_id: 1, obj_value: "TutorialsPoint" },
   { obj_id: 2, obj_value: "TypeScript" },
   { obj_id: 3, obj_value: "Shubham" },
   { obj_id: 4, obj_value: "TutorialsPoint" },
   { obj_id: 5, obj_value: "TypeScript" },
];
console.log("The properties values of the object at the first index in objArray is ");
// accessing the object and its properties
console.log(objArray[0].obj_id);
console.log(objArray[0].obj_value);
TypeScript

输出

上述代码将产生以下输出 —

The properties values of the object at the first index in objArray is
1
TutorialsPoint
TypeScript

遍历对象阵列

我们可以使用循环来迭代对象的数组。在遍历数组时，我们可以使用零基数组索引访问特定的对象。从数组中访问对象后，我们还可以访问对象的属性。

语法

用户可以按照下面的语法来遍历对象的数组。

for (let obj of objArray) {
   obj.property
}
TypeScript

在上面的语法中，我们使用了for-of循环来遍历对象的数组。我们可以通过将obj作为一个引用来访问该属性。

示例

在这个例子中，我们使用for-of循环来迭代包含不同属性值的对象。在for循环中，我们得到一个名为obj的单一对象，我们可以用它来访问其属性值。

// creating the array of objects
let objArray = [
   { obj_id: 1, obj_value: "TutorialsPoint" },
   { obj_id: 2, obj_value: "TypeScript" },
   { obj_id: 3, obj_value: "Shubham" },
   { obj_id: 4, obj_value: "TutorialsPoint" },
   { obj_id: 5, obj_value: "TypeScript" },
];
console.log(
   "Iterating through the array of objects using the for-of loop and accessing its properties."
);
// using the for-of loop to iterate through the array of objects
for (let obj of objArray) {
   console.log("obj_id " + obj.obj_id + " obj_value " + obj.obj_value);
}
TypeScript

编译时，它将生成以下JavaScript代码。

// creating the array of objects
var objArray = [
   obj_id: 1, obj_value: "TutorialsPoint" },
   { obj_id: 2, obj_value: "TypeScript" },
   { obj_id: 3, obj_value: "Shubham" },
   { obj_id: 4, obj_value: "TutorialsPoint" },
   { obj_id: 5, obj_value: "TypeScript" },
];
console.log("Iterating through the array of objects using the for-of loop and accessing its properties.");
// using the for-of loop to iterate through the array of objects
for (var _i = 0, objArray_1 = objArray; _i < objArray_1.length; _i++) {
   var obj = objArray_1[_i];
   console.log("obj_id " + obj.obj_id + " obj_value " + obj.obj_value);
}
TypeScript

输出

上述代码将产生以下输出 —

Iterating through the array of objects using the for-of loop and accessing its properties.
obj_id 1 obj_value TutorialsPoint
obj_id 2 obj_value TypeScript
obj_id 3 obj_value Shubham
obj_id 4 obj_value TutorialsPoint
obj_id 5 obj_value TypeScript
TypeScript

按照以下步骤进行下一个例子

  • 第1步 – 创建一个包含id、tree_name和age属性的Tree接口。同时，通过使用问号使年龄属性成为可选项。

  • 第2步 – 创建名为trees的数组，它可以包含Tree类型的对象。

  • 第3步 – 用一些对象初始化数组。在下面的例子中，有些对象包含年龄属性，有些不包含，因为它是可选的

  • 第4步 – 使用数组的filter()方法来过滤所有年龄大于20的对象。

  • 第5步–在过滤器方法的参数中，传递回调函数，该函数以一个特定的树对象为参数，根据树对象是否包含age属性返回布尔值，如果包含，那么其值是否大于20。

  • 第6步 – 打印过滤后的树木数组。

示例

在这个例子中，我们已经实现了上述步骤来创建Tree对象的数组。此外，我们还使用了数组库的filter()方法来过滤所有年龄在20岁以上的对象。

// Creating the interface for the Tree object
// age is the optional property
interface Tree {
   id: number;
   tree_name: string;
   age?: number;
}
// creating the array of trees
let Trees: Array<Tree> = [
   { id: 10, tree_name: "Palm tree" },
   { id: 15, tree_name: "Guava tree", age: 30 },
   { id: 20, tree_name: "Papita tree", age: 15 },
   { id: 25, tree_name: "Grass tree" },
   { id: 35, tree_name: "Neem tree", age: 21 },
];
// filtering all trees whose age is above 20 years
let filteredTrees: Array<Tree> = Trees.filter((tree) => {
   return tree.age ? tree.age > 20 : false;
});
console.log("The all trees whose age is above 20 are");
console.log(filteredTrees);
TypeScript
// creating the array of trees
var Trees = [
   { id: 10, tree_name: "Palm tree" },
   { id: 15, tree_name: "Guava tree", age: 30 },
   { id: 20, tree_name: "Papita tree", age: 15 },
   { id: 25, tree_name: "Grass tree" },
   { id: 35, tree_name: "Neem tree", age: 21 },
];
// filtering all trees whose age is above 20 years
var filteredTrees = Trees.filter(function (tree) {
   return tree.age ? tree.age > 20 : false;
});
console.log("The all trees whose age is above 20 are");
console.log(filteredTrees);
TypeScript

输出

上述代码将产生以下输出 —

所有树龄在20年以上的树木都是

[ { id: 15, tree_name: 'Guava tree', age: 30 },
{ id: 35, tree_name: 'Neem tree', age: 21 } ]
JSON

用户学会了创建一个对象的数组。此外，我们还学会了创建具有可选属性的对象并将其添加到数组中。

此外，我们学会了使用for-of循环遍历对象数组，但用户也可以使用for或while循环。另外，我们还学习了使用对象数组的filter()方法，通过这种方式，用户也可以使用其他方法，如find()和sort()。我们需要根据需求来优化回调函数。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

TypeScript 教程

登录

找回密码？

注册