箭头函数结合扩展运算符的工作原理：(...args)作用解析

Great question—let’s unpack this step by step, because the rest parameter (that’s the official name for (...args) here) paired with arrow functions is a powerful combo, and it’s easy to mix up with the similar-looking spread syntax.

First: Clarify the Terminology #

First, let’s get the terms straight—they look identical but do opposite jobs:

• Rest Parameter: (...args) when used in a function’s parameter list. Its job is to collect multiple individual arguments into a single array.
• Spread Syntax: Also uses ..., but in reverse—takes an array (or iterable) and expands it into individual values.

Your question specifically focuses on the rest parameter in arrow functions, so let’s dive into that.

How (...args) Works in Arrow Functions #

Arrow functions have a key difference from regular functions: they don’t have their own arguments object. That’s where the rest parameter becomes essential—it’s the cleanest way for arrow functions to handle variable numbers of input arguments.

Here’s the play-by-play breakdown:

1. When you define an arrow function like const myArrowFunc = (...args) => { /* code */ }, the ...args tells JavaScript: "Take every argument passed to this function, no matter how many there are, and pack them all into an array called args."
2. This works for any number of arguments:
   • Call myArrowFunc()? args is an empty array [].
   • Call myArrowFunc('hello')? args is ['hello'].
   • Call myArrowFunc(1, true, { key: 'value' })? args is [1, true, { key: 'value' }].
3. You can combine the rest parameter with named parameters—but it must be the last parameter (JavaScript throws a syntax error if you place it anywhere else):

   const printUser = (name, ...details) => {
     console.log(`Name: ${name}`);
     console.log('Additional details:', details);
   };
   
   printUser('Bob', 28, 'developer', 'London');
   // Output:
   // Name: Bob
   // Additional details: [28, 'developer', 'London']
   

Why This Combo Is Useful #

• No more arguments hassle: Regular functions have an arguments object, but it’s a weird "array-like" object (you can’t use map() or reduce() on it directly without converting it first). The rest parameter gives you a real array right out the gate.
• Conciseness: Arrow functions are designed for brevity, and pairing them with the rest parameter lets you write tiny, flexible functions. For example, a sum function that works for any number of inputs:

  const sum = (...nums) => nums.reduce((total, num) => total + num, 0);
  sum(1, 2, 3); // Returns 6
  sum(5, 10, 15, 20); // Returns 50
  

• Consistency: Since arrow functions lack arguments, using the rest parameter is the only consistent way to handle variable arguments across both regular and arrow function types.

Common Pitfall: Don’t Mix Up Rest and Spread #

It’s easy to confuse the two, so let’s highlight the difference with an example:

// Rest parameter (collects into array)
const gather = (...args) => args;
gather(1, 2, 3); // Returns [1, 2, 3]

// Spread syntax (expands array into values)
const numbers = [1, 2, 3];
gather(...numbers); // Same as gather(1,2,3) → returns [1,2,3]

In the second call, ...numbers spreads the array into individual arguments, which the rest parameter then collects back into an array. It’s a round trip, but each step has a clear, distinct job.

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