javascript - 使用 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，我建议切换到使用 let 或 const 而不是 var，因为它们具有 block 作用域(并且，在 const 的情况下，常量值强制执行)比旧的 var 的函数作用域更有用>.