JavaScript中如何实现可选参数？附输入字段创建场景示例

嘿，我来帮你搞定这段代码里的问题～你写的思路没问题，但有两处语法和方法使用的错误，还有个小细节需要注意，我一步步给你修正：

首先，原代码里的for(key,value) in optional是不符合JavaScript语法的，而且input.getAttribute(key) = value完全用反了——getAttribute()是用来获取属性值的，设置属性得用setAttribute()才行。另外还要考虑用户可能不传optional参数的情况，不然直接循环会报错。

修正后的完整函数代码如下：

function createInputField(type, name, classList, optional) {
  var input = document.createElement('input');
  input.type = type;
  input.name = name;
  
  // 批量添加类名
  for(var i = 0; i < classList.length; i++){
    input.classList.add(classList[i]);
  }
  
  // 处理可选的DOM属性
  if (optional) { // 先判断是否传入了可选参数，避免undefined报错
    for (const key in optional) {
      // 只处理对象自身的属性，跳过原型链上的冗余属性
      if (optional.hasOwnProperty(key)) {
        input.setAttribute(key, optional[key]);
      }
    }
  }
  
  return input;
}

// 调用示例，这里我多加了个min属性演示效果
const input = createInputField("number", "numberfield", ["red", "top"], {"step":"0.05", "min": "0"});

几个重要的细节解释： #

• 判断可选参数：如果调用函数时没传最后一个optional参数，它会是undefined，直接循环会抛出错误，所以先加if (optional)做判断很有必要。
• hasOwnProperty检查：用for...in遍历对象时，会默认遍历原型链上的所有可枚举属性，加上这个判断能确保我们只处理用户传入的属性，避免意外的bug。
• setAttribute的优势：这个方法可以处理所有HTML元素属性，不管是标准属性（比如step、min）还是自定义属性，都能正确设置。如果是DOM元素的自有属性，你也可以直接用input[key] = optional[key]（比如input.step = optional.step），效果一样，但setAttribute的写法更统一通用。

这样你调用示例里的代码，就能成功给输入框加上step="0.05"的属性啦～

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