資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究TypeScript - 過濾物件及其完全相同的子物件中所有匹配的物件
軟體開發中一個常見的任務是根據特定條件過濾物件。在本教程中，我們將探討如何使用 TypeScript 過濾物件及其完全相同的子物件中所有匹配的物件。當處理複雜的資料結構或從巢狀物件中提取特定資訊時，此技術特別有用。
我們將利用 TypeScript 的強大功能，例如型別註釋和物件操作來實現這一點。
用於過濾匹配物件及其子物件的遞迴函式和型別保護
我們可以使用遞迴方法來過濾物件及其完全相同的子物件中所有匹配的物件。該演算法將遍歷物件及其子物件的屬性，檢查它們是否與過濾器值匹配。如果找到匹配項，則相應的屬性或物件將包含在過濾後的結果中。
以下是所涉及步驟的概述：
建立一個新的空物件來儲存過濾後的結果。
遍歷輸入物件的屬性。
對於每個屬性，檢查它是否與過濾器值匹配。
如果該屬性是一個物件，則在其上遞迴呼叫 filterMatchingObjects 函式。
如果該屬性是匹配項或包含匹配的子項，則將其新增到過濾後的結果物件中。
返回過濾後的結果物件。
以下是一個示例：
function filterMatchingObjects(obj: any, filterValue: any): any {
const filteredObj: any = {};
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
const value = obj[key];
if (typeof value === "object" && value !== null) {
lterMatchingObjects(value, filterValue);
} else if (value === filterValue) {
filteredObj[key] = value;
}
}
}
return Object.keys(filteredObj).length &g; 0 ? filteredObj : null;
}
示例 1
在此示例中，我們定義了一個表示每個產品物件結構的 Product 介面。然後，我們建立了一個名為 products 的 Product 物件陣列。
定義資料後，我們對 product 陣列使用了 filter() 方法。此方法採用一個回撥函式，該函式檢查每個產品的 category 屬性是否與過濾器條件匹配，在本例中為“電子產品”。它建立一個名為 filteredProducts 的新陣列，該陣列僅包含類別為“電子產品”的產品。
使用者可以在輸出中觀察到，filteredProducts 陣列包含三個產品：“Macbook Pro”、“AirPods Pro”和“Kindle Paperwhite”。這些是滿足過濾器條件的產品。使用者可以在輸出中觀察到，filteredProducts 陣列包含三個產品：“Macbook Pro”、“AirPods Pro”和“Kindle Paperwhite”。這些是滿足過濾器條件的產品。
interface Product {
name: string;
category: string;
price: number;
}
const products: Product[] = [
{ name: "Macbook Pro", category: "electronics", price: 2000 },
{ name: "AirPods Pro", category: "electronics", price: 249 },
{ name: "Leather Jacket", category: "clothing", price: 350 },
{ name: "Running Shoes", category: "footwear", price: 120 },
{ name: "Kindle Paperwhite", category: "electronics", price: 119 },
];
const filteredProducts = products.filter((product) =&g; product.category === "electronics");
console.log(filteredProducts)
編譯後，它將生成以下 JavaScript 程式碼：
var products = [
{ name: "Macbook Pro", category: "electronics", price: 2000 },
{ name: "AirPods Pro", category: "electronics", price: 249 },
{ name: "Leather Jacket", category: "clothing", price: 350 },
{ name: "Running Shoes", category: "footwear", price: 120 },
{ name: "Kindle Paperwhite", category: "electronics", price: 119 },
];
var filteredProducts = products.filter(function (product) { return product.category === "electronics"; });
console.log(filteredProducts);
輸出
以上程式碼將產生以下輸出：
[
{ name: 'Macbook Pro', category: 'electronics', price: 2000 },
{ name: 'AirPods Pro', category: 'electronics', price: 249 },
{ name: 'Kindle Paperwhite', category: 'electronics', price: 119 }
]
示例 2
在此示例中，我們定義了一個表示每個使用者物件結構（包括其偏好）的 User 介面。我們建立了一個名為 users 的 User 物件陣列。然後，為了根據使用者的暗模式偏好過濾使用者，我們定義了 filterMatchingObjects 函式。此函式採用一個 User 物件陣列和一個 filterValue（表示暗模式偏好的布林值）作為引數。
在函式內部，我們遍歷每個 User 物件並檢查其偏好的 darkMode 屬性是否與 filterValue 匹配。如果找到匹配項，則將使用者新增到 filteredUsers 陣列中。
在輸出中，使用者可以觀察到 usersWithDarkMode 陣列僅包含已啟用 darkMode 偏好的使用者物件。
// Create the User interface
interface User {
name: string;
age: number;
email: string;
preferences: {
theme: string;
darkMode: boolean;
notifications: number;
};
}
// Create an array of User objects
const users: User[] = [
{
name: "John Doe",
age: 25,
email: "john.doe@example.com",
preferences: {
theme: "light",
darkMode: true,
notifications: 5,
},
},
{
name: "Jane Smith",
age: 30,
email: "jane.smith@example.com",
preferences: {
theme: "dark",
darkMode: false,
notifications: 10,
},
},
];
const filterMatchingObjects = (users: User[], filterValue: boolean): User[] => {
const filteredUsers: User[] = [];
for (const user of users) {
if (user.preferences.darkMode === filterValue) {
filteredUsers.push(user);
}
}
return filteredUsers;
};
const usersWithDarkMode = filterMatchingObjects(users, true);
console.log(usersWithDarkMode);
編譯後，它將生成以下 JavaScript 程式碼：
// Create an array of User objects
var users = [
{
name: "John Doe",
age: 25,
email: "john.doe@example.com",
preferences: {
theme: "light",
darkMode: true,
notifications: 5
}
},
{
name: "Jane Smith",
age: 30,
email: "jane.smith@example.com",
preferences: {
theme: "dark",
darkMode: false,
notifications: 10
}
},
];
var filterMatchingObjects = function (users, filterValue) {
var filteredUsers = [];
for (var _i = 0, users_1 = users; _i < users_1.length; _i++) {
var user = users_1[_i];
if (user.preferences.darkMode === filterValue) {
filteredUsers.push(user);
}
}
return filteredUsers;
};
var usersWithDarkMode = filterMatchingObjects(users, true);
console.log(usersWithDarkMode);
輸出
以上程式碼將產生以下輸出：
[
{
name: 'John Doe',
age: 25,
email: 'john.doe@example.com',
preferences: { theme: 'light', darkMode: true, notifications: 5 }
}
]
示例 3
在此示例中，我們建立了一個由巢狀物件結構表示的檔案系統。檔案系統中的每個物件都具有一個 name 屬性和一個可選的 children 屬性，該屬性包含一個巢狀檔案系統物件的陣列。
定義檔案系統結構後，我們實現了 filterMatchingObjects 函式。此函式根據指定的過濾器值遞迴地過濾檔案系統物件及其子物件。它建立一個名為 filteredObj 的新物件來儲存過濾後的結果。
為了執行過濾，該函式檢查當前物件是否具有子物件。如果是，則它會遍歷每個子物件，並在其上遞迴呼叫 filterMatchingObjects 函式。然後，它會過濾掉所有空值，只保留過濾後的子物件。如果有過濾後的子物件，則將其新增到 filteredObj 中。
該函式還會檢查當前物件的名稱是否與過濾器值匹配，或者它是否具有任何過濾後的子物件。如果任一條件為真，則返回 filteredObj。否則，返回 null。
使用者可以觀察輸出以檢視 filteredFileSystem 物件僅包含與過濾器值“file6.txt”匹配的檔案系統物件及其完全相同的子物件。
interface FileSystemObject {
name: string;
children?: FileSystemObject[];
}
function filterMatchingObjects(obj: FileSystemObject, filterValue: string): FileSystemObject | null {
const filteredObj: FileSystemObject = { name: obj.name };
if (obj.children) {
const filteredChildren: FileSystemObject[] = obj.children
.map(child => filterMatchingObjects(child, filterValue))
.filter(child => child !== null) as FileSystemObject[];
if (filteredChildren.length > 0) {
filteredObj.children = filteredChildren;
}
}
if (obj.name === filterValue || (filteredObj.children && filteredObj.children.length > 0)) {
return filteredObj;
}
return null;
}
// Example usage
const fileSystem: FileSystemObject = {
name: "root",
children: [
{
name: "folder1",
children: [
{ name: "file1.txt" },
{ name: "file2.txt" },
{ name: "file3.ts" }
]
},
{
name: "folder2",
children: [
{ name: "file4.js" },
{ name: "file5.ts" },
{ name: "file6.txt" }
]
}
]
};
const filteredFileSystem = filterMatchingObjects(fileSystem, "file6.txt");
console.log(filteredFileSystem);
編譯後，它將生成以下 JavaScript 程式碼：
function filterMatchingObjects(obj, filterValue) {
var filteredObj = { name: obj.name };
if (obj.children) {
var filteredChildren = obj.children
.map(function (child) { return filterMatchingObjects(child, filterValue); })
.filter(function (child) { return child !== null; });
if (filteredChildren.length > 0) {
filteredObj.children = filteredChildren;
}
}
if (obj.name === filterValue || (filteredObj.children && filteredObj.children.length > 0)) {
return filteredObj;
}
return null;
}
// Example usage
var fileSystem = {
name: "root",
children: [
{
name: "folder1",
children: [
{ name: "file1.txt" },
{ name: "file2.txt" },
{ name: "file3.ts" }
]
},
{
name: "folder2",
children: [
{ name: "file4.js" },
{ name: "file5.ts" },
{ name: "file6.txt" }
]
}
]
};
var filteredFileSystem = filterMatchingObjects(fileSystem, "file6.txt");
console.log(filteredFileSystem);
輸出
以上程式碼將產生以下輸出：
{ name: 'root', children: [ { name: 'folder2', children: [Array] } ] }
在本教程中，使用者學習瞭如何使用 TypeScript 過濾物件及其完全相同的子物件中所有匹配的物件。透過使用遞迴函式和 filter 方法，我們可以輕鬆地搜尋大型物件並提取所需的資料。這在資料管理至關重要的大型 Web 應用程式中尤其有用。
2K+ 次檢視
