对对象数组进行快速迭代

Question

有如下固定的对象数组:

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

有可能使用迭代使用每个或其他任何东西来得到这样的东西吗?

<div class='item'>
<div class='name'>package</span>
<div class='subname'>test</span>
<div class='subname'>test1</span>
</div>
<div class='item'>
<div class='name'>pack</span>
<div class='subname'>test2</span>
</div>

Answer 1

一个解决方案是将项目合并在一个对象中，该对象的键为不同的name，值为所有subname的数组，就像这样:

{
"package": [
"test",
"test1"
],
"pack": [
"test2"
]
}

您可以在getSubnamesByName函数中这样做:

const getSubnamesByName = (items) => {
const mergedItems = {}
items.forEach(({name, subname}) => {
if (mergedItems[name]) mergedItems[name].push(subname)
else mergedItems[name] = [subname]
})

return mergedItems
}

然后将结果存储在安装组件时填充的mergedItems变量中:

<script>
import { onMount } from 'svelte';
const ITEMS = [ /* ... */ ];

let mergedItems = {}

const getSubnamesByName = (items) => { /* ... */}

onMount(async () => {
mergedItems = getSubnamesByName(ITEMS)
})
</script>

最后通过使用2个#each块迭代该对象的键和值:

{#each Object.keys(mergedItems) as name}
<div class='item'>
<div class='name'>{name}</div>

{#each mergedItems[name] as subname}
<div class='subname'>{subname}</div>
{/each}
</div>
{/each}

看一下REPL。