Svelte - 每个循环中的重要中间变量

Question

我怎样才能像在 React 中一样在 Svelte 的 HTML 中创建变量，或者这根本不是我应该如何使用 Svelte 的方式。我知道下面的例子很简单，但我正在考虑一种情况，我确实需要一些复杂的逻辑 subArray （无法使用单行）

React

<ul>
  {myArray.map((item) => {
    const subArray = item.items.filter(i = i > 0) // <- how can I have an intermediate variable like this in Svelte?
    return <li>{subArray.map(...)}</li>
  }}
</ul>

苗条

<ul>
  {#each myArray as item}
    <li>
        {#each <complex-logic> as subItem}
        ...
        {/each}
    </li>
  {/each}
</ul>

Answer 1

您可以使用 {@const} 指令，该指令是Svelte 最近添加的内容。在您的用例中：

<ul>
  {#each myArray as item}
    {@const subArray = item.items.filter(i => i > 0)}
    <li>
        {#each subArray as subItem}
        ...
        {/each}
    </li>
  {/each}
</ul>

Answer 2

如果不是太复杂，您可以直接修改 {#each} 中的数组

<script>
    let myArray = [
        {id: 1, items: [-2,-1,0,1,2]},
        {id: 2, items: [-20,-10,0,10,20]},
        {id: 3, items: [-222,-111,0,111,222]},
    ]
</script>

<ul>
    {#each myArray as item}
    <li>
        {item.id}:
        {#each item.items.filter(item => item >= 0) as subItem}
        {subItem}, 
        {/each}
    </li>
    {/each}
</ul>

，或者可以使用新的 {@const} 指令

<ul>
    {#each myArray as item}
    {@const filteredItems = item.items.filter(i => i > 0)} 
    <li>
        {item.id}:
        {#each filteredItems as subItem}
        {subItem}, 
        {/each}
    </li>
    {/each}
</ul>

如果它更复杂，为什么不将逻辑提取到函数中

    function complicatedModification(arr) {
        return arr.filter(item => item > 0)
    }
</script>

...
  {#each complicatedModification(item.items) as subItem}
        {subItem}, 
  {/each}
...

这是一个 REPL 包含所有选项