函數參數是函數內部跟函數外部溝通的橋梁。下面本篇文章就來帶大家了解一下JavaScript函數中的參數，希望對大家有所幫助！

一、函數的形參和實參

函數的參數會出現在兩個地方，分別是函數定義處和函數調用處，這兩個地方的參數是有區別的。

• 形參（形式參數）

  在函數定義中出現的參數可以看做是一個占位符，它沒有數據，只能等到函數被調用時接收傳遞進來的數據，所以稱為形式參數，簡稱形參。

• 實參（實際參數）

  函數被調用時給出的參數包含了實實在在的數據，會被函數內部的代碼使用，所以稱為實際參數，簡稱實參。

形參和實參的區別和聯系

• 1) 形參變量只有在函數被調用時才會分配內存，調用結束后，立刻釋放內存，所以形參變量只有在函數內部有效，不能在函數外部使用。

• 2) 實參可以是常量、變量、表達式、函數等，無論實參是何種類型的數據，在進行函數調用時，它們都必須有確定的值，以便把這些值傳送給形參，所以應該提前用賦值、輸入等辦法使實參獲得確定值。

• 3) 實參和形參在數量上、類型上、順序上必須嚴格一致，否則會發生“類型不匹配”的錯誤。當然，如果能夠進行自動類型轉換，或者進行了強制類型轉換，那么實參類型也可以不同于形參類型。

• 4) 函數調用中發生的數據傳遞是單向的，只能把實參的值傳遞給形參，而不能把形參的值反向地傳遞給實參；換句話說，一旦完成數據的傳遞，實參和形參就再也沒有瓜葛了，所以，在函數調用過程中，形參的值發生改變并不會影響實參。

• 5) 形參和實參雖然可以同名，但它們之間是相互獨立的，互不影響，因為實參在函數外部有效，而形參在函數內部有效。

形參和實參的功能是傳遞數據，發生函數調用時，實參的值會傳遞給形參。

二、參數傳遞

函數允許我們將數據傳遞進去，通過傳遞的數據從而影響函數執行結果，使函數更靈活、復用性更強。

function foo(a, b) {     console.log([a, b]); }  foo(1, 2); // 輸出 [1, 2]

這個例子中，a 和 b 屬于函數中的局部變量，只能在函數中訪問。調用函數時，傳遞的數據會根據位置來匹配對應，分別賦值給 a 和 b。

創建函數時，function 函數名 后面括號中設定的參數被稱為形參；調用函數時，函數名后面括號中傳入的參數被稱為實參。上面例子中，a 和 b 是形參，傳入的 1 和 2 是實參。

因為形參是已聲明的變量，所以不能再用 let 和 const 重復聲明。

