Слияние и сортировка массивов объектов JS/TS/Svelte — концептуальное понимание

Об этом интересно думать, и здорово, что вы продумываете архитектуру ленты активности.

Я бы сказал, что вы на правильном пути с тем, как вы думаете о подходе к этому.

Подумай о:

1. Как вы хотите смоделировать данные для использования в вашем приложении
2. Как вы обрабатываете эту модель
3. Затем подумайте, как вы это покажете.

У вас есть 3 разных типы данных, и у вас есть общая лента активности, которую вы хотите создать. У каждого типа есть createdAt общего.

Есть несколько способов сделать это:

1. Просто объедините их все в один массив, а затем отсортируйте по createdAt.

const activities = [...users, ...posts, ...comments];
activities.sort((a,b) => b.createdAt - a.createdAt); // Sort whichever way you want

Сложность здесь заключается в том, что при выводе вам понадобится способ указать, к какому типу объекта относится каждый элемент массива. Для пользователей вы можете искать ключ name, для сообщений вы можете искать ключ topic, для комментариев вы можете искать ключи parent/content для подтверждения типа объекта, но это немного хрупкий подход.

Давайте попробуем посмотреть, сможем ли мы сделать лучше.

2. Назначьте каждому объекту действия явную переменную типа.

const activities = [
  ...users.map((u) => ({...u, type: 'user'})),
  ...posts.map((u) => ({...u, type: 'post'})),
  ...comments.map((u) => ({...u, type: 'comment'}))
];

Теперь вы можете легко сказать, что любой данный элемент во всем массиве действий основан на его поле type.

В качестве бонуса это поле type также позволяет вам легко добавить функцию для фильтрации ленты активности только по определенным типам! И это также значительно упрощает добавление новых видов деятельности в будущем.

Вот машинописная площадка, показывающий это и регистрирующий вывод.

В качестве бонуса за безопасность типов вы можете добавлять типы в машинописный текст, чтобы усилить ожидаемые типы данных:

например.

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;

Вот подход, использующий простые «вспомогательные классы», чтобы можно было различать разные объекты при отображении РЕПЛ

<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>

Чтобы расширить другие ответы, в конечном итоге вы захотите показать каждый элемент также по-разному, хотя вы можете сделать это с помощью блока 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}