關於 'arguments' 變數搭配 rest parameters 的問題

前言

   'arguments' 變數搭配 rest parameters 時， arguments.length 會如何變化?在此把學習的過程做個紀錄。

內容

  範例如下

function call( ...arg ){
  console.log( arguments.length);
}
//
function callMultiArg( a , b , ...arg ){
  console.log( arguments.length);
}
//
call();//0
call( 1 );//1
call( 1 , 2 );//2
call( 1 , 2 , 3 );//3
//
callMultiArg();//0
callMultiArg( 1 );//1
callMultiArg( 1 , 2 );//2
callMultiArg( 1 , 2 , 3 );//3
callMultiArg( 1 , 2 , 3 , 4 );//4

在 call() 的使用範例可以看到，雖然 arg 只是一個變數，但 arguments.length 會隨著傳入的數量改變，接著看 callMultiArg() 的使用範例，一樣的問題， arg 一樣不會被只視為一個變數，也就是說 rest parameters 雖然讓變數濃縮報一個陣列裡，但對 arguments.length 而言還是會依據傳入的數量來決定數值。

參考資料

[ developer.mozilla.org ] Rest parameters

相關文章與資料

關於 Function 的 'arguments' 變數

 關於 'arguments' 變數被超出範圍賦值

前言

  在之前的 關於修改 'arguments' 變數 提及可以修改 'arguments' 變數，既然 'arguments' 變數可以被賦值，如果超出範圍賦值會發生什麼事?在此把學習的過程做個紀錄。

內容

  範例如下

function call(){
  arguments[ 0 ] = 100;
  console.log( arguments.length );//0
  console.log( arguments[ 0 ] );//100
}
call();

 'arguments' 變數是以陣列的形式來存放，範例喚起時沒有傳入引數，所以對  'arguments' 變數賦值明顯是超出範圍的，接著用 arguments.length 來取得陣列的大小，會改變陣列大小嗎?結果是沒有!但是如果再度取得開始的賦值又會發現該賦值是有效的，所以 'arguments' 變數的陣列是特別的，就算陣列的大小改變了，  arguments.length 還是保存著引數被傳入的數量。

參考資料

[ developer.mozilla.org ] The arguments object

相關文章與資料

關於修改 'arguments' 變數

關於 Function 的 'arguments' 變數

 關於修改 'arguments' 變數 

前言

  在之前的 關於 Function 的 'arguments' 變數 提及了 'arguments' 變數 ，最近發現它遽然可以被賦值!賦值是什麼意思?在此把學習的過程做個紀錄。

內容

  範例如下

function call( arg ){
  console.log( arg );//1
  console.log( arguments[ 0 ] );//1
  //
  arguments[ 0 ] = 99;
  console.log( arg );//99
  console.log( arguments[ 0 ] );//99
  //
  arg = 9999;
  console.log( arg );//9999
  console.log( arguments[ 0 ] );//9999
}
//
call(1);

 'arguments' 變數是可以賦值的!賦值後連原本的變數也會跟著改變，對著 'arguments' 變數賦值 99 後，不論是 'arguments' 變數或是對應的引數都隨之改變，對著引數賦值 9999 ，引數與  'arguments' 變數也是憶起改變的。雖然我從不對引數賦值，本以為這個行為應該會報錯，但事實是這個行為是允許的。

參考資料

[ developer.mozilla.org ] The arguments object

相關文章與資料

關於 Function 的 'arguments' 變數

 關於 Function 的 'arguments' 變數 

前言

  Function  裡有個特別的變數 'arguments' ，該變數儲存了所有傳進 Function 的引數，由於以前我很少用它，所以最近發現它和我想得有些不一樣，在此把學習的過程做個紀錄。

內容

  範例如下

function call(){
  console.log( arguments.length );
};
call();//0
call( 1234 );//1
//
function showArgs( a , b){
  console.log( `${a}_${b}` );
};
showArgs(1);//1_undefined

