【JavaScript-Day 23】告别繁琐的参数处理：玩转 ES6 默认参数与剩余参数

吴师兄大模型

于 2025-05-26 09:00:00 发布

阅读量848

点赞数 30

分类专栏： Java编程全景指南：从零到精通文章标签： javascript es6 开发语言 java 人工智能前端后端

本文链接：https://blog.csdn.net/Kiradzy/article/details/148214105

版权

Java编程全景指南：从零到精通专栏收录该内容

41 篇文章

订阅专栏

Langchain系列文章目录

01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南
 02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖
 03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南
 04-玩转 LangChain：从文档加载到高效问答系统构建的全程实战
 05-玩转 LangChain：深度评估问答系统的三种高效方法（示例生成、手动评估与LLM辅助评估）
06-从 0 到 1 掌握 LangChain Agents：自定义工具 + LLM 打造智能工作流！
07-【深度解析】从GPT-1到GPT-4：ChatGPT背后的核心原理全揭秘
 08-【万字长文】MCP深度解析：打通AI与世界的“USB-C”，模型上下文协议原理、实践与未来

JavaScript系列文章目录

文章目录

Langchain系列文章目录
Python系列文章目录
PyTorch系列文章目录
机器学习系列文章目录
深度学习系列文章目录
Java系列文章目录
JavaScript系列文章目录
前言
一、告别 undefined：ES6 函数默认参数
二、打包带走：ES6 剩余参数 (Rest Parameters)
三、实战演练
- 3.1 案例：构建一个灵活的配置函数
- 3.2 案例：实现一个简单的求和/拼接函数
四、总结

前言

在 JavaScript 的函数世界里，参数是连接函数内部逻辑与外部数据的桥梁。如何灵活、高效地处理函数参数，直接影响着代码的健壮性、可读性和可维护性。在 ES6 (ECMAScript 2015) 之前，为函数参数设置默认值或处理不定数量的参数，往往需要一些额外的代码和技巧。幸运的是，ES6 带来了两项强大的新特性——默认参数 (Default Parameters) 和 剩余参数 (Rest Parameters)，极大地简化了这些操作。今天，就让我们一起揭开函数参数的“魔法”面纱，深入探索这两个实用特性的魅力吧！

一、告别 undefined：ES6 函数默认参数

在编写函数时，我们经常希望某些参数在未被显式传递时能有一个预设的默认值。这不仅能避免因 undefined 导致的潜在错误，还能让函数调用更加简洁。

1.1 为什么需要默认参数？

在 ES6 之前，为了实现参数默认值，我们通常会采用这样的模式：

function greet(name, greeting) {
  // 传统方式设置默认值
  name = name || 'Guest';
  greeting = greeting || 'Hello';

  console.log(greeting + ', ' + name + '!');
}

greet(); // 输出: Hello, Guest!
greet('Alice'); // 输出: Hello, Alice!
greet('Bob', 'Hi'); // 输出: Hi, Bob!

这种 || 的方式虽然简洁，但存在一个缺陷：如果传入的参数值是 “Falsy” 值（如 0, false, "", null, undefined），它也会被默认值覆盖，这可能并非我们所期望的。例如：

function setConfig(timeout) {
  timeout = timeout || 5000; // 如果想设置 timeout 为 0 就会出问题
  console.log('Timeout is: ' + timeout);
}

setConfig(0); // 输出: Timeout is: 5000 (预期应该是 0)

为了更精确地判断，我们可能需要使用 typeof：

function setConfigPrecise(timeout) {
  timeout = (typeof timeout !== 'undefined') ? timeout : 5000;
  console.log('Timeout is: ' + timeout);
}

setConfigPrecise(0); // 输出: Timeout is: 0 (这下对了，但代码更繁琐)

可见，传统方法要么不够精确，要么略显繁琐。

1.2 ES6 默认参数的优雅写法

ES6 提供了 直接在函数定义中 为参数指定默认值的能力，语法直观且避免了上述问题。

1.2.1 基本语法与示例

function greet(name = 'Guest', greeting = 'Hello') {
  console.log(`${greeting}, ${name}!`);
}

