分配给var后多维变为空的问题

时间:2019-05-12 20:41:58

标签: javascript

我在使用javascript时遇到了一个非常奇怪的问题,我正在构建一个多维数组,并以某种方式在var分配中将其清空为[[]]。 传递给buildFormObject函数的目标是html表单元素。

if (!Element.prototype.closest) {
    Element.prototype.closest = function(s) {
        var el = this;
        if (!document.documentElement.contains(el)) return null;
        do {
            if (el.matches(s)) return el;
            el = el.parentElement || el.parentNode;
        } while (el !== null && el.nodeType === 1);
        return null;
    };
}

var submit = document.getElementsByClassName('submit');
submitForm_click(submit);

function submitForm_click (trigger) {
  if (trigger.length > 0) {
    for (var t of trigger) {
      t.addEventListener('click', function (e) {
        e.preventDefault();
        submitForm(t.parentNode);
      });
    }
  } else {
    trigger.addEventListener('click', function (e) {
      e.preventDefault();
      submitForm(trigger.parentNode);
    });
  }
}

function submitForm (target) {
  var info = buildFormObject(target);
  console.log(buildFormObject(target));
  console.log(info);
}
  
function buildFormObject (target) {
var inputs = target.querySelectorAll('input,select');
var results = [];
var multi = [];
var iter = 0;
var pos = 0;
for (var input of inputs) {
  if (iter > 0) {
    iter = iter - 1;
    continue;
  }
  if (input.parentNode.closest('.multiInput') != null) {
    var obj = [];
    var parent = input.parentNode.closest('.multiInput');
    var children = parent.querySelectorAll('input,select');
    for (var i of children) {
      if (checkIfValueExist(i, i.type)) {
        obj[i.name] = i.value;
      }
    }
    multi[pos] = obj;
    results[parent.attributes.name.nodeValue] = multi;
    pos = pos + 1;
    iter = children.length-1;
  } else if (checkIfValueExist(input, input.type)) {
    results[input.name] = input.value;
    pos = 0;
    multi = [];
  }
}
return results;
}

function checkIfValueExist (target, type) {
  switch (type) {
    case 'text':
      return (target.value == "" ? false : true);
      break;
    case 'select-one':
      return (target.value == "" ? false : true);
      break;
    case 'checkbox':
      return (target.checked === false ? false : true);
      break;
    case 'radio':
      return (target.checked === false ? false : true);
      break;
    case 'button':
      return false;
      break;
    case 'submit':
      return false;
      break;
    default:
      return true;
      break;
  }
}
<form id="ct">
  <input type="hidden" name="task" value="createTable"/>
  <div id="tableSection" class="flexContainer">
    <div class="block">
      <label for="dbName">Select Database</label>
      <select name="dbName" class="dbList" required>
        <option value="" disabled selected>Please Select</option>
        <option value="1">test</option>
      </select>
    </div>
    <div class="block">
      <label for="tableName">Table Name</label>
      <input type="text" name="tableName" required/>
    </div>
  </div>
  <div class="row flexContainer multiInput" name="tableRow">
    <div class="trColumn">
      <label for="columnName">Name</label>
      <input type="text" name="columnName" required/>
    </div>
    <div class="trColumn">
      <label for="columnType">DataType</label>
      <select name="columnType" required>
        <option value="" disabled selected>Please Select</option>
        <option value="1">CHAR</option>
      </select>
    </div>
    <div class="trColumn">
      <label for="columnLength">Length</label>
      <input type="text" name="columnLength"/>
    </div>
    <div class="trColumn">
      <label for="columnPK">PK</label>
      <input type="checkbox" name="columnPK" value="1"/>
    </div>
    <div class="trColumn">
      <label for="columnDefault">DefaultValue</label>
      <input type="text" name="columnDefault"/>
    </div>
  </div>
  <input type="button" class="submit" value="Submit" />
</form>

结果1:

[task: "createDBTable", dbName: "1", tableName: "tester", tableRow: Array(1)]
dbName: "1"
tableName: "tester"
tableRow: [Array(0)]
task: "createDBTable"
length: 0
__proto__: Array(0)

结果2:

[task: "createDBTable", dbName: "1", tableName: "tester", tableRow: Array(1)]
    dbName: "1"
    tableName: "tester"
    tableRow: "[[]]"
    task: "createDBTable"
    length: 0
    __proto__: Array(0)

我不明白的是为什么tableRow从Array(6)值变为[[]]只是因为我将原始变量(从buildFormObject函数返回的值)设置为变量。 / p>

其他信息 在上面的代码片段中,我包括了正在使用的代码。似乎有一个小怪癖,console.log仅显示[],但是您键入应该在其中的属性名称之一,例如“ tableName”,然后就可以访问该值。对于“ tableRow”的问题属性,情况并非如此,因为嵌套数组显示为[]。我不确定这是否是测试软件,但是如果您在本地测试环境中尝试使用该软件,那么看看我的最初问题是什么都不会有问题。

0 个答案:

没有答案