Question

假设存在一个键数组：

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

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

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

我目前正在一个React项目上练习我的JS，在这个项目中，我需要弄清楚如何打印出这些锚点标签，并用逗号分隔最后一个元素。该示例的预期输出将是以下几行：

link1, link2, and link3

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

编辑：目前，这是我的方法：

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

到目前为止，它像Link1Link2Link3一样返回它们（如预期）。为了澄清我的问题。我只是在寻找是否有任何方法的指针，否则将无法检测到我所在的键是否是数组中的最后一个键。

Answer 1

使用map方法的索引参数：

return links.map((key, index, arr) => {
  console.log(arr.length - 1 === index) // true if last index
})

Answer 2

在JS中映射数组时，可以同时访问索引。您只需要传递一个函数(key, index) => ...而不是仅仅要求密钥。如果当前索引等于数组长度减去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"]

Answer 3

您可以使用CSS：

（我使用过scss，但也可以使用css）

  span {
    &::after {
      content: ', ';
      display: inline-block;
    }
    &:nth-last-child(2)::after {
      content: ' and ';
    }
    &:nth-last-child(1)::after {
      content: '';
    }
  }

查看示例：https://jsfiddle.net/maniator/oqrw2ukh/

Answer 4

JS具有内置功能array.join()。它遍历数组，创建一个包含所有项的单个字符串，并用用作参数的字符分隔。

如果参数为空（.join()），则默认为单个逗号；将使用参数中放入的任何字符串（例如.join('-')或.join('apple')。

查看下面的代码片段以获取实际效果：

var linksObj = {
  "link1": "https://google.com/",
  "link2": "https://facebook.com/",
  "link3": "https://stackoverflow.com/"
}

var linksAnchor = []; // Prepare empty array

for (let item in linksObj) {
  // Poplate array with the span and anchors, set to the original object
  linksAnchor.push('<span><a href="' + linksObj[item] + '">' + item + '</a></span>');
}

// Empty (default) join, uses a single comma
document.getElementById('navlistjoin').innerHTML = linksAnchor.join();

// Join using space, comma, then another space
document.getElementById('navlistjoinscs').innerHTML = linksAnchor.join(' , ');

// Join using a dash
document.getElementById('navlistjoindash').innerHTML = linksAnchor.join('-');

// Join using the string 'apple'
document.getElementById('navlistjoinapple').innerHTML = linksAnchor.join('apple');

a {
  text-decoration: none;
  color: #FF0000;
}

a:hover {
  text-decoration: underline;
}

<h4>.join()</h4>
<nav id="navlistjoin"></nav>
<h4>.join(' , ')</h4>
<nav id="navlistjoinscs"></nav>
<h4>.join('-')</h4>
<nav id="navlistjoindash"></nav>
<h4>.join('apple')</h4>
<nav id="navlistjoinapple"></nav>

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

4 个答案: