[JS core concept] 引數 Arguments

# 引數 Arguments

var writeList = function(name, title, date){ // 參數 params
  console.log(`${title} written by ${name} at ${date}`);
}
writeList('Diuer', 'Today is holiday', '2021/01/30'); // 引數 args

引數跟參數其實不太一樣，但其實就口語上都聽得懂，也很少會去特別辨識，但名詞上都有區分了，應該也是有它的意義才對！

它呢就像陣列一樣可以用length method取長度、可以用中括號[]的方式取某個index的值，但它其實只是個類陣列array-like，因此不能對它做任何array function的操作。

先來初步了解一下它吧

var writeList = function(name, title, date){
  console.log(typeof arguments); // object
  console.log(arguments.length); // 3
  console.log(arguments); // Arguments(3) ["Diuer", "Today is holiday", "2021/01/30", callee: ƒ, Symbol(Symbol.iterator): ƒ]
  // 我們再好奇一點XD
  console.log(arguments[4]); // undefined
  console.log(arguments[0]===name); // true
}
writeList('Diuer', 'Today is holiday', '2021/01/30');

由上可看的出來，引數的長度等於參數的長度，而且其實拿來比較也是相等的。

但那就奇怪了，那它有什麼好處呢？

有個很大的好處是，當今天writeList這function我不知道會有幾個參數，又對不同參數長度時做不同的事，這時候使用arguments的優勢就出來囉！

發現了嗎？這就是俗稱的過載overloading，不同的引數呼叫一樣的函示名稱，再根據引數的長度不同而做不同的事。

舉例來說好了，今天我們要用timestamp來搜尋我要找的清單，我可能會想要不管是用`某個時間戳`或是`開始時間戳到結束時間戳`都能找到我要的資料，甚至什麼都不傳的話就是想拿到所有清單。

/* 此為較方便敘述理解的寫法，還有很大的改善空間，敬請見諒 */
var searchList = function(){
  if(arguments.length === 0){
    return [...data];
  }else if(arguments.length === 1){
    return data.filter(function(timestamp){
      return timestamp === arguments[0];
    }
  }else if{arguments.length === 2}{
    return data.filter(function(timestamp){
      return timestamp >= arguments[0] && timestamp <= arguments[1];
    }
  }
}
searchList(); // 拿到所有清單
searchList(1611936000000); // 拿到日期是2021.01.30的清單
searchList(1611331200000, 1611936000000); // 拿到日期是2021.01.23-30的清單

那最後你可能會想說，那平常在function中使用的那個叫做什麼呢？它叫做參數。

最後補充一下，先前提到類陣列array-like不能對它使用任何array function，但如果我今天就是想要可以執行sort、push或pop之類的動作時，該怎麼辦呢？讓我們繼續以arguments來試試看吧！

## Method 1 — 新建一個type為Array的變數並逐一把argument放入

/* 此為較方便敘述理解的寫法，還有很大的改善空間，敬請見諒 */
var sortThem = function(){
  let targetArray = [];
  for(var index=0; index<arguments.length; index++){
    targetArray.push(arguments[index]);
  }
  return targetArray.sort();
}
sortThem(4, 3, 8, 5, 7, 9, 2, 6, 1);

## Method 2 — 直接用Array.from來將array-like轉成array

/* 此為較方便敘述理解的寫法，還有很大的改善空間，敬請見諒 */
var sortThem = function(){
  let targetArray = Array.from(arguments);
  return targetArray.sort();
}
sortThem(4, 3, 8, 5, 7, 9, 2, 6, 1);

## Method 3 — call支援array-like的array function，並將arguments傳入

/* 此為較方便敘述理解的寫法，還有很大的改善空間，敬請見諒 */
var sortThem = function(){
  Array.prototype.sort.call(arguments);
  return Array.prototype.slice.call(arguments);
}
sortThem(4, 3, 8, 5, 7, 9, 2, 6, 1);

## Method 4 — 用剩餘參數 Rest Parameters

/* 此為較方便敘述理解的寫法，還有很大的改善空間，敬請見諒 */
var sortThem = function(...targetArray){
  return targetArray.sort();
}
sortThem(4, 3, 8, 5, 7, 9, 2, 6, 1);

為了怕哪天老了記憶力衰退，先把它記起來以後比較好找

以上就是 引數 Arguments 的筆記內容，有任何問題和建議都歡迎互相交流喔！