javascript - 如何在数组项之间添加逗号？

Question

使用 map 函数打印所有值时，如何在值之间添加逗号？ (使用 React，这就是为什么我有 key 等)

{ cars.map(car => {
    return(
      <p key={car.id}>{car.title} ,</p>
    );
}); }

这就是我想要的结果，最后一个数组项的末尾没有逗号:

Audi, Nissan, Mazda, Toyota

我应该以某种方式这样做吗？

{ cars.map((car, index) => {
  const separator = ", ";
  if(index === car.length - 1) {
     return(
       <p key={car.id}>{car.title} + separator </p>
     );
  }
}); 
}

Answer 1

您可以知道调用map的回调是最后一次使用您传递的 index 参数:

{cars.map((car, index) => {
    return(
        <p key={car.id}>{car.title} {index < cars.length - 1 ? ", " : ""}</p>
    );
})}

但请注意 p通常是一个 block 元素，所以汽车将被堆叠而不是显示在它们之间的空格(和逗号)内。我会使用 span取而代之(尽管您可以根据需要将 p 标记为 inline)。我用过span以下。
您还可以使用简洁的箭头函数，而不是带有函数体的冗长函数:

{cars.map((car, index) =>
    <span key={car.id}>{car.title} {index < cars.length - 1 ? ", " : ""}</span>
)}

现场示例:

const cars = [
    {id: 1, title: "Ford"},
    {id: 2, title: "Toyota"},
    {id: 3, title: "Lexus"},
];

ReactDOM.render(
    <div>{cars.map((car, index) =>
        <span key={car.id}>{car.title}{index < cars.length - 1 ? ", " : ""}</span>)
    }</div>,
    document.getElementById("root")
);

<div id="root"></div>
<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>

在某处的评论中，您询问如何使空间不中断(尽管我认为这可能是因为您使用 inline-block 和 p 元素，因此没有呈现正常空间)。为此，只需替换 ", "与 ",\u00A0"以上。

const cars = [
    {id: 1, title: "Ford"},
    {id: 2, title: "Toyota"},
    {id: 3, title: "Lexus"},
];

ReactDOM.render(
    <div>{cars.map((car, index) =>
        <span key={car.id}>{car.title}{index < cars.length - 1 ? ",\u00A0" : ""}</span>)
    }</div>,
    document.getElementById("root")
);

<div id="root"></div>
<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>