Javascript concat 未按预期工作 - 未合并

Question

我正在尝试合并来自 for 循环的值，但它并没有将它们合并到一个数组中，而是创建了单独的数组？

我是 Javascript 的新手，所以我可能误解了如何使用 concat 函数。我在下面插入了我的脚本的简化版本，我希望输出将所有值都放在一个数组中。谁能帮我指明正确的方向？

代码

var fixed = document.getElementById('fixed');

var sections = document.getElementsByClassName('section');

for (i = 0; i < sections.length; i++) {
  var arr = [];

  arr = arr.concat(sections[i]);

  fixed.innerHTML = arr;
  console.log(arr);
}

<div class="fixed" id="fixed"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>

Answer 1

arr 变量必须在循环外声明一次，而不是每次循环都重新声明一个名为 arr 的新变量。

这样，结果将累积在一个数组中。

var fixed = document.getElementById('fixed');

var arr = [], sections = document.getElementsByClassName('section');

for (i = 0; i < sections.length; i++) {
  arr = arr.concat(sections[i]);

  fixed.innerHTML = arr;
  console.log(arr);
}

<div class="fixed" id="fixed"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>

Answer 2

在 for 循环之前声明数组，在循环之后设置 fixed.innerHtml 并阅读有关 javascript 范围的信息。

var fixed = document.getElementById('fixed');

var sections = document.getElementsByClassName('section');

var arr = [];

for (i = 0; i < sections.length; i++) {
  arr = arr.concat(sections[i]);
}

fixed.innerHTML = arr;

<div class="fixed" id="fixed"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>

Javascript concat 未按预期工作 - 未合并

Javascript concat not working as expected - not merging

javascript

arrays

for-loop

array-merge