資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 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);
編譯後，它將生成以下 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("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 介面。還可以使用問號使 age 屬性可選。
步驟 2 - 建立名為 trees 的陣列，它可以包含 Tree 型別的物件。
步驟 3 - 使用一些物件初始化陣列。在下面的示例中，一些物件包含 age 屬性，而一些物件不包含，因為它是可選的
步驟 4 - 使用 Array 的 filter() 方法過濾所有年齡大於 20 的物件。
步驟 5 - 在 filter 方法的引數中，傳遞迴調函式，該函式以特定樹物件作為引數，並根據樹物件是否包含 age 屬性以及是否包含 age 屬性，以及其值是否大於 20 返回布林值。
步驟 6 - 列印 filteredTrees 陣列。
示例
在這個例子中，我們實現了上述步驟來建立 Tree 物件的陣列。此外，我們還使用了 Array 庫的 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);
編譯後，它將生成以下 JavaScript 程式碼：
// 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()。我們需要根據需求最佳化回撥函式。
15K+ 瀏覽量
