编辑“︁JavaScript剩余参数”︁

{{DISPLAYTITLE:JavaScript剩余参数}}

'''剩余参数'''（Rest Parameters）是JavaScript ES6引入的一项现代特性，它允许函数接受任意数量的参数作为数组，从而简化可变参数函数的编写。剩余参数语法通过在参数名前添加三个点（<code>...</code>）来表示，通常用于替代传统的<code>arguments</code>对象。

== 基本语法 ==
剩余参数的语法如下：
<syntaxhighlight lang="javascript">
function functionName(param1, param2, ...restParams) {
    // 函数体
}
</syntaxhighlight>
其中：
* <code>param1</code>和<code>param2</code>是常规参数。
* <code>...restParams</code>是剩余参数，它将收集所有剩余的参数并存储在一个数组中。

=== 示例 ===
以下是一个简单的剩余参数示例：
<syntaxhighlight lang="javascript">
function sum(a, b, ...numbers) {
    let total = a + b;
    for (let num of numbers) {
        total += num;
    }
    return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 输出：15
</syntaxhighlight>
解释：
* <code>a</code>和<code>b</code>分别接收<code>1</code>和<code>2</code>。
* <code>...numbers</code>收集剩余的参数<code>[3, 4, 5]</code>，并通过循环累加到总和。

== 剩余参数与arguments对象的区别 ==
在ES6之前，开发者通常使用<code>arguments</code>对象来处理可变参数。剩余参数提供了更清晰和更现代的方式：

{| class="wikitable"
|-
! 特性 !! 剩余参数 !! <code>arguments</code>对象
|-
| 类型 || 真正的数组 || 类数组对象
|-
| 可用的数组方法 || 是 || 否（需转换）
|-
| 可与其他参数共存 || 是 || 是
|-
| 箭头函数中可用 || 是 || 否
|}

=== 示例对比 ===
<syntaxhighlight lang="javascript">
// 使用arguments对象
function oldSum() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

// 使用剩余参数
function newSum(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
}
</syntaxhighlight>

== 实际应用场景 ==
剩余参数在多种场景中非常有用：

=== 1. 函数参数处理 ===
当函数需要处理可变数量的参数时，剩余参数可以简化代码：
<syntaxhighlight lang="javascript">
function joinStrings(separator, ...strings) {
    return strings.join(separator);
}

console.log(joinStrings('-', 'Hello', 'World', '!')); // 输出："Hello-World-!"
</syntaxhighlight>

=== 2. 数组和对象解构 ===
剩余参数可以与解构赋值结合使用：
<syntaxhighlight lang="javascript">
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest);  // [3, 4, 5]

const { a, b, ...others } = { a: 1, b: 2, c: 3, d: 4 };
console.log(others); // { c: 3, d: 4 }
</syntaxhighlight>

=== 3. 高阶函数 ===
剩余参数在高阶函数中特别有用，例如实现函数组合：
<syntaxhighlight lang="javascript">
function compose(...fns) {
    return (x) => fns.reduceRight((acc, fn) => fn(acc), x);
}

const add5 = x => x + 5;
const multiply2 = x => x * 2;
const square = x => x * x;

const transform = compose(square, multiply2, add5);
console.log(transform(3)); // 输出：128
</syntaxhighlight>

== 注意事项 ==
1. 剩余参数必须是函数的最后一个参数。
   * 错误示例：<code>function f(a, ...b, c) {}</code>
2. 一个函数只能有一个剩余参数。
3. 剩余参数不计入函数的<code>length</code>属性。

== 高级用法 ==
对于需要更复杂参数处理的场景，剩余参数可以与默认参数结合使用：
<syntaxhighlight lang="javascript">
function config(options = {}, ...callbacks) {
    const defaults = { debug: false };
    const settings = { ...defaults, ...options };
    callbacks.forEach(cb => cb(settings));
}

config({ debug: true }, 
    settings => console.log('Config loaded:', settings),
    settings => saveConfig(settings)
);
</syntaxhighlight>

== 性能考虑 ==
剩余参数在大多数现代JavaScript引擎中都有良好的性能优化。与<code>arguments</code>对象相比：
* 剩余参数避免了创建类数组对象的开销
* 可以直接使用数组方法而不需要转换
* 在严格模式下性能更优

== 浏览器兼容性 ==
剩余参数在以下环境中得到支持：
* Chrome 47+
* Firefox 15+
* Edge 12+
* Safari 10+
* Node.js 6+

对于旧版浏览器，需要使用Babel等转译工具进行转换。

== 总结 ==
剩余参数是JavaScript中处理可变数量参数的现代方式，它：
* 提供了比<code>arguments</code>更直观的语法
* 生成真正的数组，可以直接使用数组方法
* 可以与解构赋值和其他ES6特性完美配合
* 使代码更简洁、更易读

通过合理使用剩余参数，可以显著提高JavaScript代码的质量和可维护性。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript现代特性]]