编写更简洁、可扩展的 JavaScript 代码始于养成一些小习惯。

关注「索引目录」公众号，获取更多干货。

📘 JavaScript 最佳实践：使用对象参数而不是冗长的位置参数

❌请勿这样做 — 位置参数

当一个函数有多个参数，尤其是可选参数时，位置参数会变得令人困惑且容易出错。

反面例子

function saveUser(name, email, phone) {
  // ...
}

// ❌ Hard to read
saveUser("John", "", "9876543210");

// ❌ What is ""? Which field did we skip?

问题

• 很难记住论证顺序
• 传递空字符串只是为了跳过参数
• 代码变得难以阅读且脆弱不堪。
• 添加新的可选参数会破坏所有现有调用。

✅请务必这样做——使用单个对象参数

对象允许使用命名参数、可选值、默认值，并能编写更简洁的代码。

好例子

function saveUser({ name, email, phone }) {
  // ...
}

// ✅ Much clearer
saveUser({
  name: "John",
  phone: "9876543210",
});

好处

• 无需记住顺序
• 可选参数变得容易
• 可扩展且不会破坏旧代码
• 自文档化函数调用

💡 真实生产案例

✔ 示例 1：API 请求处理程序

❌ 旧（位置地狱）

function fetchUsers(page, limit, search, sortBy, direction) {
  // ...
}

fetchUsers(1, 20, "", "name", "asc");

✅ 新增（对象参数）

function fetchUsers({
  page = 1,
  limit = 20,
  search = "",
  sortBy = "name",
  direction = "asc",
}) {
  // ...
}

fetchUsers({
  search: "john",
  direction: "desc",
});

✔ 示例 2：Vue/React 组件工具

❌ 反模式

function openModal(title, content, showClose, size) { }
openModal("Delete?", "Are you sure?", true, "lg");

✅ 简洁的图案

function openModal({
  title,
  content,
  showClose = true,
  size = "md",
}) {}

openModal({
  title: "Delete?",
  content: "Are you sure?",
  size: "lg",
});

✔ 示例 3：生产环境中的日志记录

❌ 错误

log("error", "Database failed", false, Date.now());

✅ 正确

log({
  level: "error",
  message: "Database failed",
  showAlert: false,
  timestamp: Date.now(),
});

✔ 示例 4：效用函数

❌ 差

function calculatePrice(price, discount, tax, includeGST) {}

calculatePrice(1000, 0, 5, true);

✅ 好

function calculatePrice({
  price,
  discount = 0,
  tax = 5,
  includeGST = false,
}) {}

calculatePrice({
  price: 1000,
});

💼 可直接用于生产的模板（可重复使用）

/**
 * @description Generic best-practice function with object params.
 */
function doTask({
  required,
  optional1 = "",
  optional2 = null,
  enabled = true,
}) {
  // function logic
}

// Usage:
doTask({
  required: "value",
  enabled: false,
});

关注「索引目录」公众号，获取更多干货。