JavaScript 中的 rest 参数和扩展运算符是什么？

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

传播运算符： 扩展运算符帮助我们扩展一个可迭代对象，例如需要多个参数的数组，它还有助于扩展对象表达式。如果我们需要可迭代对象或对象的所有元素来帮助我们完成任务，我们会使用扩展运算符。

句法：

var var_name = [...iterable]; 

休息运算符： 其余参数与展开运算符相反。扩展运算符扩展可迭代的元素，其余运算符压缩它们。它收集了几个元素。在函数中，当我们需要传递参数但不确定我们必须传递多少时，rest 参数使它更容易。

句法：

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

让我们通过例子来理解。

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

Javascript

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

输出：

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

示例 2：在此示例中，将元素附加到给定的可迭代对象。定义了一个数组，需要给它附加一个值，所以我们使用展开运算符将iterable的所有值展开，然后按照我们想要的顺序在前面或后面添加元素。

Javascript

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

输出：

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

示例 3：在此示例中， 我们将使用扩展运算符复制对象。 obj2 使用扩展运算符(...) 获得了 obj1 的所有属性。必须使用大括号来指定正在复制的对象，否则会引发错误。

Javascript

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

输出：

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

示例 4：在此示例中，rest 参数将多个元素压缩为一个元素，即使将不同数量的参数传递给函数，该函数也会像我们使用 rest 参数一样工作。它接受多个元素作为参数并将它们压缩为单个元素或可迭代的。对可迭代对象执行进一步的操作。

Javascript

    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));

输出：

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