greet(); // 输出: Hello, Guest!
greet('Alice'); // 输出: Hello, Alice! (greeting 仍为默认值)
greet('Bob', 'Hi'); // 输出: Hi, Bob!
greet(undefined, 'Hey'); // 输出: Hey, Guest! (传入 undefined 等同于不传)
greet(null, 'Yo'); // 输出: Yo, null! (传入 null 是有效值，不会用默认值)

核心优势：只有当参数未传递，或者显式传递了 undefined 时，默认值才会生效。其他 Falsy 值（如 null, 0, ""）都会被视为有效参数。

1.2.2 默认参数与解构赋值结合

默认参数可以和解构赋值（我们将在后续文章中详细介绍）结合使用，使得处理复杂参数对象更加得心应手。

function createShape({ type = 'rectangle', width = 100, height = 50 } = {}) {
  console.log(`Creating a ${type} with dimensions ${width}x${height}.`);
}

createShape(); // 输出: Creating a rectangle with dimensions 100x50.
createShape({ type: 'circle', width: 80 }); // 输出: Creating a circle with dimensions 80x50.
createShape({ height: 200 }); // 输出: Creating a rectangle with dimensions 100x200.

这里我们为整个参数对象 {} 也设置了默认值 {}，防止在不传递任何参数时解构失败。

1.2.3 默认参数的作用域

默认参数在求值时会形成一个独立的作用域。它们可以引用在它们之前定义的参数，但不能引用之后的参数。

function calculatePrice(price, tax = price * 0.1, discount = 0) {
  return price + tax - discount;
}

console.log(calculatePrice(100)); // 输出: 110 (tax = 100 * 0.1 = 10)
console.log(calculatePrice(100, 20)); // 输出: 120 (tax = 20)

// 错误示例：不能引用后面的参数
// function calculatePrice(price = base * 1.1, base = 100) {
//   return price;
// }
// ReferenceError: Cannot access 'base' before initialization

1.3 使用默认参数的注意事项

1.3.1 参数求值时机

默认参数的值是在函数调用时进行求值的，而不是在函数定义时。这意味着每次调用函数时，如果需要，默认值都会被重新计算。

let count = 0;
function logCall(id = ++count) {
  console.log(`Call ID: ${id}`);
}

logCall(); // 输出: Call ID: 1
logCall(); // 输出: Call ID: 2
logCall(99); // 输出: Call ID: 99
logCall(); // 输出: Call ID: 3

1.3.2 与 `arguments` 对象的关系

使用了默认参数、解构赋值或剩余参数的函数，其内部的 arguments 对象行为会与传统函数有所不同。在非严格模式下，arguments 对象的值不会随着对应参数的改变而改变（而在传统函数中会）。在严格模式下，arguments 总是与参数值保持独立。推荐：有了默认参数和剩余参数后，应尽量避免使用 arguments 对象。

二、打包带走：ES6 剩余参数 (Rest Parameters)

有时，我们希望函数能够接受任意数量的参数。过去，我们依赖 arguments 对象来实现这一目的。

2.1 不再依赖 `arguments` 对象

arguments 对象虽然能让我们访问所有传入的参数，但它有几个缺点：

它不是真正的数组：它是一个“类数组”对象，虽然有 length 属性和索引，但不能直接使用 forEach, map, filter 等数组方法，需要先通过 Array.prototype.slice.call(arguments) 或 Array.from(arguments) 转换。
可读性差：代码中出现 arguments 会让函数的意图不够明确。
箭头函数中不可用：箭头函数没有自己的 arguments 对象。

2.2 剩余参数的基本语法

ES6 引入了剩余参数语法，使用三个点 ... 紧跟在一个参数名之前，它允许我们将一个不定数量的参数表示为一个真正的数组。

2.2.1 捕获所有剩余参数

