Question

我想问一下在香草javascript中这相当于什么？

    var formData = {
        'name'              : $('input[name=name]').val(),
        'email'             : $('input[name=email]').val(),
        'phoneNumber'   : $('input[name=phoneNumber]').val()
    };

这段代码是针对JQuery版本的，但是如果我想编写类似的东西来在一个变量中声明所有字段，或者在普通js中是不可能的？

Answer 1

仅供参考：如果浏览器中有document.querySelector()，这就是jQuery内部所做的事情。此处（@linke 169）：https://github.com/jquery/jquery/blob/master/src/selector-native.js

var formData = {
    'name'              : document.querySelector('input[name=name]').value,
    'email'             : document.querySelector('input[name=email]').value,
    'phoneNumber'   : document.querySelector('input[name=phoneNumber]').value
};

Answer 2

为减少重复，您可以考虑reduce排列一组['name', 'email', 'phoneNumber']：

const formData = ['name', 'email', 'phoneNumber'].reduce(
  (a, name) => {
    a[name] = document.querySelector(`input[name="${name}"]`).value;
    return a;
  },
  {}
);

Answer 3

如果控件在表单中，则可以将其作为表单的命名属性访问，并省去 formData 变量，例如

var form = document.forms[0], // Assuming first form in document
    formData = {
      name       : form.personName.value,
      email      : form.email.value,
      phoneNumber: form.phoneNumber.value
    };

这可能会更高效，因为它涉及属性访问而不是一系列函数调用。

请注意，表单具有标准的name属性，因此任何表单控件都不应与此冲突，因此我已将 name 重命名为 personName 。

如何在Vanilla JS中的一个变量中声明一系列字段

3 个答案: