智能函数参数的概念是一种使函数适应不同使用场景的方法。它允许函数处理在调用时传递的不同种类的参数。
在 JavaScript 中，函数是一个重要的概念，用于代码的复用。在许多情况下，我们需要确保函数足够灵活以处理不同的使用场景。
以下是定义带有智能参数的函数的不同方式。
默认函数参数
在 JavaScript 中，默认函数参数是一种处理未定义参数值或在调用函数时未传递的参数的方式。
在下面的代码片段中，我们设置了参数 a 和 b 的默认值分别为 100 和 50。
function division (a = 100, b = 50) {
}
示例
在下面的代码中，division() 函数返回参数 a 和 b 的除法结果。参数 a 的默认值是 100，而参数 b 的默认值是 50。无论何时你想传递任何参数或传递未定义的参数，参数都将初始化为其默认值，这可以从输出中观察到的值体现出来。
<html>
<head>
<title> JavaScript - 默认参数 </title>
</head>
<body>
<p id = "output"> </p>
<script>
function division(a = 100, b = 50) {
return a / b;
}
document.getElementById("output").innerHTML =
division(10, 2) + "<br>" +
division(10, undefined) + "<br>" +
division();
</script>
</body>
</html>
输出
5
2
2
JavaScript Rest 参数
当需要传递给函数的参数数量不是固定的，你可以使用 Rest 参数。JavaScript 的 Rest 参数允许我们将所有剩余（rest）的参数收集到一个单一数组中。Rest 参数由三个点 (...) 后跟一个参数表示。这里的参数在函数内部充当数组。
语法
按照以下语法在函数声明中使用 Rest 参数。
function funcName(p1, p2, ...args) {
}
在上述语法中，args 是 Rest 参数，所有剩余的参数将会存储在一个名为 args 的数组中。
示例
在下面的示例中，sum() 函数返回所有作为参数传递的值的总和。我们可以向 sum() 函数传递未知数量的参数。函数定义将会收集所有参数到 nums 数组中。之后，我们可以在函数体中遍历 nums 数组并计算所有参数值的总和。
sum() 函数也将处理零参数的情况。
<html>
<head>
<title> JavaScript - Rest 参数 </title>
</head>
<body>
<p id = "demo"> </p>
<script>
function sum(...nums) {
let totalSum = 0;
for (let p = 0; p < nums.length; p++) {
totalSum += nums[p];
}
return totalSum;
}
document.getElementById("demo").innerHTML =
sum(1, 5, 8, 20, 23, 45) + "<br>" +
sum(10, 20, 30) + "<br>" +
sum() + "<br>";
</script>
</body>
</html>
输出
102
60
0
注意 – 你应该总是将 Rest 参数作为最后一个参数来使用。
JavaScript 解构参数或命名参数
你可以将单个对象作为函数的参数，并在函数定义中解构对象以仅从对象中获取所需值。这也被称为命名参数，因为我们基于对象的命名属性获取参数。
语法
按照以下语法使用解构参数与函数。
function funcName({ prop1, prop2, ... }) { }
在上述语法中，prop1 和 prop2 是作为函数 funcName 参数的对象的属性。
示例
在下面的示例中，我们定义了一个包含三个属性的 watch 对象，并将其传递给 printWatch() 函数。
printWatch() 函数解构了作为参数传递的对象，并取 brand 和 price 属性作为参数。通过这种方式，你可以在函数参数中忽略不必要的参数。
<html>
<head>
<title> JavaScript - 参数解构 </title>
</head>
<body>
<p id = "output"> </p>
<script>
function printWatch({ brand, price }) {
return "The price of the " + brand + "\'s watch is " + price;
}
const watch = {
brand: "Titan",
price: 10000,
currency: "INR",
}
document.getElementById("output").innerHTML = printWatch(watch);
</script>
</body>
</html>
输出
The price of the Titan's watch is 10000
以上三种概念为我们提供了传递函数参数的灵活性。