javascript - 是什么导致 Squarespace 站点中初始化为 = [] 的数组在第一次引用它之前用对象填充？

Question

我编写了一些 JavaScript 来拦截提交事件上的表单数据，并从多个 <select> 构建对象数组。 fields，循环的每次迭代处理一个字段，获取字段值并将其插入数组中。每次迭代都应该构造 和 push()将一个对象放入数组中，直到所有表单字段都已处理完毕。

相反，在这个 test page在我的网站上，我在第一次推送之前的第一次迭代中从所有表单字段中获取了所有对象的完整数组。尽管有重复的推送，该数组在每次后续迭代中都保持完全相同。

js是:

function buildClasses(formData) {
  var timeslots = ['0830', '0900', '1030', '1245', '1415', '1545'];
  var classrooms = ['chapel', 'A', 'B', 'C', 'D', 'E', 'F', 'I'];
  var classes = [];
  var ts = '';
  var rm = '';
  var startIndex = 3; 

  if(formData[startIndex].value == 'attend') { 
    formData[startIndex].value = 'chapel'; 
  }
    else {formData[startIndex].value = 'unsure';} 
  for(var i = startIndex; i < formData.length; i++) {
    if(formData[i].value == 'unsure') {}
      else {
             ts = timeslots[i - startIndex];
             rm = formDataArr[i].value; 
             classes.push(
                            {
                               timeslot: ts,
                               room: rm
                            }
                         );  
           }  //  end else/if
    }  //  end for
  return classSelections;
}  //  end def fn buildClasses

<强> formData是:

3: Object {name: "select-yui_3_nnn ... nnn-field", value: "unsure"}
4: Object {name: "select-yui_3_nnn ... nnn-field", value: "A"}
5: Object {name: "select-yui_3_nnn ... nnn-field", value: "B"}
6: Object {name: "select-yui_3_nnn ... nnn-field", value: "A"}
7: Object {name: "select-yui_3_nnn ... nnn-field", value: "unsure"}
8: Object {name: "select-yui_3_nnn ... nnn-field", value: "C"}
length: 9

buildClasses()中的方案是循环遍历从索引 3 开始的表单字段，忽略“不确定”值，并构建 classes使用非不确定值，循环的每次迭代各一个。

使用 console.log() 进行调查在测试页上，我确定，在第一次迭代中，在第一个 push() 之前, classes是:

