Svelte 遍历键数组并从对象中获取键答案

【问题标题】：Svelte iterate over array of keys and get key from objectSvelte 遍历键数组并从对象中获取键
【发布时间】：2021-07-11 20:23:08
【问题描述】：

我有一个对象comments：

let comments = {"id1": ..., "id2: ..., ...};

然后我有一个数组commentsSortedByDate:

let commentsSortedByDate = ["id2", "id1", ...];

我想遍历这些 cmets。这是我尝试过的：

{#each commentsSortedByDate as commentId}
    <script> let comment = comments[commentId]; </script>
    <div class="comment" class:new={comment.isNew}> ... </div>
{/each}

这不起作用。如何在循环中定义这个comment 变量，以便我可以多次访问它而不必每次都输入comments[commentId]？

【问题讨论】：

标签： javascript svelte

【解决方案1】：

目前，除了您提出的建议（each hack 或一直在做comments[commentId]）之外，没有其他方法可以做到这一点。 Svelte 有一个即将推出的新功能，这将使这成为可能：Using @const in markup。这还没有实现，但是当它实现时，你可以这样做：

{#each commentsSortedByDate as commentId}
    {@const comment = comments[commentId]}
    <div class="comment" class:new={comment.isNew}> ... </div>
{/each}

【讨论】：

非常感谢！ :) 一旦实施，我会接受答案。

【解决方案2】：

或者您可以简单地重新映射您的输入数组并迭代 comment 对象而不是 id：

{#each commentsSortedByDate.map(id => comments[id]) as comment}
    <div class="comment" class:new={comment.isNew}> ... </div>
{/each}

【讨论】：

有趣的想法！

【解决方案3】：

我想出了一个老套的解决方案，但我不会接受这是一个正确的答案。

{#each commentsSortedByDate as commentId}
    {#each [comments[commentId]] as comment}
        <div class="comment" class:new={comment.isNew}> ... </div>
    {/each}
{/each}

【讨论】：

【解决方案4】：

您是否想做类似this 的事情？

<script>
  let commentsSortedByDate = ["id2", "id1"];
  let comments = {
    id1: {
      text: "lorem",
    },
    id2: {
      text: "ipsum",
    },
  };
</script>

<h2>
    Comments
</h2>
{#each commentsSortedByDate as comment}
  <ul>
    <li>
            {comment}: {Object.values(comments[comment])}
    </li>
  </ul>
{/each}

【讨论】：

不，我打算在每个块中声明一个变量comment。