javascript - 使用递归函数 trim 字段无法按预期工作

Question

我试图在提交之前 trim 表单的字段，但由于某种原因，这些值保持不变。递归函数定义为:

const trimFields = form => _.forIn(form, element => isObject(element) ? trimFields(element) : trimText(element))

但这根本不起作用，它似乎只是保留了原始值。

我在这里做错了什么？

Fiddle

Answer 1

您的递归函数实际上从未修改表单或返回有用的内容。当您遇到带有字符串(或非对象)的值时，您需要修改对象的键。如果你遇到一个对象的值，你可以再次调用你的函数来 trim 它的值。

const trimFields = form => _.forIn(form, (element, k) => {
  if(_.isObject(element)) {
    trimFields(element)
  } else {
    form[k] = _.trim(element); // set the object's key to be the trimmed version of its element
  } 
});

trimFields(form);
// set the values of the elements... 

不过，上述内容不需要 lodash 方法，您可以使用标准的内置结构来执行您想要的操作。

话虽如此，我建议您使用 _.mapValues()生成一个新的表单对象，而不是修改当前的表单对象。这是通过返回对象应采用的新值来实现的。如果 element 是一个对象，您可以在其上递归地重新运行函数以映射 element 的对象。如果不是对象，可以使用lodash的_.trim()方法返回当前对象值的 trim 值。

const trimFields = form => _.mapValues(form, 
  element => _.isObject(element) ? trimFields(element) : _.trim(element)
);

参见下面的示例:

const form = {name: '   John Doe   ', email: 'john@doe.com', handle: 'jdoe', social: { facebook: '    John Doe\'s page', twitter: '@jdoe'}};

const trimFields = form => _.mapValues(form, 
  element => _.isObject(element) ? trimFields(element) : _.trim(element)
);

const new_form = trimFields(form);
document.getElementById('name').value = new_form.name;
document.getElementById('email').value = new_form.email;
document.getElementById('handle').value = new_form.handle;
document.getElementById('facebook').value = new_form.social.facebook;
document.getElementById('twitter').value = new_form.social.twitter;

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<div style="display: flex; flex-direction: column">
  <input type="text" id="name" />
  <input type="email" id="email" />
  <input type="text" id="handle" />
  <input type="text" id="facebook" />
  <input type="text" id="twitter" />
</div>