深入理解…args

一、基礎概念

在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可以讓我們編寫更加靈活的函數，為編寫可重用的代碼提供了新的方式。