在 array.slice 之后删除 array.join 中的持久逗号答案

【问题标题】：Remove persistent comma in array.join after array.slice在 array.slice 之后删除 array.join 中的持久逗号
【发布时间】：2019-10-11 12:16:58
【问题描述】：

在遍历每个元素然后将它们推送到新数组之后，我正在创建一个新的 HTML 元素数组。然后我尝试对数组进行切片（这有效，但它在每个项目后插入一个逗号）。然后我使用 .join 删除逗号，但它没有，为什么？

var shortReviews = [];
var elm = document.getElementsByClassName('reviewContainer');
for (var i = 0; i < elm.length; i++) {
shortReviews.push(elm[i].innerHTML);
}

var snappy = document.querySelector("#reviewsSnap").innerHTML = shortReviews.slice(0, 2);
snappy.join('');

如果我在控制台中调用“snappy”，我会得到用逗号 (,) 分隔的数组，但是当我使用 snappy.join('') 时，我会在控制台中得到不带逗号的所需输出，但在页面输出中逗号仍然存在.从 snappy.join('') 中删除逗号并使其输出不带逗号分隔符，我缺少什么？

【问题讨论】：

您能补充更多信息吗？
您将shortReview.slice(0, 2) 分配为HTML，这将对数组进行字符串化，但您调用snappy.join() 1. 在不同数组上 2. 甚至没有将结果分配给任何东西.
一般来说，您可能应该处理 DOM 节点，而不是 HTML，因为后者更容易出错且更难维护。正如你已经在这里看到的。目的是什么 - 您要复制项还是移动项？
谢谢，我正在创建使用 document.createElement 创建的 HTML 元素的副本

标签： javascript arrays join slice

【解决方案1】：

只需将join() 链接到切片数组即可：

document.querySelector("#reviewsSnap").innerHTML = shortReviews.slice(0, 2).join('')

【讨论】：

谢谢，我确定我试过了，但显然没有……现在按预期运行。

【解决方案2】：

考虑操作 DOM 节点，而不是使用 HTML。这是更简洁、更强大的解决方案，因为 HTML 可能难以管理。以下是使用 DOM API 克隆节点并将它们添加到新父节点的方法：

var shortReviews = [];
var elm = document.getElementsByClassName('reviewContainer');
for (var i = 0; i < elm.length; i++) {
  //create a copy of the nodes
  shortReviews.push(elm[i].cloneNode(true));
}

var newContainer = document.querySelector("#reviewsSnap");
shortReviews
  .slice(0, 2) //take the first two
  .forEach(el => newContainer.appendChild(el)); //add them to the new container

.reviewContainer {
  border: 1px solid red;
}

#reviewsSnap .reviewContainer {
  border: 1px solid blue;
}

<div class="reviewContainer">
  <h3>short review 1</h3>
  <p>very short review: good</p>
</div>
<div class="reviewContainer">
  <h3>short review 2</h3>
  <p>very short review: average</p>
</div>
<div class="reviewContainer">
  <h3>short review 3</h3>
  <p>very short review: bad</p>
</div>

<div id="reviewsSnap">
  <h1>Chosen reviews</h1>
</div>

如果您想移动节点，而不是拥有两个副本，您可以放弃克隆步骤。每个节点只能有一个父节点，因此如果将其添加到新节点，它将从第一个父节点中删除：

var shortReviews = [];
var elm = document.getElementsByClassName('reviewContainer');
for (var i = 0; i < elm.length; i++) {
  //don't copy, take the actual nodes
  shortReviews.push(elm[i]);
}

var newContainer = document.querySelector("#reviewsSnap");
shortReviews
  .slice(0, 2) //take the first two
  .forEach(el => newContainer.appendChild(el)); //add them to the new container

.reviewContainer {
  border: 1px solid red;
}

#reviewsSnap .reviewContainer {
  border: 1px solid blue;
}

<div class="reviewContainer">
  <h3>short review 1</h3>
  <p>very short review: good</p>
</div>
<div class="reviewContainer">
  <h3>short review 2</h3>
  <p>very short review: average</p>
</div>
<div class="reviewContainer">
  <h3>short review 3</h3>
  <p>very short review: bad</p>
</div>

<div id="reviewsSnap">
  <h1>Chosen reviews</h1>
</div>

【讨论】：

非常感谢，我将仔细检查您的回答以了解更多信息，但对于脚本早期部分的上下文，我已经调用了 DOM 节点，然后输出为 HTML 元素（完整列表我的物品）。上面的 JS 从创建的 HTML 中读取，并从索引 0 中仅取 for 2 的所有项目创建预览。我感觉使用您的解决方案的组合会更加优雅和高效。
对于其他上下文，我正在解析 JSON-LD 数据以创建 HTML 格式的总评论的动态列表，然后在页面的其他地方我使用上面的 sn-p 仅显示少数选择项目。将 .join 添加到链中效果很好，我确信我尝试过。谢谢大家。