一、基础概念
在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可以让我们编写更加灵活的函数，为编写可重用的代码提供了新的方式。
原创文章，作者：QQEYW，如若转载，请注明出处：https://www.506064.com/n/332546.html
微信扫一扫 
支付宝扫一扫 