javascript - 如何在映射数组时更改最后一个元素的逻辑

Question

假设存在一个键数组:

[ "link1", "link2", "link3" ]

并且有一个名为 links 的 JSON 对象，其格式如下:

{
  "link1": "https://google.com/",
  "link2": "https://facebook.com/",
  "link3": "https://stackoverflow.com/"
}

我目前正在开发一个 React 项目来练习我的 JS，在这个项目中，我需要弄清楚如何将这些作为 anchor 标记打印出来，除了最后一个元素之外，还用逗号分隔。该示例所需的输出将类似于以下内容:

link1, link2, and link3

除非它们是与正确链接相关的 anchor 标记。您建议我如何解决这个问题？

编辑:目前这是我的方法:

return links.map((key) => {
  return (
    <span><a href={this.props.content.links[key]} key={key}>{key}</a></span>
  )
})

到目前为止，它像 Link1Link2Link3 一样返回它们(如预期)。为了澄清我的问题。我只是在寻找一个指针，指示是否有任何方法或其他方法可以检测我所在的键是否是数组中的最后一个键。

Answer 1

在JS中映射数组时，可以同时访问索引。您只需传递一个函数 (key, index) => ... 而不是只要求 key 。如果当前索引等于数组长度减 1(因为索引从 0 开始)，则您位于数组的最后一个元素。

这是一个例子:

const arr = ["foo", "bar", "baz"]
const result = arr.map((x, i) => i === arr.length - 1 ? "Hello" + x : x)

console.log(result) // => ["foo", "bar", "Hello baz"]