js-剩余参数

醉挽清欢

已于 2022-02-18 13:20:34 修改

阅读量1.6k

点赞数

分类专栏： js 文章标签： javascript

于 2022-02-18 13:01:01 首次发布

本文链接：https://blog.csdn.net/weixin_51610980/article/details/123000888

版权

js 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

文章目录

概念
语法
描述
例子
- 代码
- 效果展示
剩余参数和 `arguments`对象的区别
例子
- 代码
- 效果展示

概念

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

语法

注意:三个“…”一定要是英文状态下的三个点，缺一不可

function(a, b, ...theArgs) {//a,b可以省略
  函数体
}

描述

如果函数的最后一个命名参数以…为前缀，则它将成为一个由剩余参数组成的真数组，其中从0（包括）到theArgs.length（排除）的元素由传递给函数的实际参数提供。
在上面的例子中，theArgs将收集该函数的第三个参数（因为第一个参数被映射到a，而第二个参数映射到b）和所有后续参数。当没有a和b时，theArgs将收集该函数的所有值。

例子

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>
    function sum(a,...angs)
    {
      
       let sum=0;
       angs.forEach(element => {
           sum+=element
       });
       return sum;
    }
    let res=sum(2,3,4,5,6);
    console.dir(res)
    </script>
</body>
</html>

效果展示

在这里插入图片描述

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

剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
arguments对象不是一个真正的数组，而剩余参数是真正的 Array（数组）实例，而是伪数组，也就是说你能够在它上面直接使用所有的数组方法，比如sort，map，forEach或pop。
arguments对象还有一些附加的属性（如callee属性）
想要遍历arguments对象只可以用循环

例子

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>
    function sum1() {
        console.dir(arguments)//所有参
        let sum=0;
        for(let i=0;i<arguments.length;i++)
        {
            sum+=arguments[i];//伪数组
        }
        return sum
      }
      let re=sum1(2,3,4,5,6);
      console.dir(re)
    </script>
</body>
</html>