使用 array.join() 来内爆类名数组 javascript

Question

我有一些 html 标签，我正在尝试使用 javascript 数组加入它们。我尝试打印出数组以查看它的外观。如果它尝试打印出一个数组项，它可以工作但整个数组不显示<p>Click the button to join the array elements into a string.</p><button onclick="myFunction()">Try it</button><p class="demo">Banana</p><p class="demo">Orange</p><p class="demo">Appl</p><p id="demo"></p><script>function myFunction() {  var fruits = document.querySelectorAll(".demo")[];  var y = document.getElementById("demo");  y.innerHTML = fruits.join(',');}</script>我希望它将类名数组连接在一起并打印出结果，但它什么也没显示。我不太擅长 javascript，希望得到帮助。

Answer 1

我不确定您要通过添加[]到查询选择器代码的末尾来做什么；如果那是你的想法，那不会把它变成一个数组。document.querySelectorAll返回 HTML 元素的集合，但不是实际的数组。要转换它，您有一些选择。你可以这样做：

var fruits = [...document.querySelectorAll(".demo")];

...是扩展运算符，它将结果集合扩展到新数组中。或者你可以这样做：

var fruits = Array.from(document.querySelectorAll(".demo"));

或者，当然，您可以手动循环遍历集合并推送到数组，但我不建议这样做。

此外，由于扩展运算符和Array.from方法都来自 ES6，我建议切换到 usinglet或const代替var，因为它们具有块范围（并且，在 const 的情况下，常量值强制执行）比旧的功能范围var。