JavaScript 剩余参数和展开运算符是什么

在Javascript中，展开运算符和剩余参数具有相同的语法，即三个点( … )。尽管它们具有相同的语法，但在功能上有所不同。

展开运算符：

展开运算符帮助我们扩展可迭代对象，如数组，它需要多个参数，并可以扩展对象表达式。在我们需要使用可迭代对象或对象的所有元素来完成任务时，我们使用展开运算符。

注意： 在JavaScript函数中可以有多个展开运算符。

语法：

var var_name = [...iterable]; 

让我们通过示例来理解。

示例1： 在下面的示例中，定义了两个数组，并且使用扩展运算符(…)将它们合并为一个数组。合并后的数组按照合并的顺序包含元素。

Javascript

<script>
    var array1 = [10, 20, 30, 40, 50];
    var array2 = [60, 70, 80, 90, 100];
    var array3 = [...array1, ...array2];
   console.log(array3);
</script>

输出：

[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]

示例 2: 在这个示例中，我们向给定的可迭代对象中添加一个元素。我们定义了一个数组，并且需要向其添加一个值，所以我们使用展开运算符来展开可迭代对象的所有值，然后根据我们想要的顺序在元素前或元素后添加元素。

Javascript

<script>
    var array1 = [10, 20, 30, 40, 50];
    var array2 = [...array1, 60];
    console.log(array2);
</script>

输出：

[10, 20, 30, 40, 50, 60]

示例3： 在这个示例中， 我们将使用扩展运算符来复制对象。使用扩展运算符(…)将obj1的所有属性都赋给了obj2。必须使用花括号来指定复制对象，否则会出现错误。

JavaScript

<script>
    const obj = {
        firstname: "Divit",
        lastname: "Patidar",
    };
    const obj2 = { ...obj };
    console.log(obj2);
</script>

输出:

{
    firstname: "Divit",
    lastname: "Patidar"
}

Rest 操作符：

Rest 参数与展开操作符相反。展开操作符将可迭代对象的元素展开，而 rest 参数则将它们压缩在一起。它可以收集多个元素。在函数中，当我们需要传递参数但不确定要传递多少个时，使用 rest 参数会更方便。

注意： JavaScript 函数中只能有一个 rest 操作符。

语法：

function function_name(...arguments) {
    statements;
}

示例： 在这个示例中，剩余参数将多个元素压缩成单个元素，即使传入函数的参数数量不同，函数仍然可以使用剩余参数。它将多个元素作为参数，并将它们压缩成单个元素或可迭代对象，然后对可迭代对象执行进一步的操作。

JavaScript

<script>
    function average(...args) {
        console.log(args);
        var avg =
            args.reduce(function (a, b) {
                return a + b;
           }, 0) / args.length;
        return avg;
    }
    console.log("average of numbers is : "
        + average(1, 2, 3, 4, 5));
    console.log("average of numbers is : "
        + average(1, 2, 3));
</script>

输出：

[1, 2, 3, 4, 5]
"average of numbers is : 3"
[1, 2, 3]
"average of numbers is : 2"