function foo(a, b) {     let a = 1; // 報錯，a 已聲明     const b = 1; // 報錯，b 已聲明 }

JavaScript 中所有函數傳遞都是按值傳遞的，不會按引用傳遞。所謂的值，就是指直接保存在變量上的值，如果把對象作為參數傳遞，那么這個值就是這個對象的引用，而不是對象本身。這里實際上是一個隱式的賦值過程，所以給函數傳遞參數時，相當于從一個變量賦值到另一個變量。

原始值：

function add(num) {     return num + 1; }  let count = 5; let result = add(count); // 此處參數傳遞的過程可以看作是 num = count  console.log(count); // 5 console.log(result); // 6

引用值：

function setName(obj) {     obj.name = "小明"; }  let person = {};  setName(person); // 此處參數傳遞的過程可以看作是 obj = person; console.log(person); // {name: "小明"}

三、理解參數

JavaScript 中的函數既不會檢測參數的類型，也不會檢測傳入參數的個數。定義函數時設置兩個形參，不意味著調用時必須傳入兩個參數。實際調用時不管是傳了一個還是三個，甚至不傳參數也不會報錯。

所有函數（非箭頭）中都有一個名為 arguments 的特殊的類數組對象（不是 Array 的實例），它保存著所有實參的副本，我們可以通過它按照數組的索引訪問方式獲取所有實參的值，也可以訪問它的 arguments.length 屬性來確定函數實際調用時傳入的參數個數。

例如：

function foo(a, b) { 	console.log(arguments[0]);     console.log(arguments[1]);     console.log(arguments.length); }  foo(10, 20); // 依次輸出 10、20、2

上面例子中，foo() 函數的第一個參數是 a，第二個參數是b ，可以通過 arguments[x] 的方式來分別獲取同樣的值 。因此，你甚至可以在聲明函數時不設置形參。

function foo() { 	console.log(arguments[0]);     console.log(arguments[1]); }  foo(10, 20); // 依次輸出 10、20

由此可見，JavaScript 函數的形參只是方便使用才寫出來的。想傳多少個參數都不會產生錯誤。

還有一個要注意的是，arguments 可以跟形參一起使用，并且 arguments 對象中的值會和對應的形參保持同步。例如：

function foo(a) { 	arguments[0] ++;     console.log(a); }  foo(10); // 輸出 11 //------------------------------------ function foo2(a) { 	a++;     console.log(arguments[0]); }  foo2(10); // 輸出 11

當修改 arguments[0] 或 a 的值時，另一個也被改變了。這并不意味著它們訪問同一個內存地址，畢竟我們傳入的是一個原始值。它們在內存中還是分開的，只是由于內部的機制使它們的值保持了同步。

另外，如果缺少傳參，那這個形參的值就不會和 arguments 對象中的對應值進行同步。例如下面這個例子，只傳了一個參數，那么arguments 中只有一個實參值，這時候在函數中把 arguments[1] 設置為某個值，這個值并不會同步給第二個形參，例如：

function foo(a,b) {     arguments[1] = 2;     console.log(b); }  foo(1); // 輸出 undefined

這個例子中，形參 b 沒有傳入實參，它的值會默認為 undefined。但如果：

foo(1, undefined); // 輸出 2

手動傳入 undefined 時， arguments 數組中會出現一個值為 undefined 的元素，依然能和 b 的值進行同步。

嚴格模式下，arguments 對象中的值和形參不會再同步，當然，如果傳入的是引用值，它們依然會互相影響，但這只是引用值的特性而已。因此，在開發中最好不要依賴這種同步機制，也就是說不要同時使用形參和它在arguments 對象中的對應值。

箭頭函數中沒有 arguments

如果函數是使用箭頭語法定義的，那么函數中是沒有 arguments 對象的，只能通過定義的形參來訪問。

let foo = () => {     console.log(arguments[0]); }foo(); // 報錯，arguments 未定義

在某些情況可能會訪問到 arguments ：

function fn1(){     let fn2 = () => {     	console.log(arguments[0]);     }          fn2(); }fn1(5);

但這個 arguments，并不是箭頭函數的，而是屬于外部普通函數的，當箭頭函數中訪問 arguments 時，順著作用域鏈找到了外部函數的arguments。

四、將對象屬性用作實參

當一個函數包含的形參有多個時，調用函數就成了一種麻煩，因為你總是要保證傳入的參數放在正確的位置上，有沒有辦法解決傳參順序的限制呢？

由于對象屬性是無序的，通過屬性名來確定對應的值。因此可以通過傳入對象的方式，以對象中的屬性作為真正的實參，這樣參數的順序就無關緊要了。

function foo(obj) {     console.log(obj.name, obj.sex, obj.age); }  foo({ sex: '男', age: 18, name: '小明' }); // 小明 男 18

五、參數默認值

如果調用函數時缺少提供實參，那么形參默認值為 undefined。

有時候我們想要設置特定的默認值，在 ES6 之前還不支持顯式地設置默認值的時候，只能采用變通的方式：

function sayHi(name) {     name = name || 'everyone';      	console.log( 'Hello ' + name + '!'); }  sayHi(); // 輸出 'Hello everyone!'

通過檢查參數值的方式判斷有沒有賦值，上面的做法雖然簡便，但缺點在于如果傳入的實參對應布爾值為 false ，實參就不起作用了。需要更精確的話可以用 if 語句或者三元表達式，判斷參數是否等于 undefined，如果是則說明這個參數缺失 ：

// if 語句判斷 function sayHi(name) { 	if (name === undefined) { 		name = 'everyone'; 	}      	console.log( 'Hello ' + name + '!'); }  // 三元表達式判斷 function sayHi(name) { 	name =  (name !== undefined) ? name : 'everyone'; 	     console.log( 'Hello ' + name + '!'); }

ES6 就方便了許多，因為它支持了顯式的設置默認值的方式，就像這樣：

function sayHi(name = 'everyone') { // 定義函數時，直接給形參賦值 	console.log( 'Hello ' + name + '!'); }  sayHi(); // 輸出 'Hello everyone!'  sayHi('Tony'); // 輸出 'Hello Tony!'  sayHi(undefined); // 輸出 'Hello everyone!'

這些結果表明了，它也是通過參數是否等于 undefined 來判定參數是否缺失的。

默認值不但可以是一個值，它還可以是任意合法的表達式，甚至是函數調用：

function sayHi(name = 'every'+'one') { 	console.log( 'Hello ' + name + '!'); }  sayHi(); // 輸出 'Hello everyone!'  //-------------------------------------- function foo() {     console.log('調用foo');     return 'Tony'; }  function sayHi(name = foo()) { 	console.log( 'Hello ' + name + '!'); } 		   sayHi(); // 輸出 '調用foo'          // 輸出 'Hello Tony!'   sayHi(undefined); // 輸出 '調用foo'                   // 輸出 'Hello Tony!'   sayHi('John'); // 輸出 'Hello John!'

可以看到，函數參數的默認值只有在函數調用時，參數的值缺失或者是 undefined 才會求值，不會在函數定義時求值。

參數默認值的位置

通常我們給參數設置默認值，是為了調用函數時可以適當省略參數的傳入，這里要注意的是，有多個參數時，設置了默認值的參數如果不是放在尾部，實際上它是無法省略的。

function fn(x = 1, y) { 	console.log([x, y]); }  fn(); // 輸出 [1, undefined] fn(2); // 輸出 [2, undefined] fn(, 2); // 報錯，語法錯誤（這里不支持像數組那樣的空槽） fn(undefined, 2); // 輸出 [1, 2] （那還不如傳個 1 方便呢!）

上面例子中，給形參 x 設置的默認值就顯得沒有任何意義了。因此，設置默認值的參數放在尾部是最好的做法：

function fn(x, y = 2) { 	console.log([x, y]); }  fn(); // 輸出 [undefined, 2] fn(1); // 輸出 [1, 2] fn(1, 1) // 輸出 [1, 1]

參數的省略問題

在多個參數設置了默認值的情況下，那么問題又來了，你并不能省略比較靠前的參數，而只給最后的一個參數傳入實參。

function fn(x, y = 2, z = 3) { 	console.log([x, y, z]); }  fn(1, , 10) // 報錯

前面我們知道，可以通過傳入對象的這種方式去避免參數順序的限制。那參數默認值如何實現呢？用 || 、 if 語句或者三元表達式去判斷也是解決辦法，但這樣就顯得有些落后了。接下來要討論的是另外兩種 ES6 中的全新方式。

參數默認值和 Object.assign() 結合使用

function fn(obj = {}) {     let defaultObj = {         x: undefined,         y: 2,         z: 3     }          let result = Object.assign(defaultObj, obj);      	console.log([result.x, result.y, result.z]); }  fn(); // 輸出 [undefined, 2, 3] fn({ x: 1, z: 10 }); // 輸出 [1, 2, 10]

上面的例子中，在函數中定義了一個對象 defaultObj ，變通地利用其中的屬性作為參數的默認值，然后利用 Object.assagin() 把傳入的對象和默認對象進行合并，defaultObj 中的屬性會被 obj 的相同屬性覆蓋，obj 中如果有其他屬性會分配給 defaultObj 。這里用一個變量接收返回的合并對象。

同時形參 obj 也設置了默認值為一個空對象，防止函數調用時不傳任何參數，因為這會導致 Object.assign() 接收的第二個參數是 undefined ，從而產生報錯。

參數默認值和解構賦值結合使用

函數調用時，實參和形參的匹配實際上是一個隱式的賦值過程，所以，參數傳遞也可以進行解構賦值：

function fn({ x, y = 2, z = 3 }) {     console.log([x, y, z]); }  fn({}); // 輸出 [undefined, 2, 3] fn({ x: 1, z: 10 }); // 輸出 [1, 2, 10]

在這個例子中，使用的只是對象的解構賦值默認值，還沒有使用函數參數的默認值。如果函數調用時不傳任何參數，也會產生報錯，因為這導致了參數初始化時解構賦值失敗，相當于執行了 {x, y = 2, z = 3} = undefined 這樣的代碼。

同樣的，你可以利用參數默認值的語法，給 {x, y = 2, z = 3} 設置一個默認的解構對象，使得不傳參函數也能夠順利執行：

function fn({ x, y = 2, z = 3 } = {}) {     console.log([x, y, z]); }  fn(); // 輸出 [undefined, 2, 3]

這里出現了雙重的默認值，可能有些繞，那么用一段偽代碼來解釋以上的參數初始化過程就是：

if( 實參 === {...} ) { // 當 fn({...});          { x, y = 2, z = 3 } = {...};                          } else if ( 實參 === undefined ){ // 當 fn();     { x, y = 2, z = 3 } = {};  }

雙重默認值有一點細節需要特別注意，就是解構賦值默認值和函數參數默認值的差別，看下面例子：

function fn ({ x = 1 } = {}, { y } = { y: 2 }){     console.log(x, y); }  fn(); // 輸出 1 2 fn({ x: 10 }, { y: 20 }); // 輸出 10 20 fn({},{}); // 1 undefined

這個函數中，有兩組參數采用了解構賦值的方式，看似 x 和 y 都設置了默認值，雖然是不同的兩種形式，但顯然不是任何情況下結果都相同的。當傳入的參數是{}時，y 并沒有獲取到默認值 2 ，為什么會這樣呢？結合前面的偽代碼例子來看：

fn({ x: 10 }, { y: 20 }); // 初始化時: { x = 1 } = { x: 10 }, { y } = { y: 20 }  fn({},{}); // 初始化時: { x = 1 } = {}, { y } = {}

當傳入的參數是{}時，函數參數沒有缺失也不是 undefined ，所以函數參數默認值是不起作用的。同時 {} 里面也沒有 x 和 y 的對應值，x 得到的 1 是解構賦值默認值，而 y 由于沒有設置解構賦值默認值，所以它默認是 undefined。

參數默認值的作用域與暫時性死區

還有一個小細節，一旦有參數設置了默認值，那么它們會形成自己的作用域（包裹在(...)中），因此不能引用函數體中的變量：

function foo(a = b) {     let b = 1; }  foo(); // 報錯，b 未定義

但這個作用域只是臨時的，參數初始化完畢后，這個作用域就不存在了。

它也符合普通作用域的規則：

let b = 2;  function foo(a = b) {     let b = 1;     return a; }  foo(); // 2

上面例子中，存在一個全局變量 b，那么形參 a 會獲取到全局變量 b 的值。

當然，如果形參作用域中存在一個形參 b 的話，它優先獲取到的是當前作用域的：

let b = 2;  function foo(b = 3 ,a = b) {     return a; }  foo(); // 3

給多個參數設置默認值，它們會按順序初始化的，遵循“暫時性死區”的規則，即前面的參數不能引用后面的參數：

function foo(a = b, b = 2) {     return a + b; }  foo(); // 報錯，b 在初始化之前不能訪問

六、參數的收集與展開

剩余參數

ES6 提供了**剩余參數（rest）**的語法（...變量名），它可以收集函數多余的實參（即沒有對應形參的實參），這樣就不再需要使用 arguments 對象來獲取了。形參使用了 ... 操作符會變成一個數組，多余的實參都會被放進這個數組中。

剩余參數基本用法：

function sum(a, ...values) {       for (let val of values) {         a += val;     }          return a; }  sum(0, 1, 2, 3); // 6

上面例子中，在參數初始化時，首先根據參數位置進行匹配，把 0 賦值給 a ，然后剩余的參數 1、2、3 都會被放進數組 values 中。

下面是分別用 arguments 對象和剩余參數來獲取參數的對比例子：

// arguments 的寫法 function sortNumbers() { 	return Array.prototype.slice.call(arguments).sort(); }  // 剩余參數的寫法 const sortNumbers = (...numbers) => {     return numbers.sort(); }

可以看出剩余參數的寫法更加簡潔。盡管 arguments 是一個類數組，也是可迭代對象，但它終究不是數組。它不支持數組方法，當我們使用 arguments 時，如果想要調用數組方法，就必須使用Array.prototype.slice.call先將其轉為數組。

而剩余參數它不同于 arguments 對象，它是真正的 Array 實例，能夠很方便地使用數組方法。并且箭頭函數也支持剩余參數。

另外，使用剩余參數不會影響 arguments 對象的功能，它仍然能夠反映調用函數時傳入的參數。

• 剩余參數的位置

剩余參數必須是最后一個形參，否則會報錯。

// 報錯 function fn1(a, ...rest, b) { 	console.log([a, b, rest]); }   // 正確寫法 function fn2(a, b, ...rest) {     console.log([a, b, rest]); }  fn2(1, 2, 3, 4) // 輸出 [1, 2, [3, 4]]

展開語法

前面我們知道了如何把多余的參數收集為一個數組，但有時候我們需要做一些相反的事，例如要把一個數組中的元素分別傳入給某個函數，而不是傳入一個數組，像這樣：

function sum(...values) {     let sum = 0;          for (let val of values) {         sum += val;     }          return sum; }  let arr = [1, 2, 3, 4];  sum(arr); // "01,2,3,4"

上面例子的函數會把所有傳進來的數值累加，如果直接傳入一個數組，就得不到我們想要的結果。

例子中傳入一個數組， values 的值會變成 [[1, 2, 3, 4]]，導致數組 values 中只有一個元素，而這個元素的類型是數組。那么函數返回值就是數值 0 和數組 [1, 2, 3, 4]相加的結果了，兩者各自進行了類型的隱式轉換變成字符串，然后再相加，是一個字符串拼接的效果。

要實現把數組拆解傳入給函數，首先不可能一個個傳入參數——sum(arr[0], arr[1], arr[2], arr[3]);，因為不是任何時候都知道數組中有多少個元素的，而且數組中可能會非常多的元素，手動傳是不明智的。

比較可行的是借助 apply() 方法：

sum.apply(null, arr); // 10

但這還不是最優解，那么重點來了！

ES6 新增的**展開語法（spread）**可以幫助我們面對這種情況。它也是使用 ...變量名 的語法，雖然跟剩余參數語法一樣，但是用途完全相反，它能夠把一個可迭代對象拆分成逗號分隔的參數序列。

在函數調用時，它的應用是這樣子的：

sum(...arr); // 10  // 相當于 sum(1,2,3,4);

它甚至可以隨意搭配常規值使用，沒有前后位置限制，還可以同時傳入多個可迭代對象：

sum(-1, ...arr); // 9 sum(...arr, 5); // 15 sum(-1, ...arr, 5); // 14 sum(-1, ...arr, ...[5, 6, 7]); // 27

展開操作符 ... 相當于替我們完成了手動分別傳參的操作，函數只知道接收的實參是單獨的一個個值，不會因為展開操作符的存在而產生其他影響。

上面的示例雖然都是針對于數組的，但展開語法能做的還不止這些，其他可迭代對象例如字符串、字面量對象都可以展開，深入了解請參見 → 展開語法

總結

• 形參是函數中已聲明的局部變量，傳遞給函數的實參會被賦值給形參，函數參數傳遞實際上是一個隱式的賦值過程。

• 形參和實參的數量可以不相等：

  ● 缺失實參的形參會得到默認值 undefined。

  ● 額外的實參，可以通過 arguments 對象訪問，箭頭函數除外。

• 可以通過傳入對象的方式讓傳參順序不再重要，讓對象中的屬性作為真正的實參。

• ES6 的參數默認值——函數調用時參數的值缺失或者是 undefined ，才會獲取默認值。

  ● 設置默認值的形參只有放在最后一位才可以省略傳參。

  ● 形參設置默認值不能引用函數體中的變量，但可以引用前面的形參和外部變量。

  ● 通過 Object.assign() 或者解構賦值實現默認值，能讓傳參的方式更加靈活。

• 剩余參數和 arguments 的主要區別：

  ● 剩余參數只包含那些沒有對應形參的實參，而 arguments 對象包含了傳給函數的所有實參。

  ● 剩余參數是真正的 Array 實例，而 arguments 只是類數組對象。

• 剩余參數和展開語法都采用 ... 操作符，在函數的相關場景中：

  ● 出現在函數形參列表的最后，它是剩余參數。

  ● 出現在函數調用時，它是展開語法。

【