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

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

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

语法

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

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

在上面的语法中，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);

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

输出

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

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

遍历对象阵列

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

语法

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

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

在上面的语法中，我们使用了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);
}

编译时，它将生成以下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);
}

输出

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

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

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

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

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

输出

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

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

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

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

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