跳至主要內容

ES6 中rest参数的理解

pax大约 6 分钟

ES6 中 rest 参数的理解

Rest 参数（Rest Parameters）是 ES6 引入的一个重要特性，它允许我们将不定数量的参数表示为一个数组。Rest 参数提供了一种更优雅和灵活的方式来处理函数参数。

1. 基本概念

什么是 Rest 参数？

Rest 参数使用 ... 语法，将函数中剩余的参数收集到一个数组中。它必须是函数参数列表中的最后一个参数。

// 基本语法
function functionName(...restParameter) {
  // restParameter 是一个包含所有剩余参数的数组
  console.log(restParameter);
}

// 调用
functionName(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

2. 基本用法示例

简单的 Rest 参数

function sum(...numbers) {
  console.log(Array.isArray(numbers)); // true
  console.log(numbers); // [1, 2, 3, 4, 5]
  
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15
console.log(sum(10, 20)); // 30
console.log(sum()); // 0

与普通参数结合使用

function introduce(name, age, ...hobbies) {
  console.log(`姓名: ${name}`);
  console.log(`年龄: ${age}`);
  console.log(`爱好: ${hobbies.join(', ')}`);
}

introduce('Alice', 25, '阅读', '游泳', '编程');
// 姓名: Alice
// 年龄: 25
// 爱好: 阅读, 游泳, 编程

introduce('Bob', 30, '音乐');
// 姓名: Bob
// 年龄: 30
// 爱好: 音乐

3. Rest 参数与 arguments 对象的对比

使用 arguments 对象（ES5 方式）

// ES5 中使用 arguments 对象
function oldWaySum() {
  console.log(arguments); // Arguments(5) [1, 2, 3, 4, 5]
  console.log(Array.isArray(arguments)); // false
  
  // 需要转换为数组才能使用数组方法
  const argsArray = Array.prototype.slice.call(arguments);
  return argsArray.reduce((total, num) => total + num, 0);
}

console.log(oldWaySum(1, 2, 3, 4, 5)); // 15

使用 Rest 参数（ES6 方式）

// ES6 中使用 rest 参数
function newWaySum(...numbers) {
  console.log(numbers); // [1, 2, 3, 4, 5]
  console.log(Array.isArray(numbers)); // true
  
  // 直接可以使用数组方法
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(newWaySum(1, 2, 3, 4, 5)); // 15

主要区别

function compareApproaches(first, second) {
  // arguments 对象
  console.log('arguments:', arguments);
  console.log('arguments length:', arguments.length);
  console.log('arguments 是数组吗?', Array.isArray(arguments)); // false
  
  // rest 参数
  console.log('rest 参数:', rest);
  console.log('rest 参数长度:', rest.length);
  console.log('rest 参数是数组吗?', Array.isArray(rest)); // true
}

compareApproaches('a', 'b', 'c', 'd', 'e');

4. 实际应用场景

数学计算函数

// 求平均值
function average(...numbers) {
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((total, num) => total + num, 0);
  return sum / numbers.length;
}

console.log(average(1, 2, 3, 4, 5)); // 3
console.log(average(10, 20, 30)); // 20

// 找最大值和最小值
function findMinMax(...numbers) {
  if (numbers.length === 0) return null;
  return {
    min: Math.min(...numbers),
    max: Math.max(...numbers)
  };
}

console.log(findMinMax(5, 2, 8, 1, 9)); // { min: 1, max: 9 }

字符串处理

// 连接字符串
function joinStrings(separator, ...strings) {
  return strings.join(separator);
}

console.log(joinStrings('-', 'hello', 'world', 'es6')); // hello-world-es6
console.log(joinStrings(' ', 'JavaScript', 'is', 'awesome')); // JavaScript is awesome

// 格式化消息
function formatMessage(template, ...values) {
  return template.replace(/{(\d+)}/g, (match, index) => {
    return values[index] !== undefined ? values[index] : match;
  });
}

console.log(formatMessage('Hello {0}, you have {1} messages', 'Alice', 5));
// Hello Alice, you have 5 messages

数组操作

// 合并数组
function mergeArrays(...arrays) {
  return [].concat(...arrays);
}

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

console.log(mergeArrays(arr1, arr2, arr3)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 去重合并
function uniqueMerge(...arrays) {
  const allItems = [].concat(...arrays);
  return [...new Set(allItems)];
}

const arr4 = [1, 2, 3, 2];
const arr5 = [3, 4, 5, 4];
const arr6 = [5, 6, 1];

console.log(uniqueMerge(arr4, arr5, arr6)); // [1, 2, 3, 4, 5, 6]

5. 在箭头函数中的使用

// 箭头函数中的 rest 参数
const multiply = (...numbers) => {
  return numbers.reduce((product, num) => product * num, 1);
};

console.log(multiply(2, 3, 4)); // 24

// 简洁形式
const sumAll = (...nums) => nums.reduce((a, b) => a + b, 0);

console.log(sumAll(1, 2, 3, 4, 5)); // 15

6. 与解构赋值结合

// 与数组解构结合
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;

console.log(first);  // 1
console.log(second); // 2
console.log(rest);   // [3, 4, 5]

// 在函数参数中使用解构和 rest
function processUser([name, age], ...scores) {
  const averageScore = scores.reduce((sum, score) => sum + score, 0) / scores.length;
  return {
    name,
    age,
    scores,
    averageScore
  };
}

const userData = ['Alice', 25];
const userScores = [85, 92, 78, 96];

console.log(processUser(userData, ...userScores));
// { name: 'Alice', age: 25, scores: [85, 92, 78, 96], averageScore: 87.75 }

7. 在类方法中的使用

class Calculator {
  // 静态方法使用 rest 参数
  static add(...numbers) {
    return numbers.reduce((sum, num) => sum + num, 0);
  }
  
  static multiply(...numbers) {
    return numbers.reduce((product, num) => product * num, 1);
  }
  
  // 实例方法使用 rest 参数
  calculate(operation, ...operands) {
    switch (operation) {
      case 'add':
        return operands.reduce((sum, num) => sum + num, 0);
      case 'multiply':
        return operands.reduce((product, num) => product * num, 1);
      case 'max':
        return Math.max(...operands);
      case 'min':
        return Math.min(...operands);
      default:
        throw new Error(`Unsupported operation: ${operation}`);
    }
  }
}

console.log(Calculator.add(1, 2, 3, 4, 5)); // 15
console.log(Calculator.multiply(2, 3, 4)); // 24

const calc = new Calculator();
console.log(calc.calculate('add', 10, 20, 30)); // 60
console.log(calc.calculate('max', 5, 2, 8, 1, 9)); // 9

8. 高级应用示例

函数式编程工具

// 创建日志函数
function createLogger(prefix, ...messages) {
  const timestamp = new Date().toISOString();
  console.log(`[${timestamp}] ${prefix}:`, ...messages);
}

createLogger('INFO', 'Application started', 'Version 1.0');
createLogger('ERROR', 'Failed to load resource', '404', 'Not Found');

// 装饰器模式
function withLogging(fn, ...args) {
  console.log(`Calling ${fn.name} with arguments:`, args);
  const result = fn(...args);
  console.log(`${fn.name} returned:`, result);
  return result;
}

function add(a, b) {
  return a + b;
}

withLogging(add, 5, 3); // Calling add with arguments: [5, 3]
                        // add returned: 8

事件处理

// 事件处理器工厂
function createEventHandler(eventType, ...handlers) {
  return function(event) {
    console.log(`Handling ${eventType} event`);
    handlers.forEach(handler => {
      try {
        handler(event);
      } catch (error) {
        console.error(`Error in ${eventType} handler:`, error);
      }
    });
  };
}

// 定义多个处理器
const clickHandler1 = (event) => console.log('Click handler 1 executed');
const clickHandler2 = (event) => console.log('Click handler 2 executed');
const clickHandler3 = (event) => console.log('Click handler 3 executed');

// 创建组合事件处理器
const handleClick = createEventHandler('click', clickHandler1, clickHandler2, clickHandler3);

// 模拟事件触发
handleClick({ type: 'click', target: 'button' });

配置对象处理

// 灵活的配置函数
function configureApp(name, ...configOptions) {
  const defaultConfig = {
    debug: false,
    timeout: 5000,
    retries: 3
  };
  
  // 合并配置选项
  const finalConfig = configOptions.reduce((config, option) => {
    if (typeof option === 'object' && option !== null) {
      return { ...config, ...option };
    }
    return config;
  }, defaultConfig);
  
  return {
    name,
    ...finalConfig
  };
}

const appConfig = configureApp(
  'MyApp',
  { debug: true },
  { timeout: 10000 },
  { theme: 'dark' }
);

console.log(appConfig);
// { name: 'MyApp', debug: true, timeout: 10000, retries: 3, theme: 'dark' }

9. 注意事项和限制

语法限制

// ❌ 错误：rest 参数必须是最后一个参数
// function wrongExample(...rest, lastParam) {} // SyntaxError

// ❌ 错误：不能有多个 rest 参数
// function wrongExample2(...first, ...second) {} // SyntaxError

// ✅ 正确：rest 参数在最后
function correctExample(first, second, ...rest) {
  console.log(first, second, rest);
}

correctExample(1, 2, 3, 4, 5); // 1 2 [3, 4, 5]

性能考虑

// 对于已知参数数量，直接参数可能更高效
function addThree(a, b, c) {
  return a + b + c;
}

// 对于不定数量参数，使用 rest 参数
function addAny(...numbers) {
  return numbers.reduce((sum, num) => sum + num, 0);
}

console.log(addThree(1, 2, 3)); // 6
console.log(addAny(1, 2, 3, 4, 5)); // 15

10. 与其他 ES6 特性的结合

与扩展运算符的配合

// 在函数调用中使用扩展运算符
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

const values = [1, 2, 3, 4, 5];
console.log(sum(...values)); // 15

// 嵌套使用
function processArrays(...arrays) {
  return arrays.map(arr => sum(...arr));
}

const result = processArrays([1, 2], [3, 4, 5], [6, 7, 8, 9]);
console.log(result); // [3, 12, 30]

与默认参数结合

function greet(greeting = 'Hello', ...names) {
  if (names.length === 0) {
    return `${greeting} World!`;
  }
  return `${greeting} ${names.join(', ')}!`;
}

console.log(greet()); // Hello World!
console.log(greet('Hi')); // Hi World!
console.log(greet('Hello', 'Alice', 'Bob', 'Charlie')); // Hello Alice, Bob, Charlie!

总结

Rest 参数的主要优势：

  1. 语法简洁 - 使用 ... 语法清晰表达意图
  2. 类型友好 - 返回真正的数组，可以直接使用数组方法
  3. 灵活性 - 可以处理任意数量的参数
  4. 可读性强 - 代码意图更加明确
  5. 与现代 JavaScript 特性兼容 - 与其他 ES6+ 特性良好配合

Rest 参数是现代 JavaScript 开发中处理可变参数的标准方式，它让函数更加灵活和强大。

默认页脚
Copyright © 2026 pax