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

Question

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

反应

<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