javascript - 如何在 svelte {#each ...} 块中反转顺序

Question

是否可以反转项目在 svelte 的 {#each ...} 块中显示的顺序？

我想要一个对象数组，按 id 排序，最旧的条目排在第一位。我想先显示最新的条目。

编辑：为了说明使用 .reverse() 解决方案时会发生什么，这里是“之前”和“之后”过渡屏幕：

Answer 1

查看我尝试过的文档：

<script>
    let cats = [
        { id: 'J---aiyznGQ', name: 'Keyboard Cat' },
        { id: 'z_AbfPXTKms', name: 'Maru' },
        { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
    ];
</script>

<h1>The Famous Cats of YouTube</h1>

<ul>
    {#each [...cats].reverse() as { id, name }, i}
        <li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
            {i + 1}: {name}
        </a></li>
    {/each}
</ul>

似乎工作......在这里试试

的原因[...cats].reverse()是我们避免反转实际的猫数组而只是反转一个副本

Answer 2

答案是在 {#each} 中通过 tweeking 实现解决方案是困难的，也许是不可能的。就像 dbramwell 建议的那样，我在脚本中完成工作。代码可能需要一些改进/重构！

function reverseTodos() {
    let indexArr = [];
    for (const todo of todos) {
      indexArr.push(todo.id);
    }
    indexArr.reverse();

    let myNewArr = [];
    for (let i = 0; i < todos.length; i++) {
      myNewArr[i] = {
        id: indexArr[i],
        todo: todos[i].todo,
        checkbox: todos[i].checkbox
      };
    }
    return myNewArr.reverse();
  }

  $: reversedTodos = reverseTodos();

然后我将 reversedTodos 提供给 {#each} 块。