Svelte遍历对象数组时如何按name字段分组渲染对应内容

完全可以实现，核心思路是先将原数组按name字段做分组聚合，再通过Svelte的{#each}语法遍历分组结果渲染即可。

实现步骤 #

1. 先对原数组做响应式分组
   在Svelte组件中用响应式声明处理原数组，将相同name对应的subname归集到一起：

export let items = [
  {
    name: 'package',
    subname: 'test'
  },
  {
    name: 'package',
    subname: 'test1'
  },
  {
    name: 'pack',
    subname: 'test2'
  }
]

// 响应式分组，items更新时分组结果会自动同步
$: grouped = items.reduce((res, item) => {
  const group = res.find(g => g.name === item.name)
  if (group) {
    group.subnames.push(item.subname)
  } else {
    res.push({
      name: item.name,
      subnames: [item.subname]
    })
  }
  return res
}, [])

2. 模板渲染逻辑
   嵌套两层{#each}即可输出你需要的结构：

{#each grouped as group}
<div class='item'>
  <div class='name'>{group.name}</div>
  {#each group.subnames as subname}
  <div class='subname'>{subname}</div>
  {/each}
</div>
{/each}

注：你给出的目标HTML结构存在笔误，所有<div>的闭合标签误写为了</span>，上述代码已经修正为正确的标签格式。

如果你的items数组永远保证同name的元素连续排列，也可以不提前分组，直接在遍历时判断上一个元素的name是否和当前一致来控制外层item容器的渲染，但这种写法耦合了数组的排序规则，可维护性更低，更推荐提前分组的方案。

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