JavaScript如何使用rest参数?代码示例

2021年3月19日13:53:43 发表评论 789 次浏览

rest参数是处理函数参数的一种改进方法, 使我们可以更轻松地将各种输入作为函数中的参数进行处理。 rest参数语法允许我们将不确定数量的参数表示为数组。借助rest参数, 无论如何定义, 都可以使用任意数量的参数调用函数。在ES2015或ES6中添加了rest参数, 从而提高了处理参数的能力。

注意:为了运行本文中的代码, 请使用浏览器提供的控制台或使用在线工具, 例如代表.

语法如下:

function functionname[...parameters]//... is the rest parameter
{
statement;
}

注意:当…在函数参数的末尾时, 它是rest参数。它以数组形式存储n个参数。让我们看看rest参数的工作原理:

// Without rest parameter
function fun(a, b){
     return a + b;
}
console.log(fun(1, 2)); // 3
console.log(fun(1, 2, 3, 4, 5)); // 3

输出如下:

JavaScript如何使用rest参数?1

在上面的代码中, 即使我们传递的参数比参数更多, 也不会引发任何错误, 但是仅会评估前两个参数。与rest参数的情况不同。通过使用rest参数, 我们可以将任意数量的参数收集到数组中, 并使用它们进行所需的操作。

演示使用rest参数进行数字加法的Javascript代码。

// es6 rest parameter
function fun(...input){
     let sum = 0;
     for (let i of input){
         sum+=i;
     }
     return sum;
}
console.log(fun(1, 2)); //3
console.log(fun(1, 2, 3)); //6
console.log(fun(1, 2, 3, 4, 5)); //15

输出如下:

JavaScript如何使用rest参数?2

调用fun()函数时, 我们可以获得在参数中输入的所有元素的总和。我们使用for..of循环获取数组中所有元素的总和, 该循环用于遍历数组中的可迭代元素。

注意:

rest参数必须是最后一个参数, 因为它的工作是将所有剩余参数收集到一个数组中。因此, 像下面的代码这样的函数定义没有任何意义, 并且会引发错误。

// non-sense code
function fun(a, ...b, c){
      //code
      return ;
}

让我们将rest参数与函数中的其他一些参数一起使用, 如下所示:

// rest with function and other arguments
function fun(a, b, ...c){
     console.log(`${a} ${b}`); //Mukul Latiyan
     console.log(c);  //[ 'Lionel', 'Messi', 'Barcelona' ]
     console.log(c[0]); //Lionel
     console.log(c.length); //3
     console.log(c.indexOf( 'Lionel' )); //0
}
fun( 'Mukul' , 'Latiyan' , 'Lionel' , 'Messi' , 'Barcelona' );

输出如下:

JavaScript如何使用rest参数?3

在上面的代码示例中, 我们将rest参数作为第三个参数传递, 然后我们基本调用了带有五个参数的fun()函数, 并且对前两个参数进行了正常处理, 其余的全部由rest参数收集, 因此得到"当我们尝试访问"莱昂内尔"时c [0]同样要注意的是, rest参数会返回一个数组, 我们可以利用javascript提供给我们的数组方法。


木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: