JavaScript 函数默认参数：从混乱到优雅

参数没有礼物？深入理解 JavaScript 中的默认值

想象一下，你点了一份披萨。你打电话给外卖说：“请给我一份披萨。”店员会问：“哪种？”——“嗯，标准的，加奶酪和香肠。”你甚至没有意识到披萨有默认参数。

在 JavaScript 中也是如此：函数经常在没有传入所有参数的情况下被调用。如果程序员没有考虑为 JavaScript 函数设置默认参数值，代码可能会出错或行为不可预测。在本文中，我们将探讨所有为JS 函数参数设置默认值的方法——从老式的权宜之计到现代的 ES6 语法。开始吧！

为什么这很重要？

假设我们有一个向用户打招呼的函数：

function greet(name) {\n    console.log('你好，' + name + '！');\n}\n\ngreet(); // 输出："你好，undefined！" —— 很尴尬，对吧？

没有javascript 默认参数，未传入的参数会变成 undefined。如果我们尝试在 undefined 上调用方法——就会报错。因此，js 默认参数不仅仅是方便，更是防止 bug 的保护措施。

方法 1：经典方式——三元运算符（或 if）

在 ES6 出现之前，开发者使用javascript 三元运算符或简单的检查。这可行，但看起来很笨重：

function multiply(a, b) {\n    a = a !== undefined ? a : 1;\n    b = b !== undefined ? b : 2;\n    return a * b;\n}\n\nconsole.log(multiply(5)); // 10 (5 * 2)\nconsole.log(multiply());  // 2 (1 * 2)

优点：新手也能理解，兼容老旧浏览器。
\n缺点：代码臃肿。如果有 5-6 个参数，可读性会急剧下降。

陷阱：检查 undefined 与 truthy

许多新手会这样写：

function greet(name) {\n    name = name || '访客';\n    console.log('你好，' + name);\n}

这在你传入 0、空字符串 '' 或 false 之前是有效的。所有这些值都是 falsy，函数会将它们替换为 '访客'。如果你需要传入 0 作为有效值——这种方法就会失效。请使用严格的 undefined 检查。

方法 2：神奇的 arguments 对象

在每个函数（箭头函数除外）内部，都有一个隐式的类数组对象 arguments javascript。可以用它来检查传入的参数：

function showInfo(name, age) {\n    name = arguments.length > 0 ? name : '匿名';\n    age = arguments.length > 1 ? age : '未指定';\n    return `${name}, 年龄: ${age}`;\n}\n\nconsole.log(showInfo()); // 匿名, 年龄: 未指定

优点：可以完全控制哪些参数被传入。
\n缺点：语法过时，不适用于箭头函数。通常只用于非常特殊的任务（例如，当参数数量事先未知时）。

方法 3：现代标准——ES6 默认参数

从 ECMAScript 2015 开始，可以在函数声明中直接设置js 默认参数。这是最简洁且推荐的方式：

function multiply(a = 1, b = 2) {\n    return a * b;\n}\n\nconsole.log(multiply(5)); // 10\nconsole.log(multiply());  // 2

很漂亮，对吧？但有一些重要的注意事项需要了解，以免掉入陷阱。

注意事项 1：默认值在调用时计算

这意味着如果你传入 undefined——会触发默认值。如果你传入 null——则不会：

function test(x = 10) {\n