剩余参数Rest与 Spread 语法

Rest参数

可以通过使用三个点**…**并在后方跟着包含剩余参数的数组名称，将其包含在函数定义中，也就是将剩余的参数收集到一个数组中

const sumAll = (...args) => {
    let sum = 0;
    for (let i of args) sum += i;
    return sum
}
console.log(sumAll(2, 3, 4)) //9

也可以将第一个参数作为变量，将其余的收集起来

const str = (firstName, ...args) => {
    return firstName + (args[0])
}
console.log(str('XXX', 'ww', 3, 4)); //XXXww

⚠：Rest参数必须放到参数列表的末尾

arguments变量

类数组对象，该对象按照参数所有包含所有参数

function showName() {
    console.log(arguments.length);
    console.log(arguments[0]);
    console.log(arguments[1]);

    // 它是可遍历的
    // for(let arg of arguments) alert(arg);
}

// 依次显示：2，Julius，Caesar
showName("Julius", "Caesar");

// 依次显示：1，Ilya，undefined（没有第二个参数）
showName("Ilya");

⚠箭头函数是没有 "arguments"

• 如果我们在箭头函数中访问 arguments，访问到的 arguments 并不属于箭头函数，而是属于箭头函数外部的“普通”函数。

剩余参数和arguments对象的区别：

1. 书参数只包含了哪些没有对应形参的实参，而arguments对象包含了传给函数的所有实参
2. 剩余参数是一个真正的数组，arguments对象并不是

Spread 语法

类似与扩展符

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];
  console.log( Math.max(...arr1, ...arr2) ); // 8

在上面的示例中，我们使用数组展示了 spread 语法，其实任何可迭代对象都可以。

例如，在这儿我们使用 spread 语法将字符串转换为字符数

let str = "Hello";
console.log( [...str] ); // H,e,l,l,o

当我们在代码中看到 “…” 时，它要么是 rest 参数，要么就是 spread 语法。
有一个简单的方法可以区分它们：

• 若 … 出现在函数参数列表的最后，那么它就是 rest 参数，它会把参数列表中剩余的参数收集到一个数组中。
• 若 … 出现在函数调用或类似的表达式中，那它就是 spread 语法，它会把一个数组展开为列表。
• 使用场景：
  Rest 参数用于创建可接受任意数量参数的函数。
  Spread 语法用于将数组传递给通常需要含有许多参数的列表的函数。
  它们俩的出现帮助我们轻松地在列表和参数数组之间来回转换。
  “旧式”的 arguments（类数组且可迭代的对象）也依然能够帮助我们获取函数调用中的所有参数