前端学习（ES6）rest参数用来代替es6的arguments & 扩展运算符笔记

Zzzzuo1999

已于 2022-03-17 22:21:52 修改

阅读量1.7k

点赞数 3

文章标签：前端 javascript 学习

于 2022-03-16 22:49:09 首次发布

本文链接：https://blog.csdn.net/weixin_43991459/article/details/123538681

版权

ES6 引入 rest 参数，用于获取函数的实参，用来代替 ES5的 arguments

 ES5 获取实参的方式 获取到的是对象

        function numbers(){
            console.log(arguments[0]);
            //打印：0
        }
        numbers('0','2','3');

标题ES6 引入剩余参数 (rest)

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
写法：在形参部分用**…+名字** ，例如以下示例中的 …args。且必须放在最后

        function fn(a,b,...args){
            console.log(a);
            console.log(b);
            console.log(args);
        }
        fn(1,2,3,4,5,6,7,8,9);

输出结果：
在这里插入图片描述

用途，arguments获取到的是对象，而rest 获取的是数组，方便调用数组对应的api方法，例如filter some every map

扩展运算符 …

… 扩展运算符能将数组转换为逗号分隔的参数序列

1		const prime = [2,3,5,7,11];
2        function show(){
3            console.log(arguments);
4        }
5        show(prime)

打印结果如下图所示，arguments里面只有一个元素（该元素为数组）
在这里插入图片描述
若将第五行前面的实参前加三个点 …

        const prime = [2,3,5,7,11];
        // => 2,3,5,7,11
        function show(){
            console.log(arguments);
        }
        
        show(...prime)

打印结果如下，变成了参数序列
等同于实参为，即将单个数组变成了用逗号分隔的序列

 show(2,3,5,7,11);

在这里插入图片描述

扩展运算符的应用

数组的合并
数组的克隆
将伪数组转换为真正的数组，方便使用数组的api

代码演示

<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        // 1.数组的合并
        const arr_1 = [1,2]
        const arr_2 = [3,4]
        //利用concat合并
        // const arr_3 = arr_1.concat(arr_2)
        const arr_3 = [...arr_1,...arr_2]
        console.log(arr_3)

        // 2.数组的克隆
        const arr_4 = [...arr_3]
        console.log(arr_4)

        // 3.将伪数组转为真数组
        const div = document.querySelectorAll('div')
        console.log(div)
        const divArr = [...div];
        console.log(divArr)
    </script>
</body>

在这里插入图片描述

Zzzzuo1999

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习（ES6）rest参数用来代替es6的arguments & 扩展运算符笔记

ES6 引入 rest 参数，用于获取函数的实参，用来代替 ES5的 arguments ES5 获取实参的方式获取到的是对象 function numbers(){ console.log(arguments[0]); //打印：0 } numbers('0','2','3');标题ES6 引入剩余参数 (rest)剩余参数语法允许我们将一个不定数量的参数表示为一个数组。写法：…+名字，例如
复制链接

扫一扫