JS中展开运算符与合并运算符

最新推荐文章于 2025-09-27 00:30:00 发布

原创最新推荐文章于 2025-09-27 00:30:00 发布 · 541 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文深入探讨了JavaScript中的展开运算符（...）在函数调用中的应用，以及如何使用它来简化数组元素的传递。同时，介绍了合并运算符在收集不定数量的参数时的作用，对比了传统函数与箭头函数中arguments变量的使用差异。

展开运算符：…数组
将数组中的数据展开来使用，在函数的实参中使用

        // 有多个形参
        function fun(num1,num2,num3,num4,num5){
            console.log(num1,num2,num3,num4,num5)
        }
        // 执行时就要输入多个实参
        fun(100,200,300,400,500);
        
        //现在有一个数组存储多个数据
        const arr = [1,2,3,4,5];
        // fun(arr[0],arr[1],arr[2],arr[3],arr[4]);

        // 展开运算符将数组中的数据展开使用，将arr中的数据展开，对形参进行一一对应的赋值。通过数组给多个形参赋值更简单
        fun(...arr);

合并运算符：…
在函数的形参中使用，将赋值的所有的实参都以数组的形式，存储在形参中

        // 只有一个形参，形参只能存储一个实参 
        function fun(arr){
            console.log(arr);
        }
        // 即使输入多个参数，只有一个形参，也只能存储第一个实参
        fun('a','b','c','d');

        // 合并运算符
        // 不管实参有几个，都以数组的形式存储在形参中
        function fun1(...arr){
            console.log(arr);
            // 调用存储在形参arr中的实参，必须用过[]语法和索引下标，或者循环遍历获取
        }
        // 输入的所有的实参，都会以数组的数据的形式，存储在形参arr中
        fun1('a','b','c','d','e',1,2,3,4,5);

在普通函数中，JavaScript定义了一个专门的变量叫arguments
如果没有定义形参，所有的实参都会以数组的形式存储在这个变量中，作用与合并运算符相同。但是箭头函数中没有arguments这个变量，所以必须使用 …形参合并运算符的形式来存储实参

        // 没有形参，JavaScript自动在arguments中，以数组的形式存储实参
        function fun3(){
            console.log(arguments);
        }
        fun3(1,2,3,4,5,6,7);

        // 箭头函数没有arguments，会报错，只能使用合并运算符...形参
        const fun4 = ()=>{
             console.log(arguments);
         }
        fun4(1,2,3,4,5);

        const fun5 = (...arr)=>{
            console.log(arr);
        }
        fun5(1,2,3,4,5);