ES6参数收集与数组展开

最新推荐文章于 2024-09-24 15:44:53 发布

Raaabbit

最新推荐文章于 2024-09-24 15:44:53 发布

阅读量8.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 语言

本文链接：https://blog.youkuaiyun.com/github_39457740/article/details/78575440

18 篇文章

订阅专栏

本文探讨了ES6中如何处理函数参数过多的问题，介绍了旧版本中使用arguments对象的局限性和ES6引入的新特性，即在形参列表中使用…args进行参数收集。此外，还讲解了…运算符在数组展开的应用，举例说明了其在数组操作中的便利性，但需要注意展开后的结果不能直接用于赋值操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于函数参数存在这样一个问题：

函数参数个数在函数声明中是写清楚的，当实参个数多于形参的时候，在比较严格的语言中会直接报错，JS虽然不会报错，但是可能没办法进行相应处理。

下面举个例子:

funciton show(a,b){
    console.log(a);
    console.log(b);
}
show(1,2,3,4);    //控制台打印1，2

在之前的版本中，函数内部会生成一个对象arguments,存放着所有的参数,我们可以通过他获取所有的参数

function testArg(){
    for(var i=0;i<arguments.length;i++){    
        console.log(arguments[i]);
    }
}
testArg(1,2,3,4);           //控制台将会全部打印出来

局限性: arguments是一个object对象，它不是数组，不能对它使用shift、push、join等方法。

我们可以在函数形参列表中引入一个变量，用...作为标记，来存放冗余参数。

function testArg(a,b,...args) {
    console.log(a); 
    console.log(b);
    console.log(args);
}
testArg(1, 2, 3, 4); //控制台打印了1，2，Array(2)

注意： …args必须放在最后，同时可以随便命名，注意语义化和规范即可。

…的另一个作用是将数组展开，比如定义了一个数组let arr = [1,2,3]，然后我们进行展开操作，...arr，这个操作获得的就是“1，2，3”

let arr = [1,2,3];

console.log(arr);       //打印(3)[1,2,3]
console.log(...arr);    //打印1 2 3

大家也可以试着用typeof看一下...arr，，结果，，报错了，emmm

下面是一个例子，

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
console.log(arr3);      //控制台打印(6)[1,2,3,4,5,6]

没毛病，感觉这个操作还是比较有用的

注意： 通过这操作获得的东西，不能用来赋值let a = ...arr;这样会报错~~