jQuery拆分input的name属性取值赋值失效问题排查

• this指向不符合预期：第一种写法中，$(this).attr('name') 是在调用val()方法的外层上下文直接执行的，此时this并不指向你选中的input元素，通常会指向外层作用域的window对象，因此无法拿到输入框的name属性，拆分后得到的键值为undefined，eval(undefined)执行结果也是undefined。jQuery给输入框赋值为undefined时不会修改原有值，因此没有生效也不会抛出错误。
• val方法的执行逻辑问题：jQuery的val()如果直接传入一个静态值，会给所有匹配元素统一设置该值，不会为每个元素单独计算值。只有你传入回调函数、或者用each()遍历每个元素时，才会针对每个匹配的输入框单独执行逻辑，此时回调/each内部的this才会指向当前正在处理的DOM元素，才能正确拿到对应name属性计算要赋的值。

额外优化建议：尽量避免使用eval，可以把变量存到一个映射对象中，既安全性能也更好，示例如下：

// 把变量放到对象中管理，避免eval的安全风险
const valueMap = {
  a: 1,
  b: 2
}
// 也可以直接给val传回调函数实现效果，不需要额外写each
$("input[name^='form-']").val(function() {
  const key = $(this).attr('name').split('-')[2]
  return valueMap[key]
})

内容的提问来源于stack exchange，提问作者Pulkit Sharma