数组循环总是返回最后一个值答案

【问题标题】：Array loop always returning last value数组循环总是返回最后一个值
【发布时间】：2020-02-19 09:45:35
【问题描述】：

我有以下循环：

var array = ["Value 1", "Value 2", "Value 3"];
var textArray = ["Text 1", "Text 2", "Text 3"];

var html = "";  

for (let i = 0; i < array.length; i++) {
  var html = "<div class='group' data-department='"+array[i]+"'>";
  html += "<div class='title'>" + textArray[i] + "</div>";
  html += "</div>";
}

这个JS的输出是：

<div class="group" data-department="Value 3">
   <div class="title">Text 3</div>
</div>

<div class="group" data-department="Value 3">
   <div class="title">Text 3</div>
</div>

<div class="group" data-department="Value 3">
   <div class="title">Text 3</div>
</div>

我追求的是：

<div class="group" data-department="Value 1">
   <div class="title">Text 1</div>
</div>

<div class="group" data-department="Value 2">
   <div class="title">Text 2</div>
</div>

<div class="group" data-department="Value 3">
   <div class="title">Text 3</div>
</div>

console.log("Value: " + array[i]); 返回：

Value: Value 1
Value: Value 2
Value: Value 3

然后console.log("Text: " + textArray[i]); 返回：

Text: Text 1
Text: Text 2
Text: Text 3

不确定为什么我的标记是根据数组中的最后一项呈现的？

从循环中删除 var 后，我得到以下结果（容器 div 相互嵌套）：

var html = "";

for (let i = 0; i < array.length; i++) {
  html += "<div class='group' data-department='"+array[i]+"'>";
  html += "<div class='title'>" + textArray[i] + "</div>";
  html += "</div>";
}

<div class="group" data-department="Value 1">
  <div class="title">Text 1</div>
  <div class="group" data-department="Value 2">
    <div class="title">Text 2</div>
    <div class="group" data-department="Value 3">
      <div class="title">Text 3</div>
    </div>
  </div>
</div>

【问题讨论】：

因为你每次都在重置你的变量：var html = "<div class='group' data-department='"+array[i]+"'>";
只需从 `var html = "
" 中删除 var ` 除此之外，我建议更多地了解 let、const、var。如何使用它以及在哪里使用它。

标签： javascript arrays

【解决方案1】：

var array = ["Value 1", "Value 2", "Value 3"];
var textArray = ["Text 1", "Text 2", "Text 3"];

var html = "";  

for (let i = 0; i < array.length; i++) {
   html += "<div class='group' data-department='"+array[i]+"'>";
  html += "<div class='title'>" + textArray[i] + "</div>";
  html += "</div>";


}  

console.log(html)

您在循环中分配了变量 html。这导致每次循环开始时 html 变量都会重置。最后，您将只有最后一个值。

你说值是嵌套的，但对我来说不是这样：

var html = "";
var array = ["Value 1", "Value 2", "Value 3"];
var textArray = ["Text 1", "Text 2", "Text 3"];


for (let i = 0; i < array.length; i++) {
  html += "<div class='group' data-department='"+array[i]+"'>";
  html += "<div class='title'>" + textArray[i] + "</div>";
  html += "</div>";
}

console.log(html)

<div class='group' data-department='Value 1'>
    <div class='title'>Text 1</div>
</div>

<div class='group' data-department='Value 2'>
    <div class='title'>Text 2</div>
</div>

<div class='group' data-department='Value 3'>
    <div class='title'>Text 3</div><
/div>

【讨论】：

@Mridul 知道为什么吗？这就是答案。
哦，我不难过，哈哈！我只是很困惑为什么有人会因为有趣@gramgram而投票反对
嘿@Kevin.a - 感谢您的回答，我知道我做错了什么。我已经停止在循环中重新分配 var，但现在标记是嵌套的。查看我的编辑
@Freddy 我刚刚用 sn-p 更新了我的问题，向您证明它没有嵌套值。

【解决方案2】：

var array = ["Value 1", "Value 2", "Value 3"];
var textArray = ["Text 1", "Text 2", "Text 3"];





var html = "";  

for (let i = 0; i < array.length; i++) {
  html += "<div class='group' data-department='"+array[i]+"'>";
  html += "<div class='title'>" + textArray[i] + "</div>";
  html += "</div>";
}  

console.log(html)

【讨论】：

var 将重新声明变量而不是之前的变量

【解决方案3】：

尽量避免使用innerHTML，使用document.createElement 广告而不是设置您需要的属性。使用appendChild 将一个元素放入另一个元素中

var array = ["Value 1", "Value 2", "Value 3"];
var textArray = ["Text 1", "Text 2", "Text 3"];

for (let i = 0; i < array.length; i++) {
  const div1 = document.createElement('div')
  div1.dataset.department = array[i]
  div1.classList.add(`group`)

  const div2 = document.createElement('div')
  div2.classList.add(`title`)
  div2.innerText = textArray[i]
  
  div1.appendChild(div2)
  document.querySelector(`.parent`).appendChild(div1)
}

<div class="parent">
</div>

【讨论】：

【解决方案4】：

循环中不需要 var html。

var array = ["Value 1", "Value 2", "Value 3"],
    textArray = ["Text 1", "Text 2", "Text 3"],
    html = "";  

for (let i = 0; i < array.length; i++) {
  html += "<div class='group' data-department='"+array[i]+"'>";
  html += "<div class='title'>" + textArray[i] + "</div>";
  html += "</div>";
}
console.log(html);

【讨论】：