[TS LeetCode] 2631. Group By

題目摘要:

這個題目要求你編寫一個程式碼，以擴展所有陣列（arrays）的功能，使得你可以在任何陣列上調用 array.groupBy(fn) 方法，該方法將返回一個分組版本的陣列。分組後的陣列是一個物件，其中每個鍵是回調函數 fn(arr[i]) 的輸出，而每個值是一個包含所有原陣列中帶有該鍵的項目的陣列。你需要實現這一功能，而不使用 lodash 的 _.groupBy 函數。

題目知識點:

1. TypeScript中的全局擴展 (Global Extension)

2. 使用泛型 (Generics) 創建可重用的函數

3. 迭代陣列中的元素

4. 物件的鍵值對操作

先備知識

1. 基本的 TypeScript 知識

2. 陣列和物件的基本操作

應用情境:

這段程式碼可用於網頁頁面開發中的多種場景，例如：

1. 使用者管理：當需要將使用者按照不同屬性（例如角色、註冊日期等）分組時，可以使用 `groupBy` 函數輕鬆實現。

2. 商品分類：當您有一個商品列表，並希望按照類別將它們分組，以便在網站上創建選單或篩選器時，這個函數可以派上用場。

3. 日程安排：在行事曆應用中，您可以使用 `groupBy` 將事件按照日期分組，以便顯示每天的事件列表。

結論:

這個 TypeScript 程式碼擴展了陣列的功能，讓我們可以輕鬆地按照指定的函數將陣列中的項目分組。它使用了 TypeScript 中的泛型、陣列迭代和物件鍵值對的操作來實現這一功能。這在網頁頁面開發中可以用於各種情境，從用戶管理到數據分析，都能提供更好的組織和可視化數據的方式。

result[key] ||= []; 的用法

這行程式碼使用了 JavaScript 的 Nullish 合併運算子 (??=) 的語法。它的作用是，如果 result[key] 的值為 null 或 undefined，則將其初始化為一個空陣列 []。這確保了無論何時將項目添加到 result[key] 中，它都已經存在並可以接受新的項目。

解答:

declare global {
    interface Array<T> {
        groupBy(fn: (item: T) => string): Record<string, T[]>
    }
}

Array.prototype.groupBy = function <T>(fn: (item: T) => string) {
    const result: Record<string, any> = {};
    for (let item of this) {
        const key: string = fn(item);
        result[key] ||= [];
        result[key].push(item);
    }
    return result;
}

export { }