Svelte中如何从JSON数据源按ID获取指定对象数据

核心用JS原生Array.find()方法实现，该方法找到第一个符合条件的项后会立刻终止遍历，不会跑完整个数组，完全满足不做全量遍历的要求。

固定id匹配实现（例如固定取id=2的项目） #

直接在组件内拿到全量projects数组后做筛选即可，代码如下：

<script context="module">
    export const load = async ({ fetch }) => {
        const res = await fetch("https://amarton.github.io/amcom-portfolio-svelte/static/port.json");
        const projects = await res.json();
        return {
            props: {
                projects,
            }
        }
    }
</script>

<script>
    export let projects;
    // 匹配id等于2的项目，无匹配项时返回undefined
    const currentProject = projects.find(item => item.id === 2);
</script>

<!-- 渲染部分加兜底判断，避免匹配失败时报错 -->
{#if currentProject}
    <h2>{currentProject.title}</h2>
    <p>{currentProject.body}</p>
{:else}
    <p>对应项目不存在</p>
{/if}

动态id匹配实现（详情页常用场景） #

如果是做项目详情页，id从路由参数动态获取（比如路由格式为/project/[id]），可以直接在load函数里完成筛选，不需要把全量projects数组传给页面组件，性能更好：

<script context="module">
    export const load = async ({ fetch, params }) => {
        const res = await fetch("https://amarton.github.io/amcom-portfolio-svelte/static/port.json");
        const projects = await res.json();
        // URL取的参数默认是字符串，要转成数字和JSON里的id类型保持一致
        const targetId = Number(params.id);
        const currentProject = projects.find(item => item.id === targetId);
        
        return {
            props: {
                currentProject
            },
            // 匹配不到项目时返回404状态码
            status: currentProject ? 200 : 404
        }
    }
</script>

<script>
    export let currentProject;
</script>

<!-- 渲染逻辑和上面一致 -->
{#if currentProject}
    <h2>{currentProject.title}</h2>
    <p>{currentProject.body}</p>
{:else}
    <p>对应项目不存在</p>
{/if}

注意事项：做id匹配时必须保证对比的两个值类型一致，比如JSON中id是数字类型，就不要直接用字符串类型的id去匹配，否则会出现匹配失效的问题。

内容的提问来源于stack exchange，提问作者amarton