如何优化JavaScript多参数重复函数？合并为单一通用函数

Absolutely! You can clean up this repetitive code by creating a single reusable function that handles the common logic (setting values and refreshing the selectpicker), while letting you pass in the specific DOM elements and values you need. This works perfectly even when you have 8-9 parameters to handle.

Step 1: Organize Your DOM Elements First #

Instead of declaring separate variables for each DOM element, group them into collections based on their purpose. This makes it easy to reference entire sets of elements later and improves performance by caching the DOM queries:

// Cache grouped DOM elements
const elementGroups = {
  params: $(document).find('select#param1, select#param2'),
  args: $(document).find('select#arg1, select#arg2, select#arg3')
};

Note: If your elements are added dynamically after page load, you might need to re-query them when needed instead of caching upfront, but this works great for static elements.

Step 2: Build the Reusable Function #

We'll use JavaScript's rest parameters (...values) to accept any number of input values, then pair each value with the corresponding element in the collection. This handles any parameter count seamlessly:

function setElementValues(elementCollection, ...values) {
  // Iterate over each element and assign the matching value (if provided)
  elementCollection.each(function(index) {
    if (values[index] !== undefined) {
      $(this).val(values[index]);
    }
  });
  
  // Refresh the selectpicker (fixed shared logic)
  // Note: Corrected your selector here - it should be .selectpicker (class selector)
  $('.selectpicker').selectpicker('refresh');
}

This function doesn't care how many elements or values you have—just make sure the order of values matches the order of elements in your collection.

Step 3: Replace Your Old Functions with Clean Calls #

Now you can ditch the separate paramValueSet and argValueSet functions for concise, readable calls:

// Replace paramValueSet(p1, p2)
setElementValues(elementGroups.params, p1, p2);

// Replace argValueSet(a1, a2, a3)
setElementValues(elementGroups.args, a1, a2, a3);

For groups with 8-9 parameters, it's just as straightforward:

// Example for a group with 9 elements
setElementValues(elementGroups.largeGroup, val1, val2, val3, val4, val5, val6, val7, val8, val9);

Bonus: Flexible Alternative (No Predefined Groups) #

If you prefer not to predefine element groups, you can pass the selector directly to the function for one-off use cases:

function setElementValues(selector, ...values) {
  const $elements = $(document).find(selector);
  $elements.each(function(index) {
    if (values[index] !== undefined) {
      $(this).val(values[index]);
    }
  });
  $('.selectpicker').selectpicker('refresh');
}

// Usage
setElementValues('select#param1, select#param2', p1, p2);
setElementValues('select#arg1, select#arg2, select#arg3', a1, a2, a3);

Why This Works #

By separating the variable parts (DOM element sets, input values) from the fixed logic (assigning values, refreshing the picker), we eliminate redundant code entirely. The rest parameter (...values) handles any number of inputs, so you never need to write a new function for a different parameter count again.

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