跳到主要内容

JavaScript 默认参数

在学习JavaScript函数的过程中，默认参数是一个非常实用的特性。默认参数允许我们为函数参数指定默认值，当调用函数时如果没有提供相应参数或者参数值为undefined，这些默认值就会生效。这个特性是ES6（ECMAScript 2015）引入的，大大简化了函数参数的处理逻辑。

为什么需要默认参数？​

在ES6之前，如果我们想为函数参数提供默认值，通常需要在函数内部进行逻辑判断：

javascript
function greet(name) {
  name = name || "访客";
  return "你好，" + name;
}

console.log(greet("小明")); // 输出: 你好，小明
console.log(greet()); // 输出: 你好，访客

这种方式虽然有效，但存在一个问题：如果传入的值是false、0、""（空字符串）等在布尔上下文中会被视为假值的数据，也会使用默认值，这可能不是我们想要的结果。

默认参数语法​

ES6引入的默认参数语法非常直观：

javascript
function functionName(param1 = defaultValue1, param2 = defaultValue2, ...) {
  // 函数体
}

让我们看一个简单的例子：

javascript
function greet(name = "访客") {
  return "你好，" + name;
}

console.log(greet("小明")); // 输出: 你好，小明
console.log(greet()); // 输出: 你好，访客
console.log(greet(undefined)); // 输出: 你好，访客
备注

只有当参数值为undefined时，默认值才会生效。其他所有值（包括null、false、0、""等）都会被视为有效值。

默认参数的高级特性​

1. 表达式作为默认值​

默认参数可以是表达式，这些表达式会在函数调用时被求值：

javascript
function getDate(timestamp = Date.now()) {
  return new Date(timestamp);
}

console.log(getDate()); // 输出当前时间
// 等待一会儿后再调用
console.log(getDate()); // 输出新的当前时间

2. 使用前面的参数​

一个参数的默认值可以引用前面定义的参数：

javascript
function calculatePrice(price, tax = price * 0.1, shipping = price >= 100 ? 0 : 10) {
  return price + tax + shipping;
}

console.log(calculatePrice(100)); // 输出: 110 (100 + 10 + 0)
console.log(calculatePrice(50)); // 输出: 65 (50 + 5 + 10)

3. 函数作为默认值​

你可以使用函数调用的结果作为默认值：

javascript
function getDefaultName() {
  console.log("获取默认名称");
  return "默认用户";
}

function greet(name = getDefaultName()) {
  return "你好，" + name;
}

console.log(greet("小明")); // 输出: 你好，小明
// getDefaultName()函数不会被调用

console.log(greet()); 
// 控制台首先输出: 获取默认名称
// 然后输出: 你好，默认用户
提示

注意：默认参数函数只会在需要时被调用。如果提供了参数值，则不会执行默认参数函数。

解构赋值与默认参数​

默认参数可以与解构赋值结合使用：

javascript
function createUser({name = "用户", age = 18, isAdmin = false} = {}) {
  return {
    name,
    age,
    role: isAdmin ? "管理员" : "普通用户"
  };
}

console.log(createUser()); 
// 输出: {name: "用户", age: 18, role: "普通用户"}

console.log(createUser({name: "小红", isAdmin: true})); 
// 输出: {name: "小红", age: 18, role: "管理员"}

上面的例子中，我们使用了两层默认值：

  1. 参数本身默认为空对象 {} = {}
  2. 解构赋值内的各个属性也有默认值

默认参数与arguments对象​

使用默认参数会影响arguments对象的行为。在严格模式下，arguments对象不会反映参数的默认值：

javascript
function test(a = 1, b = 2) {
  "use strict";
  console.log(arguments.length);
  console.log(a, arguments[0]);
  console.log(b, arguments[1]);
}

test(); // 输出: 0, 1 undefined, 2 undefined
test(10); // 输出: 1, 10 10, 2 undefined
test(10, 20); // 输出: 2, 10 10, 20 20

实际应用场景​

场景1：配置对象​

默认参数在处理配置对象时非常有用：

javascript
function configureApp(options = {}) {
  const {
    debug = false,
    timeout = 1000,
    maxRetries = 3,
    theme = "light"
  } = options;
  
  console.log(`应用配置: debug=${debug}, timeout=${timeout}ms, maxRetries=${maxRetries}, theme=${theme}`);
  // 进一步的初始化逻辑...
}

// 使用默认配置
configureApp();
// 输出: 应用配置: debug=false, timeout=1000ms, maxRetries=3, theme=light

// 覆盖部分配置
configureApp({ debug: true, theme: "dark" });
// 输出: 应用配置: debug=true, timeout=1000ms, maxRetries=3, theme=dark

场景2：API请求函数​

在创建API请求函数时，默认参数可以简化代码：

javascript
async function fetchData(url, options = {}) {
  const {
    method = "GET",
    headers = {
      "Content-Type": "application/json"
    },
    body = null,
    timeout = 5000
  } = options;
  
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);
  
  try {
    const response = await fetch(url, {
      method,
      headers,
      body: body ? JSON.stringify(body) : null,
      signal: controller.signal
    });
    
    clearTimeout(timeoutId);
    return await response.json();
  } catch (error) {
    clearTimeout(timeoutId);
    console.error("请求失败:", error);
    throw error;
  }
}

// 使用示例
// fetchData("https://api.example.com/data");
// fetchData("https://api.example.com/users", { method: "POST", body: { name: "张三" } });

默认参数的注意事项​

1. 必选参数应该放在可选参数前面​

虽然技术上可以在任何位置设置默认参数，但按照惯例和可读性考虑，建议将必选参数（没有默认值的参数）放在可选参数（有默认值的参数）前面：

javascript
// 推荐的做法
function createElement(type, options = {}, children = []) {
  // ...
}

// 不推荐的做法
function createElement(type = "div", options, children) {
  // 如果有人调用 createElement(undefined, {some: "options"})，会很混乱
}

2. undefined会触发默认值，null不会​

javascript
function test(a = 10) {
  console.log(a);
}

test(undefined); // 输出: 10（使用了默认值）
test(null); // 输出: null（null被视为有效值）

3. 默认参数可能导致TDZ（Temporal Dead Zone）错误​

参数是按从左到右的顺序初始化的，如果一个参数的默认值引用了尚未初始化的参数，会导致错误：

javascript
// 这会导致错误
function incorrectExample(a = b, b = 1) {
  return [a, b];
}

incorrectExample(); // ReferenceError: Cannot access 'b' before initialization

总结​

JavaScript默认参数是ES6引入的一个强大特性，它可以：

  • 简化函数参数的处理逻辑
  • 提高代码可读性
  • 避免因参数缺失导致的意外错误
  • 使函数更加灵活和可配置

通过合理使用默认参数，你可以编写出更简洁、更健壮的JavaScript代码。

练习​

  1. 创建一个formatName函数，接受firstName和lastName参数（带默认值），并返回格式化的全名。
  2. 编写一个createElement函数，使用默认参数处理HTML元素的创建，允许指定标签名、属性和内容。
  3. 设计一个calculator函数，可以执行基本数学运算，并为运算类型提供默认值。

延伸阅读​

通过掌握默认参数，你将能够编写更健壮、更灵活的JavaScript函数，为你的编程之旅增添一项强大的工具。