範例開頭透過 call() 來測試如果傳入引數的數量大於宣告的引數數量時的狀況，結果和我想的不一樣，本以為會報錯，但事實上是不會報錯，而且 'arguments' 能正確取得多出來的引數，接著透過 showArgs() 測試當引數數量少於宣告數量時的狀況，結果也不會報錯，只是少傳的引數會是 undefined 而已。結論，不論引數是多傳或少傳，JavaScript 都不會報錯，宣告的引數比較像是給人看引數期望如何被傳入。

參考資料

[ developer.mozilla.org ] The arguments object

 在預設引數( Default parameters)裡使用 earlier parameter

前言

  預設引數( Default parameters) 是可以使用 earlier parameter ，在此把學習的過程做個紀錄。

內容

  範例如下

function showMsg( msg1 = 'Hello' , msg2 = 'World' , lastMsg = `${msg1} ${msg2}`){
  console.log(lastMsg);
}
//
showMsg();//Hello World
showMsg( 'Happy' );//Happy World"
showMsg( 'Happy' , 'birthday' );//Happy birthday
showMsg( '' , '' , 'Just a msg' );//Just a msg
//
function showError( lastMsg = `${ msg }` , msg ='1234'){
  console.log( lastMsg );
}
//Follow has error!
// showError();

使用 earlier parameter 只要直接使用就可以，如範例的 showMsg() ，msg1 與 msg2 都會在 lastMsg 被使用，範例接著分別示範各個預設變數的狀況，如同預期，不過使用 earlier parameter 要注意先後順序的問題，如 showError() ，在 earlier parameter 使用 msg 變數，但 msg 變數在後面才出現，雖然只是宣告這樣的 Function 不會報錯，但如果直接喚起就會發生錯誤!

參考資料

[ developer.mozilla.org ] Default parameters

相關文章與資料

初探解構賦值

 在預設引數( Default parameters)裡使用物件為引數的解構賦值

前言

  在之前的 在預設引數( Default parameters)裡使用解構賦值 裡使用陣列來示範引數，但其實還可以使用物件的方式當引數，在此把學習的過程做個紀錄。

內容

  範例如下

function call({ str = 'default' , num = -1} = {}){
  console.log(`${str}_${num}`);
}
//
call();//default_-1
call( { str : 'Jack' } );//Jack_-1
call( { num : 9999 } );//default_9999
call( { str : 'Tim' , num : 1234 } );//Tim_1234

用法和陣列時一樣，只是語法改成 {} 來包覆，第一例都不傳變數，如同預期會出現預設的數值，而非 undefined 之類的數值，第二例只給 str 所以 num 的部分還是維持預設值，第三例只給 num 所以 str 的部分維持預設值，最後示範 str 與 num 都不用預設值。

參考資料

[ developer.mozilla.org ] Default parameters

[ developer.mozilla.org ] 解構賦值

相關文章與資料

在預設引數( Default parameters)裡使用解構賦值

 在預設引數( Default parameters)裡使用解構賦值

前言

  解構賦值可以在預設引數( Default parameters)裡使用，在此把學習的過程做個紀錄。

內容

  範例如下

function call( [ x = 1 , y = 2 , z = 3] = []){
  return x + y + z;
}
//
console.log( call() );//6
console.log( call( [] ) );//6
console.log( call( [ 4 ] ) );//9
console.log( call( [ 4 , 5 ] ) );//12
console.log( call( [ 4 , 5 , 6 ] ) );//15

當都不給變數，如預期就是 6 ，接著第二例給空陣列，結果也是 6 ，解構賦值沒覆蓋到的值，就會是預設值，可以在第三例到第五例看到這樣狀況。

參考資料

[ developer.mozilla.org ] Default parameters

[ developer.mozilla.org ] 解構賦值

相關文章與資料

關於預設引數( Default parameters)

初探解構賦值