不要在for循环中的最后一个元素后面写逗号。

Question

我有一个函数，从数据库获取数据并在视图中显示：

function GetUsers() {
  let url = "/Home/GetUsers";
  $.ajax({
    type: 'GET',
    url: url,
    dataType: 'json',
    success: function(data) {
      console.dir(data);
      for (var i = 0; i < data.length; ++i) {
        $('#taskresult3').append('<b>' + data[i].UserName + "-" + data[i].RoleName + "," + '</b>');
      }
    }
  });
}

显示时它带有逗号，但在最后一个用户名+角色名之后，它也会添加一个逗号。据我所知，我需要获取for循环的最后一次迭代？我该如何解决这个问题？

- Balance

---

“据我所理解，我需要获取for循环的最后一次迭代？” - 更容易的方法是反过来做 - 检查您是否在第一个循环迭代中，如果不是，在当前项目之前输出逗号... - CBroe

Answer 1

我通常为这种情况做一个小技巧:

var separator = "";
for (var i = 0; i < data.length; ++i) {
  $('#taskresult3').append(separator + '<b>' + data[i].UserName + "-" + data[i].RoleName + '</b>');
  separator = ",";
}

- Jordi Castilla

---

我认为这是最好的解决方案。 - Abdullah Shoaib

Answer 2

只需检查当前元素是否为最后一个元素，如果是，则不添加逗号：

$('#taskresult3').append('<b>'+ data[i].UserName +"-"+ data[i].RoleName + (i === data.length - 1 ? "" : ",")+'</b>');

- Michał Perłakowski

Answer 3

你可以通过构建HTML数组并使用join()来显示它，从而避免逗号并提高逻辑性，如下所示：

success: function(data) {
  var html = data.map(function(item) {
    return data[i].UserName + ' - ' + data[i].RoleName;
  });
  $('#taskresult3').append(html.join(',');
}

另外，请记住 <b> 标签的语义用法：

但是，你不应该使用 <b> 来为文本添加样式；相反，你应该使用 CSS 的 font-weight 属性来创建加粗文本。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

我建议将您附加的HTML放入一个容器中，该容器通过CSS应用了font-weight: bold。

- Rory McCrossan

---

逗号也必须加粗。 - Ele

在哪种情况下可以将CSS规则应用于包含元素？ - Rory McCrossan

好的，但是在你的解决方案中缺失了。 - Ele

真的。我更新了建议使用CSS而不是<b>标签。 - Rory McCrossan

Answer 4

不要在最后一个元素后添加逗号。

for (var i = 0; i < data.length; ++i) {
  if (i === data.length - 1)
    $('#taskresult3').append('<b>' + data[i].UserName + "-" + data[i].RoleName '</b>');
  else
    $('#taskresult3').append('<b>' + data[i].UserName + "-" + data[i].RoleName + "," + '</b>');
}

还有一种方法是使用数组上的.join()方法。

var _html = [];
for (var i = 0; i < data.length; ++i) {

    var _inhtml = '<b>' + data[i].UserName + "-" + data[i].RoleName+'</b>';
    _html.push(_inhtml);

}
$('#taskresult3').append(_inhtml.join(","));

使用此功能，您可以减少多次操作DOM的开销。

- void

---

我没有给它负面评分，但很可能是因为这段代码本身不够DRY，且由此变得相当难看。 - Rory McCrossan

Answer 5

你可以使用 map 和 join 来解决这个问题，而不是使用循环。

$('#taskresult3').append('<b>' + data.map(item => item.UserName + "-" + item.RoleName).join(',</b><b>') + '</b>')

map会将数组转换为由item.UserName + "-" + item.RoleName组成的数组，然后使用,</b><b>进行连接，最后缺失的是第一个<b>和最后一个</b>

- t.niese