Question

我需要编写一个带有参数的函数，该参数是元素列表。元素都是labels和inputs。函数应该创建一个对象，其中labels的文本是对象的键，而inputs的值是值属于对象的键。我需要我的函数必须返回该对象。

let elements = document.querySelectorAll('form *') //Selects all children of the form element
formObj(elements)

//I need it to return: {name: "Harry, email: "harry@gmail.com", age: 22}

<form>
    <label for='name'>name<label/>
    <input type='text' id='name' value="Harry"/>

    <label for='email'>email<label/>
    <input type='email' id='email' value="harry@gmail.com"/>

    <label for='age'>age<label/>
    <input type='text' id='age' value="22"/>
<form/>

我试图遍历所有属性，但不确定如何去做
请帮忙

Answer 1

您可以使用elements循环遍历for...of中的所有元素。您还可以创建一个名为form_details的空数组，该数组将保存您的结果对象。对于每个元素，您都可以获取其id和value。然后，使用if语句，可以检查是否定义了id和value，如果已定义，则将它们作为键值对添加到对象中。

请参见以下示例：

function formObj(elems) {
  const form_details = {};
  for(let elem of elems) {
    const key = elem.id;
    const val = elem.value;
    if(key && val)
      form_details[key] = val;
  }
  return form_details;
}

const elements = document.querySelectorAll('form *') //Selects all children of the form element

const details = formObj(elements);
console.log(details);

<form>
    <label for='name'>name</label>
    <input type='text' id='name' value="Harry"/>

    <label for='email'>email</label>
    <input type='email' id='email' value="harry@gmail.com"/>

    <label for='age'>age</label>
    <input type='text' id='age' value="22"/>
<form/>

一种更简单的方法是更改选择器以获取form元素，并将name属性添加到要检索的每个属性。然后，您可以使用FormData Web API从FormData中检索条目，然后可以使用Object.fromEntries()将其变成对象：

function formObj(elem) {
  const form = new FormData(elem);
  return Object.fromEntries([...form.entries()]);
}

const elements = document.querySelector('form') //Selects all children of the form element

const details = formObj(elements);
console.log(details);

<form>
    <label for='name'>name</label>
    <input type='text' name='name' id='name' value="Harry"/>

    <label for='email'>email</label>
    <input type='email' name='email' id='email' value="harry@gmail.com"/>

    <label for='age'>age</label>
    <input type='text' name='age' id='age' value="22"/>
<form/>

Answer 2

获取类型为input且也具有id的所有形式的子项，并为每个子项将一个属性添加到对象。

function getCustomFormData(form) {
  return [].reduce.call(form.querySelectorAll("input[id]"), function(result, dom) {
    return result[dom.id] = dom.value, result;
  }, {});
}

var form = document.querySelector("form");
var data = getCustomFormData(form);
console.log(data);

<form>
    <label for='name'>name</label>
    <input type='text' id='name' value="Harry">
    <label for='email'>email</label>
    <input type='email' id='email' value="harry@gmail.com">
    <label for='age'>age</label>
    <input type='text' id='age' value="22">
<form/>

如果您的数据具有以下格式（以与name属性相同的方式使用id），则可以改用FormData

function getCustomFormData(form) {
  var result = {};
  new FormData(form).forEach(function(value, key) {
    result[key] = value;
  });
  return result;
}

var form = document.querySelector("form");
var data = getCustomFormData(form);
console.log(data);

<form>
  <label for='name'>name</label>
    <input type='text' id='name' name='name' value="Harry">
    <label for='email'>email</label>
    <input type='email' id='email' name='email' value="harry@gmail.com">
    <label for='age'>age</label>
    <input type='text' id='age' name='age' value="22">
<form/>

如何遍历所有属性并将值作为对象返回

2 个答案: