在HTML集合上迭代，以便在构造函数中动态定义值

Iterate over an HTMLcollection to dynamically define values in a constructor function?

本文关键字：构造函数 动态 定义 HTML 集合 迭代      更新时间：2023-09-26

我会直接进入描述和示例代码，因为我打赌你们中的许多人和我一样对标题感到困惑（尽了最大努力）。

情况：我有一个表单，它使用构造函数将输入数据提交给对象的新实例。

当前代码：

// Selectors
var submit = document.getElementById('submit-btn');
var formValues = document.getElementsByClassName('input');
// ** Task Object
function Task(arrayOfValues) {
  this.title = arrayOfValues[0].value;
  this.deadline = arrayOfValues[1].value;
  this.status = arrayOfValues[2].value;
}
submit.addEventListener('click', function(e) {
  e.preventDefault();
  var newTask = new Task(formValues);  
}, false);

问题：将数组作为参数传递并手动分配每个索引对我来说非常脆弱。如果我要扩展表单的数据集合，我必须手动将每个新值分配为一个单独的变量。如果要在数组上迭代并在构造函数中为变量动态赋值，那么语法或模式是什么？提前谢谢。我们非常感谢所有的帮助。

所需代码的示例

var formValues = document.getElementsByClassName('input');
// ** Task Object
function Task(arrayOfValues) {
  this.values = arrayOfValues;
  for (var i=0;i<this.values.length;i++) {
    var key = this.values[i].getAttribute('name'); 
    // This should be used with "this" to reference key ie. "this.title, this.deadline, this.status ect...
    var value = this.values[i].value;
    // This will be the value associated with each key reference ie. "this"
    return this[key] = value;
    // is this even possible ?        
  }
}
submit.addEventListener('click', function(e) {
  e.preventDefault();
  var newTask = new Task(formValues);  
}, false);

只需使用表单元素的名称作为对象中的属性名称。

function Task(arrayOfValues) {
  for (var i=0;i<arrayOfValues.length;i++) {
    var key = arrayOfValues[i].name;
    var value = arrayOfValues[i].value;
    this[key] = value;       
  }
}

不要在循环中使用return，这将在处理完数组中的第一个元素后结束构造函数，并忽略其余元素

我只需要将这三个参数分开，让调用方计算出标题、截止日期或状态

function Task(title, deadline, status) {
  this.title = title;
  this.deadline = deadline;
  this.status = status;
}

现在，您的调用者可以通过使用ID、数据属性或他们想要的任何东西来确定哪个是哪个。

<input id="title-x"> <input id="deadline"> <input id="status">
submit.addEventListener('click', function(e) {
  e.preventDefault();
  var getVal = function(id) { return  document.getElementById(id).value; }
  var newTask = new Task(getVal('title-x'), getVal('deadline'), getVal('status'));  
}, false);

现在，构造函数不依赖于数组中的顺序，甚至不依赖于它们是DOM元素。

您可能总是有一个合同，其中特定的输入通过数据属性映射到任务字段

<input data-task-field="title">
<input data-task-field="deadline">
<input data-task-field="status">
<input data-task-field="newField">
/**
 * @param {object} taskDescription 
 * @param {string} taskDescription.title
 * @param {string} taskDescription.deadline
 * @param {string} taskDescription.status
 * @param {string} taskDescription.newField
 */
function Task(taskDescription) {
  this.task = taskDescription;
}
submit.addEventListener('click', function(e) {
  e.preventDefault();
  var tasks = document.querySelectorAll('input[data-task-field]');
  var taskSpec = {};
  for (var i=0; i < tasks.length; i++) {
    taskSpec[tasks.getAttribute('data-task-field')] = tasks.value; 
  }
  var newTask = new Task(taskSpec);  
}, false);

我会使用一个关联数组-

http://www.w3schools.com/js/js_arrays.asp

var assArray = [];
assArray["title"] = document.getElementbyID(......)

这使得数组在语义上有意义，并且不那么脆弱。扩展表单并不重要，只要你不更改名称，它就会继续工作。

这也意味着，每次扩展表单时，您不必更改构造函数的调用签名，只需更改主体即可处理数组中的新元素（或者不更改，根据您的选择）。

相关文章：