如何在 TypeScript 中创建对象数组?
在 TypeScript 中，数组包含数据或不同的值，也可以包含对象。对象包含 TypeScript 中的属性和方法。我们可以通过将对象作为引用来访问对象属性并调用对象方法。
在本教程中，我们将学习在 TypeScript 中创建多个对象的数组。我们还将学习执行一些操作，例如对对象数组进行排序。
语法
在这里，我们给出了创建对象数组的语法。
let obj_array: Array<Object_Type> = [{object properties}]
在上述语法中，Object_Type 是一种对象类型，它定义了数组的所有对象将包含哪些属性及其数据类型。
示例
在此示例中，我们使用类型别名创建了一种对象类型。objType 包含数字类型的 obj_id 和字符串类型的 obj_value。
我们创建了 objType 对象数组，其中包含具有不同属性值的五个不同对象。此外，我们从第一个索引访问对象并读取其属性值。
// 为对象创建类型
type objType = {
obj_id: number;
obj_value: string;
};
// 创建对象数组
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 "
);
// 访问对象及其属性
console.log(objArray[0].obj_id);
console.log(objArray[0].obj_value);
编译后，它将生成以下 JavaScript 代码 -
// 创建对象数组
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 ");
// 访问对象及其属性
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，我们可以使用它来访问其属性值。
// 创建对象数组
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."
);
// 使用 for-of 循环遍历对象数组
for (let obj of objArray) {
console.log("obj_id " + obj.obj_id + " obj_value " + obj.obj_value);
}
编译后，它将生成以下 JavaScript 代码:
// 创建对象数组
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.");
// 使用 for-of 循环遍历对象数组
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 接口。此外，使用问号使 age 属性成为可选属性。
步骤 2 - 创建名为 trees 的数组，该数组可以包含 Tree 类型的对象。
步骤 3 - 使用一些对象初始化数组。在下面的例子中，一些对象包含 age 属性，而有些则不包含，因为它是可选的。
步骤 4 - 使用数组的 filter() 方法过滤所有年龄大于 20 的对象。
步骤 5 - 在 filter 方法的参数中，传递回调函数，该函数以特定的树对象为参数，并根据树对象是否包含 age 属性返回布尔值，如果包含，则返回其值是否大于 20。
步骤 6 - 打印filteredTrees数组。
示例
在此示例中，我们已实施上述步骤来创建 Tree 对象数组。此外，我们还使用了 Array 库的 filter() 方法来过滤所有年龄大于 20 岁的对象。
// 为 Tree 对象创建接口
// age 是可选属性
interface Tree {
id: number;
tree_name: string;
age?: number;
}
// 创建树数组
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);
编译后，它将生成以下 JavaScript 代码 -
// 创建树数组
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);
输出
上述代码将产生以下输出 -
All trees whose age is above 20 are
[ { id: 15, tree_name: 'Guava tree', age: 30 },
{ id: 35, tree_name: 'Neem tree', age: 21 } ]
用户学会了如何创建对象数组。此外，我们还学会了如何创建具有可选属性的对象并将其添加到数组中。
此外，我们还学会了使用 for-of 循环遍历对象数组，但用户也可以使用 for 或 while 循环。此外，我们还学会了对对象数组使用 filter() 方法，这样，用户还可以使用 find() 和 sort() 等其他方法。我们需要根据需求优化回调函数。
