掌握函数参数：JavaScript 中的少即是多-js教程-PHP中文网

掌握函数参数：JavaScript 中的少即是多

Mary-Kate Olsen

发布： 2024-10-03 18:20:30

原创

204 人浏览过

Mastering Function Arguments: Less is More in JavaScript

开发者们大家好！？今天，让我们深入探讨编写干净、可维护的 JavaScript 的一个关键方面：管理函数参数

太多参数的问题

你遇到过类似这样的函数吗？

function createMenu(title, body, buttonText, cancellable, theme, fontSize, callback) {
  // ...a whole lot of logic here
}

登录后复制

如果你有，你就会知道尝试记住参数顺序的痛苦，或者更糟糕的是，当有人不可避免地混淆它们时进行调试。？

二元规则

这是一条黄金法则：尝试将函数限制为两个或更少的参数。
为什么？以下是一些令人信服的理由：

提高了可测试性：更少的参数意味着更少的测试用例来覆盖所有可能性。
增强可读性：一眼就能理解函数的用途。
减少认知负荷：使用该函数的开发人员可以减少对参数的心理调整。

但如果我需要更多参数怎么办？

好问题！这就是对象解构的神奇之处。看看这个：

function createMenu({ title, body, buttonText, cancellable, theme = 'light', fontSize = 16, callback = () => {} }) {
  // Your implementation here
}

// Usage
createMenu({
  title: "Settings",
  body: "Adjust your preferences",
  buttonText: "Save",
  cancellable: true
});

登录后复制

这种方法的好处

模拟命名参数：您可以按任何顺序提供参数。 自我记录：函数签名清楚地显示了期望的属性。 默认值：轻松设置可选参数的默认值。 防止副作用：解构克隆原始值，有助于避免意外突变。 Linter-Friendly：工具可以警告您未使用的属性。

专业提示：TypeScript Boost

如果您使用 TypeScript，您可以更进一步：

interface MenuOptions {
  title: string;
  body: string;
  buttonText: string;
  cancellable: boolean;
  theme?: 'light' | 'dark';
  fontSize?: number;
  callback?: () => void;
}

function createMenu(options: MenuOptions) {
  // Implementation
}

登录后复制

这增加了类型安全和自动完成功能，使您的代码更加健壮！