如何在JavaScript中的数组之间放置逗号

How to put a comma between arrays in JavaScript

本文关键字：之间 数组 JavaScript      更新时间：2023-09-26

这里有一个代码。。。

<div id="d1">
 <ol>
  <li id="li1"></li>
  <li id="li2"></li>
 </ol>
<div>
 <script>
   var dod = document.getElementById("d1");
   var foo = dod.getElementsByTagName("*");
    for(i=0;i<foo.length;i++){
       console.log(foo[i].id);
       }
 </script>

如何在Id之间加逗号？

让我们玩得开心：

console.log(Array.prototype.map.call(document.querySelectorAll("#d1 *"), function(e) {
    return e.id;
}).join(", "));

这本来是一个玩笑，但它有一个严肃的核心，并展示了一些方便的东西：

  • document.querySelectorAll将为您提供与CSS选择器匹配的元素的（断开连接的）NodeList。所以#d1 *给出了#d1的所有子元素。

  • Array.prototype.map很乐意用于任何类似数组的对象，它不要求您在实际数组中使用它。

  • Function#call允许您调用一个函数，并告诉它在函数调用期间this应该是什么。因此Array.prototype.map.call(document.querySelectorAll("#d1 *"), ...调用map，使其使用querySelectorAll中的NodeList作为this。

  • Array.prototype.map为每个"数组"元素调用一次函数，传入元素，并根据返回的内容构建一个新数组。因此，我们返回e.id的回调告诉它构建一个id值的数组。

  • Array.prototype.join从数组元素构建一个字符串，使用您提供的字符串作为它们之间的分隔符。

并且您从自己的代码中知道console.log输出它

但在查看HTML时，我们需要将其调整为仅包含实际具有id值的元素，否则结果中会出现大量空白。这很容易做到，我们只需添加filter:

console.log(Array.prototype.filter.call(document.querySelectorAll("#d1 [id]"), function(e) {
    return e.id !== "";
}).map(function(e) { return e.id; }).join(", "));

有两个变化：

  • 我使用#d1 [id]作为选择器，所以我们只返回具有id属性的元素。

  • 我在.map之前添加了对.filter的调用，以筛选出具有id属性但值为空的元素（遗憾的是，无法在CSS中筛选出这些元素，例如，防御<li id="">）。

示例

一种方法是：

var separator = ", ";
for(i=0;i<foo.length;i++){
   if(i == foo.length - 1) {
      separator = "";
   }
   console.log(foo[i].id + separator);
}
相关文章：