JavaScript中实现多输入变量空值设为默认值1的方法

你的代码问题出在两个核心点：

1. 变量初始化时，let item_quantity, item_length, item_width, item_height, item_weight = 1; 只有item_weight被设为1，其他变量都是undefined；而且后续你直接用输入框的val()结果覆盖了所有变量值——当输入框为空时，val()返回空字符串，所以alert出来是空值。
2. 没有对输入框的值做判断，空值或无效值没有被替换成预设的1。

解决方案1：封装工具函数（推荐，代码简洁可复用） #

写一个通用函数处理输入框值，自动将空/无效值转为1：

// 工具函数：获取输入框值，空或非数字则返回1，否则返回数字类型的值
function getInputDefault($input) {
  const inputVal = $input.val().trim();
  return inputVal === '' || isNaN(Number(inputVal)) ? 1 : Number(inputVal);
}

// 使用函数处理每个输入框
var this_item = jQuery(this).parents('.row');
let item_quantity = getInputDefault(this_item.find('.item_quantity'));
let item_length = getInputDefault(this_item.find('.item_length'));
let item_width = getInputDefault(this_item.find('.item_width'));
let item_height = getInputDefault(this_item.find('.item_height'));
let item_weight = getInputDefault(this_item.find('.item_weight'));

alert(item_weight); // 输入框为空时会弹出1

解决方案2：单独判断每个变量（无需额外函数） #

如果不想封装函数，可以直接对每个输入框的值做判断：

var this_item = jQuery(this).parents('.row');

// 对每个变量单独处理：取输入框值并去空格，空或非数字则设为1
let item_quantity = (val => val === '' || isNaN(val) ? 1 : Number(val))(this_item.find('.item_quantity').val().trim());
let item_length = (val => val === '' || isNaN(val) ? 1 : Number(val))(this_item.find('.item_length').val().trim());
let item_width = (val => val === '' || isNaN(val) ? 1 : Number(val))(this_item.find('.item_width').val().trim());
let item_height = (val => val === '' || isNaN(val) ? 1 : Number(val))(this_item.find('.item_height').val().trim());
let item_weight = (val => val === '' || isNaN(val) ? 1 : Number(val))(this_item.find('.item_weight').val().trim());

alert(item_weight);

注意事项 #

• 用trim()是为了过滤用户输入的空格，避免空格被当成有效输入导致判断失误。
• 如果业务允许用户输入0，不要用简单的inputVal || 1——因为0在逻辑判断中会被视为false，会被错误替换成1，必须用上面的严谨判断逻辑。

内容的提问来源于stack exchange，提问作者Ravinder singh