FormData vs manual

Benchmark created on

Preparation HTML

<form id='the-form'>
<input name='a1' value='a1' />
<input name='a2' value='a2' />
<input name='a3' value='a3' />
<input name='a4' value='a4' />
<input name='a5' value='a5' />
<input name='a6' value='a6' />
<input name='a7' value='a7' />
<input name='a8' value='a8' />
<input name='a9' value='a9' />
<input type='checkbox' name='c1' value='c1' checked />
<input type='checkbox' name='c1' value='c2' checked />
<input type='checkbox' name='c1' value='c3' checked />
<input type='checkbox' name='c1' value='c3' />
</form>

Setup

const form = document.getElementById('the-form')

Test runner

Ready to run.

Testing in
TestOps/sec
FormData
const result = {}

for (const [name, value] of new FormData(form)) {
  if (name && value) {
    if (result[name]) {
      const arr = Array.isArray(result[name]) ? result[name] : [result[name]]
      arr.push(value)
      result[name] = arr
    } else {
      result[name] = value
    }
  }
}

return result
ready
For-of over form.elements
const result = {}

for (const { checked, name, type, value } of form.elements) {
  if (name && value && (checked || type !== 'checkbox')) {
    if (result[name]) {
      const arr = Array.isArray(result[name]) ? result[name] : [result[name]]
      arr.push(value)
      result[name] = arr
    } else {
      result[name] = value
    }
  }
}

return result
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.