JavaScript中剩余参数语法(Rest Parameters)的使用

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3));       // 输出 6
console.log(sum(4, 5, 6, 7, 8)); // 输出 30

function demo(...args) {
  console.log(args);
}

const arr = [1, 2, 3];
demo(...arr); // 展开语法：将数组拆开传入函数

// 输出：[1, 2, 3] （由于剩余参数会再次打包成数组）

function invalid(...rest, anotherArg) {
  // ❌ 报错：Rest parameter must be last formal parameter
}

function valid(first, ...rest) {
  // ✅ 正确
}

function logWithPrefix(prefix, ...messages) {
  messages.forEach(msg => console.log(`[${prefix}] ${msg}`));
}

logWithPrefix('INFO', '系统启动', '用户登录'); 
// 输出：
// [INFO] 系统启动
// [INFO] 用户登录

function greet(name = '游客', ...others) {
  console.log(`你好，${name}！`);
  console.log('其他信息：', others);
}

// 使用 arguments（不推荐）
function oldStyle() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('-');
}

// 使用剩余参数（推荐）
function newStyle(...args) {
  return args.join('-');
}

function multiply(factor, ...nums) {
  return nums.map(n => n * factor);
}

console.log(multiply(2, 1, 2, 3)); // [2, 4, 6]

function trace(fn) {
  return function(...args) {
    console.log('调用参数：', args);
    return fn(...args);
  }
}

const add = (a, b) => a + b;
const tracedAdd = trace(add);

tracedAdd(5, 8); // 输出调用参数：[5, 8]

function createElement(type, props, ...children) {
  return { type, props, children };
}

const element = createElement('div', { id: 'main' }, 'Hello', 'World');
console.log(element);
// 输出：{ type: 'div', props: { id: 'main' }, children: ['Hello', 'World'] }

function showList([first, ...rest]) {
  console.log('第一个：', first);
  console.log('剩余的：', rest);
}

showList(['苹果', '香蕉', '梨']);
// 第一个：苹果
// 剩余的：[香蕉, 梨]

function divideAll(divisor = 1, ...nums) {
  if (divisor === 0) {
    throw new Error('除数不能为 0');
  }
  return nums.map(n => n / divisor);
}

function configure({ mode = 'light', debug = false }, ...extras) {
  console.log('mode:', mode);
  console.log('debug:', debug);
  console.log('extras:', extras);
}

configure({ mode: 'dark' }, '日志开启', '详细模式');
// mode: dark
// debug: false
// extras: [ '日志开启', '详细模式' ]

// 错误：试图在函数定义外部使用剩余参数语法
const arr = [1, 2, 3];
const clone = [...arr]; // ✅ 这是展开语法，不是剩余参数

const obj = {
  get value(...args) { // ❌ 语法错误
    return 42;
  }
};