1: Object {timeslot: "0900", room: "A"}
2: Object {timesolt: "1030", room: "B"}
3: Object {timeslot: "1245", room: "A"}
5: Object {timeslot: "1545:, room: "C"}
length: 4

这太不可思议了，我知道。但在写这个问题之前，我在test page上进行了测试。几十次，总是这样的结果。

整个事情都在页面 Test Conference Registration 2019 上实时显示。 。我在代码中散布了控制台日志，以便人们可以看到每次迭代生成的内容。按照您的意愿进行测试。 (它连接并更新实时 AWS 表，因此您还将在控制台中获取 AWS 返回信息。)

该函数看起来简单明了。然而它在我的网站上产生了令人烦恼的结果。该网站建立在 Squarespace平台使用其“表单 block ”之一来构建表单。

我使用相同的代码构建了下面的代码片段。正如预期的那样，它运行正常。

因此，Squarespace 表单 block 的工作方式肯定存在某种原因，导致整个数组甚至在第一次推送之前就出现了。我希望这里有人可能有 Squarespace 的经验，并且能够提供一些线索。

感谢您阅读本文并为寻求答案所做的努力。

更新:

自从第一次发布这个问题以来，我对这个问题有了更好和不同的理解。我已经对其进行了彻底修改，更改了问题，并以新标题发布。我希望我已经澄清了事情并发布了比原来更好的问题。

感谢所有回答此问题第一个版本的人。

/*  new schema w/o comments  */

$(document).ready(function() {
  init();
}); // end doc.ready

function init() {
  document.addEventListener("submit", processFormData);
} // end def fn init

function processFormData(event) {
  event.preventDefault();
  var formData = $('form').serializeArray();
  classes = buildClasses(formData);
} //  end def fn processFormData

function buildClasses(fd) {
  var timeslots = ['0830', '0900', '1030', '1245', '1415', '1545'];
  var classrooms = ['chapel', 'A', 'B', 'C', 'D', 'E', 'F', 'I'];
  var ts = '';
  var rm = '';
  var startIndex = 3;
  var classes = [];

  console.log('classes post-initialization : ', classes);

  if (fd[startIndex].value == 'attend') {
    fd[startIndex].value = 'chapel';
  } else {
    fd[startIndex].value = 'unsure';
  }
  for (var i = startIndex; i < fd.length; i++) {
    if (fd[i].value == 'unsure') {} else {
      ts = timeslots[i - startIndex];
      rm = fd[i].value;

      console.log('fd[i].value : ', i, fd[i].value);
      console.log('classes pre-push', classes);

      classes.push({
        timeslot: ts,
        room: rm
      });

      console.log('classes post-push : ', classes);

    } //  end else/if
  } //  end for
  return classes;
} //  end def fn buildClassSelections

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
  <div>
    <label>First Name
    <input type="text" name="fname" size="25">
  </label>
  </div>
  <div>
    <label>Last Name
    <input type="text" name="lname" size="25">
  </label>
  </div>
  <div>
    <label>email address
    <input type="email" name="email" size="25">
  </label>
  </div>
  <div>
    <label>08:30 Keynote Speaker
    <select name="select">
      <option value="" name="defaultOptionUnsure">unsure</option>
      <option value="attend" name="">attend</option>
      <option value="not attend">not attend</option>
    </select>
  </label>
    <label>09:00 Classes
    <select name="select">
      <option value="">unsure</option>
      <option value="class room A">room A</option>
      <option value="class room B">room B</option>
    </select>
    </label>
    <label>10:30 Classes
    <select name="select">
      <option value="">unsure</option>
      <option value="class room A">room A</option>
      <option value="class room B">room B</option>
    </select>
  </label>
  </div>
  <div>
    <input type="submit" value="submit form">
  </div>
</form>

Answer 1

开始

const myForm    = document.querySelector("#My-Form")
,     FormNames = Array.from(myForm.elements).reduce((a,n)=>{ if (n.name ) a.push(n.name);  return a }, [])
;
var ResultArray = []

myForm.onsubmit = e =>{
  e.preventDefault()

  let info = {}
  for (let elm of FormNames) {
    info[elm] = myForm[elm].value
  }

  ResultArray.push(info)

  myForm.reset()
  console.clear()
  console.log('ResultArray = ', ResultArray )
}

body { font-family: Arial, Helvetica, sans-serif; }
form { margin: 1em }
label,
button {
  display: block;
  float: left;
  clear: both;
  margin: .3em;
}
label { width:24em; line-height: 2em; }
input,
select { float: right; width: 15em;}

<form action="" method="post" id="My-Form">
  <label>First Name     <input type="text"  name="fName"></label>
  <label>Last Name      <input type="text"  name="lName"></label>
  <label>email address  <input thpe="email" name="email"></label>
  <label>08:30 Keynote Speaker
    <select name="Keynote_Speaker">
      <option value=""          >unsure     </option>
      <option value="attend"    >attend     </option>
      <option value="not attend">not attend </option>
    </select>
  </label>
  <label>09:00 Classes
    <select name="Classes_09_00">
      <option value=""            >unsure </option>
      <option value="class room A">room A </option>
      <option value="class room B">room B </option>
      <option value="class room C">room C </option>
    </select>
  </label>
  <label>10:30 Classes
    <select name="Classes_10_30">
      <option value=""            >unsure </option>
      <option value="class room A">room A </option>
      <option value="claww room B">room B </option>
      <option value="class room C">room C </option>
    </select>
  </label>
  <button type="submit">submit form</button>
</form>