JavaScript函数参数配置：必填参数间设可选参数及工具函数创建

Hey there! Let's tackle these two JavaScript questions one by one—they're common scenarios but can trip you up if you don't know the right approaches.

The core thing to remember here is that JavaScript uses positional parameter matching. So if you want an optional parameter sandwiched between two required ones, you'll rely on default parameter values, but with a catch: you need to explicitly pass undefined to "skip" the optional parameter, otherwise the required parameter after it will get the wrong value.

Here's a concrete example where a and c are required, and b is optional:

function processData(a, b = 'default_value', c) {
  console.log(`a: ${a}, b: ${b}, c: ${c}`);
}

// 正常传递所有参数
processData(1, 'custom_b', 3); // Output: a: 1, b: custom_b, c: 3

// 不传可选参数b，必须用undefined占位
processData(1, undefined, 3); // Output: a: 1, b: default_value, c: 3

// ❌ 错误示范：直接跳过b会导致c被赋值为undefined
processData(1, 3); // Output: a: 1, b: 3, c: undefined

If you find passing undefined clunky, another option is to wrap optional parameters in an object (though this uses destructuring, so it's only applicable if that's allowed):

function processData(a, { b = 'default_value' } = {}, c) {
  console.log(`a: ${a}, b: ${b}, c: ${c}`);
}

processData(1, {}, 3); // Output: a: 1, b: default_value, c: 3
processData(1, { b: 'custom_b' }, 3); // Output: a: 1, b: custom_b, c: 3

Just make sure to set a default empty object for the optional parameter object, otherwise you'll get an error if you omit it entirely.

For this requirement—where the first parameter is a URL, the last two are required success/error callbacks, and any number of optional parameters can go in between—we'll use the arguments object to manually parse incoming parameters (since rest parameters have to be the last in the parameter list, we can't use them directly for the middle optional params).

Here's a robust implementation:

function request(url) {
  // 校验必填的URL
  if (!url) {
    throw new Error('URL parameter is required');
  }

  const totalArgs = arguments.length;
  // 提取最后两个参数作为回调
  const successCallback = arguments[totalArgs - 2];
  const errorCallback = arguments[totalArgs - 1];

  // 校验回调必须是函数
  if (typeof successCallback !== 'function' || typeof errorCallback !== 'function') {
    throw new Error('success and error must be valid functions');
  }

  // 收集中间的所有可选参数
  const optionalParams = [];
  for (let i = 1; i < totalArgs - 2; i++) {
    optionalParams.push(arguments[i]);
  }

  // 这里可以替换成实际的请求逻辑（比如 fetch/XMLHttpRequest）
  console.log(`Initiating request to: ${url}`);
  console.log('Optional parameters passed:', optionalParams);

  // 模拟请求成功（实际场景中根据请求结果调用对应回调）
  setTimeout(() => {
    successCallback('Request completed successfully!');
  }, 1000);
}

调用示例（无需解构）： #

// 无中间可选参数
request('https://api.example.com/data', 
  (response) => console.log('Success:', response), 
  (error) => console.error('Error:', error)
);

// 带3个中间可选参数
request('https://api.example.com/data', 
  'GET', 
  { headers: { 'Content-Type': 'application/json' } }, 
  15000, // 超时时间
  (response) => console.log('Success:', response), 
  (error) => console.error('Error:', error)
);

This implementation works by grabbing all incoming parameters via arguments, splitting out the required URL and callbacks, and collecting everything in between as optional params. It enforces the required parameters and validates the callback types, so it's safe and flexible for any number of middle parameters.

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