如何在 array.map 中的每个元素之后添加逗号，除了 React JSX 中的最后一个元素答案

【问题标题】：How to add a comma in array.map after every element except last element in React JSX如何在 array.map 中的每个元素之后添加逗号，除了 React JSX 中的最后一个元素
【发布时间】：2018-06-01 13:57:00
【问题描述】：

如何在数组的每个元素之后添加一个尾随逗号，以制作如下列表：

INV, INV, INV, INV

请注意，最后一个元素没有尾随逗号

当前使用array.map 迭代列表：

var List = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.data.map(function(item) {
          return <div>{item}</div>;
        })}
      </div>
    );
  }
});

var data = ["red", "green", "blue"];

React.render(<List data={data} />, document.body);

【问题讨论】：

你需要一个字符串作为回报？
您可以尝试一个简单的 hack：array.map((item, index) => (<div>{ (index ? ', ': '') + item}</div>))。这将做的是，检查索引是否有效，添加一个逗号，否则为空白字符串。并且由于 JS 中的 0 是错误的，它将跳过第一个条目
arr.join(',');
data=data.map((x,i,arr)=>(i<arr.length-1)?x+',':x)
老兄只是做 .map 然后 .join.. 示例：array.map(c => c).join(',')

标签： javascript arrays reactjs react-native

【解决方案1】：

根据评论，您可以使用：

array.map((item, index) => ({ (index ? ', ': '') + item }))

此外，由于您想内联显示文本，因此不适合使用 div。相反，您可以/应该使用像span这样的内联元素

var List = React.createClass({
  render: function() {
    return (
      <div>
        {
          this.props.data.map(function(item, index) {
            return <span key={`demo_snap_${index}`}>{ (index ? ', ' : '') + item }</span>;
          })
        }
      </div>
    );
  }
});

var data = ["red", "green", "blue"];

ReactDOM.render(<List data={data} />, demo);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>

【讨论】：

记得在<span> 中添加key={index}，否则您会在控制台中收到警告
刚刚遇到这个问题，我想对这个解决方案表示感谢！我也想知道为什么 index ？ '，'：'' 工作？ :) 我不明白它背后的逻辑，因为 index 只是一个数字？
@SJ19 因为我们在前面加上值，所以我们必须确保我们没有添加额外的逗号。所以为此我做了那个三元运算符。由于在 JS 中 0 是错误的，因此对于第一次迭代，不会添加任何内容
@Rajesh OH，我一直在想相反的方式，我想知道它是如何知道我们在最后一个索引上的。现在它是有道理的。谢谢！智能解决方案。
太棒了！想要这样。

【解决方案2】：

使用 CSS adjacent sibling combinator (+) 将伪元素 (::before) 用逗号添加到所有同级项，但第一个：

var List = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.data.map(function(item) {
          return <div className="item">{item}</div>;
        })}
      </div>
    );
  }
});

var data = ["red", "green", "blue"];

ReactDOM.render(<List data={data} />, demo);

.item {
  display: inline-block;
}

.item + .item::before {
  display: inline-block;
  white-space: pre;
  content: ", ";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>

【讨论】：

只是一个固执己见的评论，但我更喜欢使用 JS。同样使用 div 并添加 display: inline-block 看起来很奇怪。
在这种情况下你为什么更喜欢 JS？
我更喜欢将 UI 更改保留给 CSS，并将此类操作保留给 JS。同样，这只是我的偏好/意见。是的，使用 CSS 会提高性能，但可能会降低可读性。
我实际上认为这是设计的一部分，因此适合 CSS。为什么会降低可读性？我很想知道你的意见:)
@Rajesh - 在这种情况下你的感觉是不正确的 :) 伪元素和内容确实是一个灰色区域。问题是 - 逗号是内容本身的一部分，还是设计的一部分？你可以用两种方式回答它。我不确定可读性。一方面它可能令人困惑——“逗号从何而来？”。另一方面，它减少了 JSX 中的噪音，并且简短的检查会告诉你它来自哪里。所以，正如你所说 - 见仁见智。

【解决方案3】：

你可以做的是，检查项目的索引，如果索引不等于最后一个项目，则呈现,，否则什么都没有。

这样写：

{
    this.props.data.map((item, i, arr) => <span>{item} {i != (arr.length-1) ? ',' : ''}</span>)
}

您还可以将总数据长度存储在一个单独的变量中，而不是在每次迭代中检查 arr.length 并检查该变量。

工作示例：

var List = React.createClass({
  render: function() {
    return (
      <div>
        {
	   this.props.data.map((item, i, arr) => <span>{item} {i != (arr.length-1) ? ', ' : ''}</span>)
        }
      </div>
    );
  }
});

var data = ["red", "green", "blue"];

ReactDOM.render(<List data={data} />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

【讨论】：

【解决方案4】：

const data = ["red", "green", "blue"];

class List extends React.Component{
render(){
return( 
<div>
{this.props.data.map((item, index) => {
  return <span>{ (index ? ', ' : '') + item }</span>;
})}
</div>
)
}
}

ReactDOM.render(
<List data={data}/>,
document.getElementById('demo')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>

【讨论】：

【解决方案5】：

就这样吧：

<div>{array.join(',')}</div>

【讨论】：

【解决方案6】：

我知道这已经晚了，但这是迄今为止最简单的方法，没有任何功能。在内联语句中效果很好，如果您的情况需要，则不需要单独的函数或映射。

const items = [1, 2, 3, 4, 5];

console.log("Items: " + "" + items + ".")

数组前的“”+由于某种原因添加了逗号，我不完全明白为什么。

【讨论】：

【解决方案7】：

试试 array.toString()

你会得到INV, INV, INV, INV

【讨论】：