JavaScript函数参数：如何用解构赋值优雅地设置对象默认值？-js教程-PHP中文网

JavaScript函数参数：如何用解构赋值优雅地设置对象默认值？

碧海醫心

发布： 2025-03-01 19:04:10

原创

498人浏览过

javascript函数参数：如何用解构赋值优雅地设置对象默认值？

JavaScript函数参数默认值与解构赋值的优雅结合

在JavaScript开发中，为函数参数设置默认值，特别是对象类型的参数，常常需要巧妙地运用解构赋值来确保代码的优雅和健壮性。本文将详细讲解如何利用解构赋值为函数参数对象设置默认值，并解决常见问题。

问题：对象参数的必填属性与默认值

假设我们需要一个函数，其参数options是一个对象，包含必填属性dir（字符串类型）和可选属性style（布尔类型）。直接使用空对象{}作为默认值会因为dir属性缺失而报错。

错误示例：

立即学习“Java免费学习笔记（深入）”；

type Options = {
  dir: string;
  style?: boolean;
};

function test(options: Options = {}) {} // 错误：dir 属性缺失

登录后复制

解决方案：利用解构赋值和默认值对象

为了避免错误，可以在函数参数定义时直接提供包含默认值的options对象。

正确示例：

type Options = {
  dir: string;
  style?: boolean;
};

function test({ dir = 'defaultValue', style }: Options = { dir: 'defaultValue' }) {
  console.log(dir, style); 
}

test(); // 输出：defaultValue undefined
test({ dir: 'customDir', style: true }); // 输出：customDir true

登录后复制

在这个例子中：