Svelte中实现可写数组Store的项添加/移除切换功能

我在Svelte中创建了一个可写数组Store，通过独立的姓名数组生成用户可点击的选择面板。点击姓名时，该姓名会添加到Store并显示在下方，此添加功能正常。但我希望当姓名已存在于Store中时，点击可移除该姓名，目前仅能实现不重复添加，无法完成移除操作。

现有代码 #

app.svelte：

<script>
    import { list } from './plus.js';
    
    let people = [
        {id: 1, name: "John"},
        {id: 2, name: "Sue"},
        {id: 3, name: "Bill"},
    ]
        
    const addToList = (person) => {
        console.log('person',person)
        console.log('len', $list.filter(e => e.name === person.name).length)
        
        if ($list.filter(e => e.name === person.name).length > 0) {
            console.log('remove name if it exists in array already')
            $list = $list.filter((listItem) => listItem != person.name)
    }else{
            console.log('add name to array if not there')
            $list = [...$list, person]          
        }
    }
    
</script>

<div class="person-list">
    {#each people as person}
    <div>
    <h4>{person.name}</h4>
    <button on:click={() => addToList(person)}>●</button>
    </div>
    {/each}
</div>

{#each $list as item}
    <p>
        {item.name}
    </p>
{/each}

plus.js：

import { writable } from 'svelte/store';

export const list = writable([]);

问题原因 #

移除逻辑里的判断错误：$list.filter((listItem) => listItem != person.name) 中，listItem 是对象，而 person.name 是字符串，对象和字符串永远不会相等，导致过滤后的数组和原数组一致，无法移除目标项。

解决方案 #

修改移除时的判断条件，通过对象的唯一标识（比如id，比name更可靠）或name属性来匹配项，替换错误的过滤逻辑：

修改后的addToList函数：

const addToList = (person) => {
    // 用id判断项是否存在，避免同名冲突
    const exists = $list.some(item => item.id === person.id);
    
    if (exists) {
        // 移除匹配的项
        $list = $list.filter(item => item.id !== person.id);
    } else {
        // 添加新项
        $list = [...$list, person];
    }
}

说明 #

• 使用id判断而非name，是因为name可能存在重复，而id是唯一标识，能确保准确匹配目标项
• some方法比filter更高效，只需判断是否存在，无需生成新数组

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