iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Modern Web

從零開始的JS學習之路系列 第 19

[Day19] 參數(上)

前面講 函式 function 時提到參數,回頭看自己打的文章發現錯誤的地方修正了一下。
Parameter:函式宣告裡的參數。
Argument:引數,呼叫函式時傳給 params 的資料。

練習:觀察不同形式的函式參數的位置

// 練習改成函式運算式
const sum = function (a, b) {
  return a + b;
};
// 練習改成箭頭函式
const sum = (a, b) => a + b ;

在呼叫函式的時候最常見的就是函式名稱加上小括號 (),而小括號內就是傳給參數的值,也稱引數 (arguments)。
而雖然在宣告函式時有指定參數的數量(像上例為兩個參數),但是在呼叫的時候並不會檢查有幾個引數。也就是說把

sum(3, 4)
// 寫成
sum(3, 4, 5, 6, 7)
// 或是
sum()

都是可以的,但是沒有指定的部分都會變成 undefind,而多傳入的參數在多數情況下沒有意義。

arguments 物件

實際上函式被呼叫的時候,會產生一個 arguments 物件,而這個物件是我們呼叫函數時所帶入的參數。而拿剛剛舉的例子

sum(3, 4, 5, 6, 7)

多傳入的參數,我們可以函式裡透過 arguments 這個物件來取得。因為有五個參數會先印出 5,然後回傳 a+b 也就是 3+4 等於 7 的結果。

const sum = function (a, b) {
  console.log(arguments.length); // 5
  return a + b;
};
sum(3, 4, 5, 6, 7); // 7

arguments 雖然看起來像陣列(類陣列),但其實他是帶有索引特性的物件,內建 length 屬性。有取得參數的方式也能讓函式更彈性的運用

Note: 「類陣列 (Array-like)」 的意思是 arguments 一樣擁有 length 這項屬性,以及從 0 開始的索引,但是它沒有陣列內建的方法像是 forEach() ,或是 map() 。 -- MDN-Arguments 物件

例如取索引裡其他的值來運算:

// sum 有五個值,分別為 arguments[0] 到 arguments[4]
const sum = function (a, b) {
  return a + arguments[4]; // 索引從 0 開始
};
sum(3, 4, 5, 6, 7); // 10,3 + 7 = 10

或者用在迴圈:

const sum = function () {
  let num = 0;
  for (var i = 0; i < arguments.length; i++) {
    num += arguments[i];
  }
  return num;
};
sum(3, 4, 5); // 12

另外 arguments 物件還有一個屬性,當我們想在函式內呼叫函式本身,可以透過 arguments.callee(),這在匿名函式裡特別有用。MDN-arguments.callee

const sum = function (a, b) {
  console.log(arguments.callee === sum);
  return a + b;
};
sum(3, 4, 5, 6); // true

這裡列舉幾個用法,有許多種可以參考 MDN-Arguments 物件
而要注意的是「嚴格模式」不能用 arguments.callee 和 arguments.caller 以及在箭頭函式無法使用 arguments 物件。

參考資料

008天重新認識JavaScript
MDN-Arguments 物件
MDN-arguments.callee


上一篇
[Day18] 箭頭函式
下一篇
[Day20] 參數(下)
系列文
從零開始的JS學習之路30

尚未有邦友留言

立即登入留言