目標是顯示最近的活動概覽。
例如：我希望它顯示帖子、評論、用戶。帖子、評論和用戶物件存在于其對應的陣列中。所有物件都有一個時間戳（在 createdAt 下方），還有來自不同陣列的物件沒有的鍵。最近的活動應按時間戳排序。
（最終它應該可以按不同的值排序，但首先我想對合并和排序陣列/物件有一個更好的一般理解，而不是讓它變得復雜）
我想以某種方式將陣列合并成一個活動陣列之類的東西，然后對其進行排序并回圈它，并根據它是什么型別的物件有條件地輸出一個帶有其鍵的物件？
如果有人愿意舉個例子來解決這個問題，那會讓我很開心。我能想象的最好的事情就是解決這種情況的苗條 REPL。無論如何，我很感謝每一個提示。對于這個（我認為常見的）用例，可能已經有很好的示例和資源，但我沒有找到。如果有人可以參考這些，這也將是極好的。
我打算用這個例子來理解這個概念：
const users = [
{ id: 'a', name: 'michael', createdAt: 1 },
{ id: 'b', name: 'john', createdAt: 2 },
{ id: 'c', name: 'caren', createdAt: 3 }
]
const posts = [
{ id: 'd', topic: 'food', content: 'nonomnom' createdAt: 4 },
{ id: 'e', name: 'drink', content: 'water is the best' createdAt: 5 },
{ id: 'f', name: 'sleep', content: 'i miss it' createdAt: 6 }
]
const comments = [
{ id: 'g', parent: 'd', content: 'sounds yummy' createdAt: 7 },
{ id: 'h', parent: 'e', content: 'pure life' createdAt: 8 },
{ id: 'i', parent: 'f', content: 'me too' createdAt: 9 }
]
編輯：如果一個帖子和評論物件包含 userId ，它會是一個更好的例子，它有更多描述性的id鍵。userId但是，下面的答案使其非常易于理解并適用于“現實世界”用例。
我真的需要獲得一些聲譽，所以我可以支持你的答案。感謝您的所有建議，親愛的人類同胞！
uj5u.com熱心網友回復：
思考這個問題很有趣，而且很高興您將想法融入活動提要的架構中。
我會說你在考慮如何接近它方面走在正確的軌道上。
想一想：
- 您希望如何為應用程式中使用的資料建模
- 您如何處理該模型
- 然后想想你如何展示它
您有 3 種不同型別的資料，并且您有一個要創建的整體活動提要。每種型別都有createdAt共同點。
有幾種方法可以做到這一點：
- 只需將它們全部合并到一個陣列中，然后按 createdAt 排序
const activities = [...users, ...posts, ...comments];
activities.sort((a,b) => b.createdAt - a.createdAt); // Sort whichever way you want
這里棘手的部分是當你輸出它時，你需要一種方法來告訴陣列中每個元素是什么型別的物件。對于用戶，您可以查找name鍵，對于帖子，您可以查找topic鍵，對于評論，您可以查找parent/content鍵來確認物件型別，但這有點脆弱。
讓我們試試看能不能做得更好。
- 給每個活動物件一個明確的型別變數。
const activities = [
...users.map((u) => ({...u, type: 'user'})),
...posts.map((u) => ({...u, type: 'post'})),
...comments.map((u) => ({...u, type: 'comment'}))
];
現在，您可以根據其type欄位輕松判斷整個活動陣列中的任何給定元素是什么。
作為獎勵，此type欄位還可以讓您輕松添加一項功能，將活動源過濾到某些型別！它還使將來添加新型別的活動變得更加簡單。
這是一個顯示它并記錄輸出的打字稿游樂場。
作為型別安全的獎勵，您可以在 typescript 中添加型別以加強預期的資料型別：
例如。
type User = {
type: 'user';
name: string;
} & Common;
type Post = {
type: 'post';
topic: string;
content: string;
} & Common;
type UserComment = {
type: 'comment';
parent: string;
content: string;
} & Common;
type Activity = User | Post | UserComment;
uj5u.com熱心網友回復：
為了擴展其他答案，最終您將希望以不同的方式顯示每個元素，雖然您可以通過if測驗type已添加到物件的塊來執行此操作，但這不是非常可擴展的，因為新型塊需要至少有兩項更改，一項將型別添加到activities陣列中，一項將這種新型別添加到if塊中。
相反，如果我們按如下方式更改活動陣列：
const activities = [
...users.map((u) => ({...u, component: UserCompomnent})),
...posts.map((u) => ({...u, component: PostComponent})),
...comments.map((u) => ({...u, component: CommentComponent}))
];
其中UserComponent和是表示這些資料的不同方式PostComponent。CommentComponent
然后，當您遍歷資料以顯示它們時，我們可以使用svelte:component和利用我們已經定義的應該顯示哪個組件：
{#each acitivities as activity}
<svelte:component this={activity.component} {...activity} />
{/each}
uj5u.com熱心網友回復：
這是一種使用簡單的“幫助類”的方法，以便在顯示REPL時可以區分不同的物件
<script>
class User {
constructor(obj){
Object.assign(this, obj)
}
}
class Post {
constructor(obj){
Object.assign(this, obj)
}
}
class Comment {
constructor(obj){
Object.assign(this, obj)
}
}
const users = [
{ id: 'a', name: 'michael', createdAt: 1652012110220 },
{ id: 'b', name: 'john', createdAt: 1652006110121 },
{ id: 'c', name: 'caren', createdAt: 1652018110220 }
].map(user => new User(user))
const posts = [
{ id: 'd', topic: 'food', content: 'nonomnom', createdAt: 1652016900220 },
{ id: 'e', topic: 'drink', content: 'water is the best', createdAt: 1652016910220 },
{ id: 'f', topic: 'sleep', content: 'i miss it', createdAt: 1652016960220 }
].map(post => new Post(post))
const comments = [
{ id: 'g', parent: 'd', content: 'sounds yummy', createdAt: 1652116910220 },
{ id: 'h', parent: 'e', content: 'pure life', createdAt: 1652016913220 },
{ id: 'i', parent: 'f', content: 'me too', createdAt: 1652016510220 }
].map(comment => new Comment(comment))
const recentActivities = users.concat(posts).concat(comments).sort((a,b) => b.createdAt - a.createdAt)
</script>
<ul>
{#each recentActivities as activity}
<li>
{new Date(activity.createdAt).toLocaleString()} -
{#if activity instanceof User}
User - {activity.name}
{:else if activity instanceof Post}
Post - {activity.topic}
{:else if activity instanceof Comment}
Comment - {activity.content}
{/if}
</li>
{/each}
</ul>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/471915.html
上一篇：z3d中三角形的排序問題