一、基础概念
在JavaScript中,当我们定义一个函数时,通常会指定该函数的参数,即我们在函数声明中所列出的变量。
function foo(one, two, three) {
// do something
}
在实际应用中,我们经常需要编写灵活的函数,这时候就需要使用...args这个ES6/ES2015中引入的新特性了。
function foo(...args) {
// do something
}
这里的“...”是用来获取所有的不定参数的,它会将调用函数时传递进来的所有参数以数组的形式存储在args变量中。
二、使用方法
...args的使用方法非常简单,只需要在函数声明中将参数用“...”拼接起来即可。
function sum(...args) {
let result = 0;
for (let i = 0; i < args.length; i++) {
result += args[i];
}
return result;
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15
这里的sum函数可以接受任意数量的参数,并将它们相加返回结果。
三、实际应用
1. 不定参数函数变体
使用...args可以让我们编写更加灵活的函数,例如:
function sum(a, b, ...args) {
let result = a + b;
for (let i = 0; i < args.length; i++) {
result += args[i];
}
return result;
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15
这里的改进让我们可以在函数中使用其它参数,而不仅仅限于...args。
2. 数组合并
使用...args可以轻松地将两个数组合并:
const arr1 = ['a', 'b', 'c'];
const arr2 = ['d', 'e', 'f'];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // ['a', 'b', 'c', 'd', 'e', 'f']
3. 函数参数传递
使用...args可以将函数参数传递给另一个函数:
function doSomething(a, b, c) {
// do something
}
const args = [1, 2, 3];
doSomething(...args);
四、注意事项
...args有一些需要注意的地方:
1. ...args必须是最后一个参数
当我们使用...args时,它必须是函数的最后一个参数。
function doSomething(a, b, ...args, c) {
// this is an error
}
2. ...args只能用在函数声明中
...args只能在函数定义中使用,不能在函数调用时使用。
function doSomething(...args) {
// valid
}
doSomething(...args); // invalid
3. ...args不能赋值给另一个变量
...args不能简单地赋值给另一个变量:
const args = [1, 2, 3];
const otherArgs = args; // invalid
这里的赋值操作只是将args变量的引用赋值给了otherArgs,而不是将args中的元素拷贝到otherArgs中。
五、总结
使用...args可以让我们编写更加灵活的函数,为编写可重用的代码提供了新的方式。