ES6剩余参数的使用

一、剩余参数

1、语法规则

function foo(x, y, …args) {} //函数声明
const foo = function(x, y, …args) {} // 函数表达式
const foo = (x, y, …args) => {} // 箭头函数

2、注意事项

(1) 箭头函数中的剩余参数

箭头函数，如果参数只有一个，是可以省略参数列表的括号的，如下代码所示

然而，虽然形式上看（本质上也是）剩余函数只是一个参数，但是不能省略参数列表的括号。原因是JavaScript引擎无法合法解析…省略号

(2) 使用剩余参数替代arguments获取实际参数

箭头函数中没有arguments对象，如果参数个数不固定，只能使用剩余参数。通过函数声明和函数字面量创建的函数，虽然包含arguments对象，但是也可以使用剩余参数替代arguments，因为arguments是类数组，剩余参数是数组，类数组默认是不具备数组提供的一些方便的方法的。

(3) 剩余参数的位置

只能位于参数列表的最后一个参数的位置

三、应用

1、 用于函数参数

2、 用于解构赋值

在这里剩余参数可以称为剩余元素、剩余属性，位置也必须是最后一个。

数组的解构赋值

对象的解构赋值

二、数组展开运算符

语法规则

…数组表达式;

功能：将数组转化为元素列表。例如，…[1, 2, 3] => 1, 2, 3。
数组表达式可以是字面量…[1, 2, 3]，变量arr = [1, 2, 3]; …arr; 函数的返回值等等。

在剩余参数中也使用…，例如， function foo(x, y, …args) {} 。该如何区分…是指剩余参数还是数组展开运算符呢？

在C语言中，存在左值和右值的概念。
简而言之，左值表示一个内存地址，只能是变量或者常量。右值表示一个值，它是表达式，包括变量、字面量和能够计算出结果都变量、字面量和运算符的组合。

变量既可以是左值也可以是右值，换句话说，既可以表示一个值也可以表示一个地址。当变量出现在赋值运算符的左边或变量作为函数的形参（本质同前者）时，变量是左值；当变量出现在赋值运算符的右边或作为函数的实参时，变量是右值。

…变量作为左值，则是剩余参数；作为右值则是数组展开运算符。

剩余参数

 // ...args是形参

// 计算所有参数的和
function sum(...args) {
    let res = 0;
    for (val of args) {
        res += val;
    }
    return res;
}
1
2
3
4
5
6
7
8
9
10

数组展开运算符

const arr = [1, 2, 3, 4];
foo(...arr); // ...arr是实参
1
2

应用

(1) 作为函数的参数

我们知道剩余参数的本质是数组，那么我们可以直接传递数组作为参数吗？以上文提及的sum函数为例，直接将数组作为参数传递

我期待的结果是args = arr， 把传递的数组作为剩余参数数组；而实际上是把arr作为args数组的第一元素，即args[0] = arr。然后sum函数中的"+"变成了字符串拼接运算符。

因此需要使用数组展开运算符，sum(…[1, 2, 3]) 相当于sum(1, 2, 3)，然后args把参数按顺序添加到数组，args[0] = 1, args[1] = 2, args[2] = 3。

(2) 复制数组

(3) 合并数组

(4) 字符串转化为字符数组

有时候，字符串转为数组可以方便操作，例如数组有反转元素的方法reverse。

(5) 类数组转化为数组

Arguments 或者Nodelist