function sum(...numbers) {
  console.log(numbers); // 输出一个数组
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 输出: [1, 2, 3] 和 6
console.log(sum(10, 20, 30, 40)); // 输出: [10, 20, 30, 40] 和 100
console.log(sum()); // 输出: [] 和 0

...numbers 将所有传递给 sum 函数的参数收集到了一个名为 numbers 的数组中。

2.2.2 剩余参数必须是最后一个

一个函数最多只能有一个剩余参数，并且它必须放在参数列表的最后。

function logInfo(source, ...messages) {
  console.log(`Source: ${source}`);
  messages.forEach(msg => console.log(` - ${msg}`));
}

logInfo('System', 'Booting up...', 'Modules loaded.', 'Ready.');
// 输出:
// Source: System
//  - Booting up...
//  - Modules loaded.
//  - Ready.

// 错误示例：剩余参数不在最后
// function logError(...messages, errorCode) { ... } // SyntaxError: Rest parameter must be last formal parameter

2.3 剩余参数的优势与应用

2.3.1 真正的数组

剩余参数收集到的是一个标准的 JavaScript 数组，这意味着你可以直接在它上面调用所有强大的数组方法，无需任何转换。

function filterGreaterThan(threshold, ...values) {
  return values.filter(v => v > threshold);
}

console.log(filterGreaterThan(5, 1, 10, 3, 8, 5, 12)); // 输出: [10, 8, 12]

2.3.2 替代 `arguments`

剩余参数是 arguments 对象的现代、清晰且功能更强的替代品。

graph TD
    A[函数调用(arg1, arg2, arg3, arg4)] --> B{函数定义: func(p1, ...rest)};
    B -- arg1 --> C[参数 p1];
    B -- arg2, arg3, arg4 --> D[剩余参数 rest = [arg2, arg3, arg4]];

上图展示了剩余参数如何将参数进行分配。

2.3.3 结合箭头函数

由于箭头函数没有自己的 arguments，剩余参数成为了在箭头函数中处理不定数量参数的唯一且标准的方式。

const sumArrow = (...numbers) => numbers.reduce((total, num) => total + num, 0);

console.log(sumArrow(1, 2, 3, 4, 5)); // 输出: 15

三、实战演练

让我们通过两个简单的例子，看看如何将默认参数和剩余参数应用到实际场景中。

3.1 案例：构建一个灵活的配置函数

假设我们需要一个函数来设置一个组件的配置，其中一些配置有默认值，同时允许传入一些额外的、未知的配置。

function setupComponent(id, { theme = 'light', version = '1.0', ...extraOptions } = {}) {
  console.log(`Setting up component: ${id}`);
  console.log(`Theme: ${theme}, Version: ${version}`);

  if (Object.keys(extraOptions).length > 0) {
    console.log('Extra options:');
    for (const key in extraOptions) {
      console.log(`  ${key}: ${extraOptions[key]}`);
    }
  }
}

// 基础调用
setupComponent('comp1');
// 输出:
// Setting up component: comp1
// Theme: light, Version: 1.0

// 自定义部分配置
setupComponent('comp2', { theme: 'dark' });
// 输出:
// Setting up component: comp2
// Theme: dark, Version: 1.0

// 自定义并传入额外配置
setupComponent('comp3', { version: '2.0', enabled: true, mode: 'advanced' });
// 输出:
// Setting up component: comp3
// Theme: light, Version: 2.0
// Extra options:
//   enabled: true
//   mode: advanced

这个例子巧妙地结合了默认参数（theme, version）、解构赋值和剩余参数（...extraOptions），使得函数既易于使用又非常灵活。

3.2 案例：实现一个简单的求和/拼接函数

这是一个经典的剩余参数应用场景，处理任意数量的数字求和或字符串拼接。

function combine(...items) {
  if (items.length === 0) {
    return null; // 或者返回 0, "" 等
  }

  // 检查第一个元素类型，决定是求和还是拼接
  if (typeof items[0] === 'number') {
    return items.reduce((acc, current) => acc + current, 0);
  } else if (typeof items[0] === 'string') {
    return items.join('');
  } else {
    return items; // 或者抛出错误
  }
}

console.log(combine(1, 5, 9));       // 输出: 15
console.log(combine('Hello', ' ', 'World', '!')); // 输出: Hello World!
console.log(combine());             // 输出: null

四、总结

ES6 引入的默认参数和剩余参数无疑是 JavaScript 函数式编程的巨大进步。它们让我们的代码变得更加简洁、直观和强大。

默认参数：
- 提供了一种原生、清晰的方式来为函数参数指定默认值。
- 仅在参数未传递或传递 undefined 时生效，比 || 更精确。
- 可以与解构赋值等特性结合，实现复杂的参数处理。
剩余参数 (...)：
- 提供了一种将不定数量的参数收集为真正数组的优雅方式。
- 是 arguments 对象的现代替代品，可读性更好，功能更强（直接使用数组方法）。
- 是箭头函数处理不定参数的标准方案。
- 必须作为函数的最后一个参数。