關於預設引數( Default parameters)

前言

  不知從什麼時候開始 JavaScript 開始支援預設引數( Default parameters) ，在此把學習的過程做個紀錄。

內容

  範例如下

function call( name = 'DefaultName' ){
  return name
}
//
console.log( call() );//DefaultName
//
function testCall1( val1 = 1 , val2 ){
  return val1 + val2;
}
console.log( testCall1(1) );//NaN
//
function testCall2( val1 , val2 = 1 ){
  return val1 + val2;
}
console.log( testCall2(1) );//2

預設引數( Default parameters) 用起來很簡單，只要在宣告時在引數後方給予預設值即可使用，不過要注意多個引數又有的沒預設引數的狀況，像 testCall1() 的結果遽然是 NaN ，理由也很簡單引為匹配引數時並不如預期，預期是 testCall1( 1(default) ,1) ，但最後匹配的是 testCall1( 1 , undefined ) ，像 testCall2() 這樣就沒問題，會如預期一樣匹配，所以有預設值的引數要盡量向後擺。

參考資料

[ developer.mozilla.org ] Default parameters

 關於 Unary plus (+)

前言

  在之前的 關於 Unary negation (-) 了解 Unary negation ，這次來學習它的相似處理 Unary plus，在此把學習的過程做個紀錄。

內容

  範例如下

let num = -4;
console.log( +num );//-4
console.log( +"123" );//123
console.log( +"-456" );//-456
console.log( +"ABC" );//NaN

Unary plus 用起來跟 Unary negation 是一樣的!在 Numbe 有加跟沒加是一樣的， Unary negation  還有負負得正的作用。在 String 方面也是會對可以 Parse 成 Number 的內容做轉換，如果不能則回傳 NaN。

參考資料

[ developer.mozilla.org ] Unary plus (+)

相關文章與資料

關於 Unary negation (-)

關於  Unary negation (-)

前言

  在變數前加一個負號，也就是 [ developer.mozilla.org ] Unary negation (-) ，直覺得會覺得是把變數變成負值，但有一些跟寫得不一樣，在此把學習的過程做個紀錄。

內容

   [ developer.mozilla.org ] Unary negation (-)  的功能確實是把變數變成數值，範例如下

let num = -4;
console.log( -num );//4
console.log( -"123" );//-123
console.log( -"-456" );//456
console.log( -"ABC" );//NaN

範例開頭對 Number 使用，沒問題跟預期一樣，但其實

[ developer.mozilla.org ] Unary negation (-) 不只是對 Number 有效，也對 String 有效，如果 String 本身可以被 Pasre 成 Number，那不論是是正值或負值都會成功轉換，但如果不能被 Parser ，會回傳 NaN 。

參考資料

[ developer.mozilla.org ] Unary negation (-)

 直接喚起宣告的匿名函式

前言

  最近看到 [ developer.mozilla.org ] void operator ，發現遽然可以直接喚起宣告的匿名的函式，在此把學習的過程做個紀錄。

內容

  範例如下

void function (){
  console.log('exe!');//exe!
}();
//follow will has error!
// function (){
//   console.log('exe!');
// }();

一班匿名函式宣告後會用變數來承接，以便於喚起，但只要透過 [ developer.mozilla.org ] void operator 後就可以直接喚起，不需要變數承接，用法也很簡單，在匿名函式前加入 void ，接著在宣告後的地方增加 () ，如果也需要輸入引數可在這個 () 裡增加，如此就可以喚起該匿名函式!如果不透過在前方加 void 的方式，直接在後方加 () 喚起是不可行的!

參考資料

[ developer.mozilla.org ] void operator

 將數字(Number)強制顯示成 32 位元

前言

  最近需要把數字(Number)顯示成 32 位元，但發現只是透過進制轉換並不會顯示成 32 位元，它會依據數值大小來決定位元數，如果需要強制顯示成 32 位元該如何做呢?在此把學習的過程做個紀錄。

內容

  範例如下

let num = 5;
let negNum = -5;
console.log( num.toString(2) );//101
console.log( negNum.toString(2) );//-101
console.log( (num >>> 0).toString(2) );//101
console.log( (negNum >>> 0).toString(2) );//11111111111111111111111111111011
//
function ParseNumberToBinary32(num){
  let str = (num >>> 0).toString(2);
  return str.padStart( 32 , '0' );
}
console.log( ParseNumberToBinary32(num) );//00000000000000000000000000000101
console.log( ParseNumberToBinary32(negNum) );11111111111111111111111111111011

範例的前兩例示範只是透過進制轉換時顯示的結果，負數的顯示結果是詭異的負號加二進制數值，該如何正常顯示呢?透過 [ developer.mozilla.org ] Unsigned right shift (>>>) ，利用 >>> 位移 0 來取得結果，第三與第四例即結果，雖然負數顯示的結果正常了，但正數的位元數不足，富麗的最後透過 ParseNumberToBinary32() 來取得結果，可以已看到 ParseNumberToBinary32() 也是透過 >>> 位移 0 來處理，但最後會使用 padStrart() 來輸出，這是為了補足在數值是正數時會位元不足。

 

參考資料

[ developer.mozilla.org ] Unsigned right shift (>>>)

相關文章與資料

關於 JavaScript 的進制轉換

 關於指數運算子(**)

前言

  JavaScript 提供指數運算子(**)，他其實跟早前的 Math.pow() 的功能差不多，但有一些不一樣，在此把學習的過程做個紀錄。

內容

  範例如下

console.log( 2 ** 9 );//512
console.log( 10 ** -3 );//0.001
console.log( Math.pow( 2 , 8 ) );//256
console.log( Math.pow( 10 , -2 ) );//0.01
//
let bigNum = 2n;
console.log( (bigNum ** 10n).toString() );//1024
//Follow has error...
//console.log( (bigNum ** 10n).toString() );
//console.log( (2 ** 10n).toString() );

指數運算子(**)跟一班的運算子用起來一樣，可以在指數運算時提供直觀的程式碼，使用 Math.pow() 也不是不行只是程式碼看起來不簡潔而已。指數運算子(**)有一個不同是可以支援BigInt，Math.pow()並不支援，還有要注意用於 BigInt 時前與後的變數都必須是 BigInt。

參考資料

[ developer.mozilla.org ] 指數運算子（**）

[ developer.mozilla.org ] BigInt

相關文章與資料

關於 JavaScript 的進制轉換

關於 BigInt 轉換非十進制的作法

關於 BigInt 搭配運算子時的注意事項

關於 BigInt

 解構賦值有層級的陣列與物件

前言

  在先前的 解構賦值有層級的物件 與 解構賦值有層級的陣列 分別針對物件與陣列做解構賦值，但其實它們是可以混著用的!在此把學習的過程做個路。

內容

  範例如下

let obj = {
  a : 1234,
  b : 5678,
  ar : [ 1 , 2],
};
( { a : newA , b , ar : [ newAr1 , newAr2] } = obj);
console.log( newA );//1234
console.log( b );//5678
console.log( newAr1 );//1
console.log( newAr2 );//2

範例的 newA 與 b 分別使用重新命名與原名的解構賦值，newAr1 與 newAr2 則是這次的混用，在物件裡的陣列，利用重新命名的方式承接 ar ，接著在後面不直接使用變數來承接，而是使用 [] 的方式解構賦值陣列，這樣就可以承接陣列的的內容。

參考資料

[ developer.mozilla.org ] 解構賦值

相關文章與資料

初探解構賦值

將解構賦值用於物件

利用解構賦值來交換變數

利用解構賦值將陣列剩餘部分解構到一個變數

利用解構賦值將物件剩餘部分解構到一個變數

在解構賦值用於物件時，用不同的變數名稱承接數值

利用解構賦值作為函式的引數

解構賦值有層級的物件

解構賦值有層級的陣列

 解構賦值有層級的陣列

前言

  在之前的 解構賦值有層級的物件 將解構賦值用於有層級的物件，那可以用於有層級的陣列嗎?答案是可以的!在此把學習的過程做個紀錄。

內容

  範例如下

let ar = [ 1 , 2 , 3 , [ 4 , 5] ];
[ a , b , c , [ d , e] ] = ar;
console.log( a );//1
console.log( b );//2
console.log( c );//3
console.log( d );//4
console.log( e );//5

用法跟在物件的時候相似，在有層級的的地方用 [] 包起來就可以解構賦值內層的陣列，範例的 d 與 e 就是內層陣列的資料。

參考資料

[ developer.mozilla.org ] 解構賦值

相關文章與資料

初探解構賦值

將解構賦值用於物件

利用解構賦值來交換變數

利用解構賦值將陣列剩餘部分解構到一個變數

利用解構賦值將物件剩餘部分解構到一個變數

在解構賦值用於物件時，用不同的變數名稱承接數值

利用解構賦值作為函式的引數

解構賦值有層級的物件

 解構賦值有層級的物件

前言

  解構賦值如果遇到有層級的物件該如何使用呢?在此把學習的過程做個紀錄。

內容

  範例如下

let obj = {
  name : 'Max',
  data :{
    age : 30
  }
};
//
function showData( { name : newName , data : { age : newAge } }){
  console.log(`${newName}'s age is ${newAge}`);
}
//
( {name , data:{ age } } = obj);
console.log( name );//name
console.log( age );//30
showData( obj );//Max's age is 30

範例的 age 是被包覆在 data 之下，可以透過 data : {  age } 的方法來解構賦值 age ，這個方法也可以用在當作函釋的引數時使用，範例透過 showData() 來示範，並且示範時會為變數重新命名。

參考資料

[ developer.mozilla.org ] 解構賦值

相關文章與資料

初探解構賦值

將解構賦值用於物件

利用解構賦值來交換變數

利用解構賦值將陣列剩餘部分解構到一個變數

利用解構賦值將物件剩餘部分解構到一個變數

在解構賦值用於物件時，用不同的變數名稱承接數值

利用解構賦值作為函式的引數

 利用解構賦值作為函式的引數

前言

  解構賦值不只可以解構出變數，還能當作函式的引數來用，在此把學習的過程做個紀錄。

內容

  範例如下

let obj = {
  id : 1234,
  name : 'Jack'
};
//
//
function getObjectName( { name } ){
  return name;
}
//
console.log( getObjectName( obj ) );//Jack
console.log( getObjectName( {} ) );//undefined

在函式的引數用 {} 來表明是解構賦值，接著填入要解構的變數，範例是將 name 直接回傳，範例的最後示範如果解構賦值時肥有該變數會發生什麼事，結果是 undefined ，而且不會報錯。

參考資料

[ developer.mozilla.org ] 解構賦值

相關文章與資料

初探解構賦值

將解構賦值用於物件

利用解構賦值來交換變數

利用解構賦值將陣列剩餘部分解構到一個變數

利用解構賦值將物件剩餘部分解構到一個變數

在解構賦值用於物件時，用不同的變數名稱承接數值

 在解構賦值用於物件時，用不同的變數名稱承接數值

前言

  在之前的 將解構賦值用於物件 裡用解構賦值來承接數值，承接數值時變數採用和物件裡的變數一樣的名稱來承接，但其實是可以用不同的變數名稱來承接，在此把學習的過程做個紀錄。

內容

  範例如下

let obj = {
  a : 100,
  b : 200,
};
//
( { a : x , b : y } = obj );
console.log( x );//100
console.log( y );//200

使用原本的名稱加 : 後指定新的變數，原本的名稱是 a 與 b ，新承接的變數名稱為 x 與 y ，要注意要把整運算式用 () 包起來，不然會報錯。

參考資料

[ developer.mozilla.org ] 解構賦值

相關文章與資料

初探解構賦值

將解構賦值用於物件

利用解構賦值來交換變數

利用解構賦值將陣列剩餘部分解構到一個變數

利用解構賦值將物件剩餘部分解構到一個變數

 利用解構賦值將物件剩餘部分解構到一個變數

前言

  在先前的 利用解構賦值將陣列剩餘部分解構到一個變數 裡將陣列剩餘部分解構到一個變數，但其實還可以對物件做一樣的行為〉在此把學習的過程做個紀錄。

內容

  範例如下

let obj = {
  a : 1234,
  b : 'abcd',
  c : 56,
  d : 78,
};
//
( { a , b , ...ar } = obj );
console.log( a );//1234
console.log( b );//abcd
console.log( ar );//{ c: 56, d: 78 }

跟陣列的時候相比把陣列的 [] 換成 {} 這個是可以猜得到的，不過要注意整個運算還要再用 () 來包覆，這是必要的無法省略!如果省略會抱錯，當然剩餘部分的變數只能放在最後，這和陣列的狀況是一樣的，剩餘部分會以物件的型態來承接，如同範例的 ar 。

參考資料

[ developer.mozilla.org ] 解構賦值

相關文章與資料

初探解構賦值

將解構賦值用於物件

利用解構賦值來交換變數

利用解構賦值將陣列剩餘部分解構到一個變數

 利用解構賦值將陣列剩餘部分解構到一個變數

前言

  解構復職可以將陣列剩餘部分解構到一個變數，在此把學習的過程做個紀錄。

內容

  範例如下

let ar = [ 0 , 1 , 2 , 3 , 4 , 5 ];
//
[ a , b , ...c ] = ar;
console.log( a );//0
console.log( b );//1
console.log( c );//[2, 3, 4, 5]
//follow will be error...
//[ a , ...b , c ] = ar;

解構賦值將陣列剩餘部分解構到一個變數只要將最後一個變數用 ... 的語法來承接變數就可以把剩餘的變數丟到變數，但不幸地這個用法只能用在最後一個變數，如果不是最後一個變數來承接會報錯。

參考資料

[ developer.mozilla.org ] 解構賦值

相關文章與資料

初探解構賦值

將解構賦值用於物件

利用解構賦值來交換變數

 利用解構賦值來交換變數

前言

  在之前的 初探解構賦值 時，都是使用新變數來解構賦值，但其實可以使用舊的變數來解構賦值進而達到交換變數，在此把學習的過程做個紀錄。

內容

  範例如下

let ar = [ 1 , 2 , 3 ,4 ];
//
[ a , b , c ] = ar;
console.log(a);//1
console.log(b);//2
console.log(c);//3
//
[ c , b , a] = ar;
console.log(a);//3
console.log(b);//2
console.log(c);//1

範例開始依舊是用新變數 a,b,c 來解構賦值，接著用 a,b,c 再次解構賦值，注意賦值的順序是有交換的，結果也成功地交換了結果。這個交換動作只能用在陣列，不能用在物件，因為物件在解構賦值時必須跟該物件的成員"同名"來完成賦值，所以不能在物件完成交換。

參考資料

[ developer.mozilla.org ] 解構賦值

相關文章與資料

初探解構賦值

將解構賦值用於物件

 將解構賦值用於物件

前言

  在先前的 初探解構賦值 對陣列使用解構賦值，最近發現它其實也可以對物件使用，在此把學習的過程做個紀錄。

內容

  範例如下

let obj ={
  name : 'Bob',
  age : 25
}
let { age , name } = obj;
console.log( age );//25
console.log( name );//Bob

使用的方法很簡單，陣列的時候使用 [] 解構賦值，物件則是使用 {} ，在解構賦值陣列時變數是按照陣列的順序複製的，但解構賦值物件是靠變數的名稱來賦值，範例故意將順序倒過來，結果並不會倒過來!

參考資料

[ developer.mozilla.org ] 解構賦值

相關文章與資料

初探解構賦值

 再探 Array.copyWithin() 之四

前言

    在之前的 再探 Array.copyWithin() 之三 介紹當 start 的值是負值的狀況，這次來學習 end的值是負值。

內容

  範例如下

let ar = [ 0 , 1 , 2 , 3 , 4 , 5 ];
//
console.log( [...ar].copyWithin( 2 , 0 , -4 ) );//[0, 1, 0, 1, 4, 5]
console.log( [...ar].copyWithin( 2 , 0 , -3 ) );//[0, 1, 0, 1, 2, 5]
console.log( [...ar].copyWithin( 0 , 0 , -1 ) );//[0, 1, 2, 3, 4, 5]

當引數 end 是負值，代表複製的結尾索引是從結尾來算。第一例的複製結尾是 -4 ，從結尾來算可以得到索引 2 ，所以第一例的結果跟直接將 end 填上 2 的結果一樣，第二例的 end 是 -3 ，換算回正索引的話是 3 ，所以結果和 end 是 3 的狀況一樣。最後一例是將 end 填上 -1 ，也就是陣列的最後一個索引，這其實就何不填 end 時的結果一樣是複製到結尾。

參考資料

[ developer.mozilla.org ] Array.prototype.copyWithin()

相關文章與資料

再探 Array.copyWithin() 之三

再探 Array.copyWithin() 之二

再探 Array.copyWithin()

初探 Array.copyWithin()

 再探 Array.copyWithin() 之三

前言

  在之前的 再探 Array.copyWithin() 之二 介紹當 target 的值是負值的狀況，這次來學習 start 的值是負值。

內容

  範例如下

let ar = [ 0 , 1 , 2 , 3 , 4 , 5 ];
//
console.log( [...ar].copyWithin( 2 , -1 ) );//[0, 1, 5, 3, 4, 5]
console.log( [...ar].copyWithin( 2 , -3 ) );//[0, 1, 3, 4, 5, 5]
console.log( [...ar].copyWithin( 0 , -6 ) );//[0, 1, 2, 3, 4, 5]

當引數 start 是負值，代表複製的開頭索引是從結尾來算，第一例是 -1 ，所以最後只複製了一個，第二例是 -3 ，也就是複製倒數的三個，要注意順序依舊是 3,4,5 ，而不是 5,4,3。當沒有引數 end 的情況下。索引是負值可以解釋為要複製多少數量，所以當它是負的陣列大小時，等於複製全部陣列。

參考資料

[ developer.mozilla.org ] Array.prototype.copyWithin()

相關文章與資料

再探 Array.copyWithin() 之二

再探 Array.copyWithin()

初探 Array.copyWithin()

 再探 Array.copyWithin() 之二

前言

  在之前的 再探 Array.copyWithin() 介紹三個參數的用法，但查閱 [ developer.mozilla.org ] Array.prototype.copyWithin() 發現三個引數其實還可以輸入負值!這次先來學習引數 target 是負值的狀況。

內容

  範例如下

let ar = [ 0 , 1 , 2 , 3 , 4 , 5 ];
//
console.log( [...ar].copyWithin( -1 , 0 ) );//[0, 1, 2, 3, 4, 0]
console.log( [...ar].copyWithin( -2 , 0 ) );//[0, 1, 2, 3, 0, 1]
console.log( [...ar].copyWithin( -6 , 0 ) );//[0, 1, 2, 3, 4, 5]

當引數 target 是負值時，代表的是從陣列尾端倒過來指定，可以看到範例1 與 範例2 的結果是倒過來指定複製的位址，如果大於負陣列長度時，也就是範例3，這樣的結果就等於無作用，因為已經過了開頭了!

參考資料

[ developer.mozilla.org ] Array.prototype.copyWithin()

相關文章與資料

再探 Array.copyWithin()

初探 Array.copyWithin()

 再探 Array.copyWithin()

前言

  在先前的 初探 Array.copyWithin() 裡基本的使用了 Array.copyWithin() 。範例使用 Array.copyWithin() 時都使用兩個引數，但 Array.copyWithin()  還可以使用三個引數，在此把學習的過程做個紀錄。

內容

  Array.copyWithin() 使用三個引數時會比兩個引數多出一個 end 的引數，該引數放在最後，配合第二個引數 start 來使用，start 表示要從來源 Array 的哪個索引開始複製， end 表示複製到來源 Array的那個索引為止，使用的範例如下

let ar = [ 0 , 1 , 2 , 3 , 4 , 5 ];
//
console.log( [...ar].copyWithin( 1 , 0 ) );//[0, 0, 1, 2, 3, 4]
console.log( [...ar].copyWithin( 1 , 0 , ar.length) );//[0, 0, 1, 2, 3, 4]
console.log( [...ar].copyWithin( 1 , 0 , 3) );//[0, 0, 1, 2, 4, 5]
console.log( [...ar].copyWithin( 3 , 1 , 2) );//[0, 1, 2, 1, 4, 5]
console.log( [...ar].copyWithin( 3 , 1 , 1) );//[0, 1, 2, 3, 4, 5]

end 控制的是要複製到的索引，所以如果 end 填上陣列的數量的結果就跟只使用兩個引數的結果一樣，可以在範例的第一例與第二例看到。第三例有設置 end 為 3 ，所以結果看到索引 1~3 是被限制的 copy ，索引 4~5 則保持原來的值。要注意的是 end 並不是表示數量，也和 start 一樣是索引，第四例的 start 與 end 只差 1 ，所以結果只改變了索引 3 ，如果把 start 與 end 填成一樣的，就會發現不會有任何的值被改變，就像第五例那樣。

參考資料

[ developer.mozilla.org ] Array.prototype.copyWithin()

相關文章與資料

初探 Array.copyWithin()

 初探 Array.copyWithin()

前言

  最近看到 Array.copyWithin() ，結果看 [ developer.mozilla.org ] Array.prototype.copyWithin() 多次後才看懂，Array.copyWithin() 的參數設置相當不直覺，在此把學習的過程做個紀錄。

內容

  Array.copyWithin() 的功能是依據輸入的參數來複製 Array ，但要注意雖說是複製，事實卻是會把複製的結果改變到現在的 Array ，應用範例如下

let ar = [ 0 , 1 , 2 , 3 , 4 , 5 ];
console.log( [...ar].copyWithin( 0 , 0) );//[0, 1, 2, 3, 4, 5]
console.log( [...ar].copyWithin( 1 , 0) );//[0, 0, 1, 2, 3, 4]
console.log( [...ar].copyWithin( 2 , 0) );//[0, 1, 0, 1, 2, 3]
console.log( [...ar].copyWithin( 3 , 0) );//[0, 1, 2, 0, 1, 2]
console.log( [...ar].copyWithin( 4 , 0) );//[0, 1, 2, 3, 0, 1]
console.log( [...ar].copyWithin( 5 , 0) );//[0, 1, 2, 3, 4, 0]
console.log( [...ar].copyWithin( 6 , 0) );//[0, 1, 2, 3, 4, 5]
//
console.log( [...ar].copyWithin( 2 , 1) );//[0, 1, 1, 2, 3, 4]
console.log( [...ar].copyWithin( 3 , 1) );//[0, 1, 2, 1, 2, 3]

Array.copyWithin() 的參數有兩個，分別是 index 與 start ，index 表示要從哪個目標 Array 索引開始複製，start 則表示要從來源 Array 的哪個索引開始複製。以範例的第一例來看是從目標的索引 0 開始複製，來源是從索引 0 開始複製，所以第一例地所以值都是被來源 Array 複製，第二例的目表索引是 1 ，所以結果的索引0 不會被來源 Array 複製到，結果是從索引 1 開始從來源 Array 複製，接著依此類推，如果 index 大於原始 Array.length 的話此 Function 等於沒任何作用，可以看到範例的 copyWithin( 6 , 0) ，範例的最後兩例示範了改變 start 後結果會有什麼不一樣，可以分別跟 copyWithin( 2, 0) 與 copyWithin( 3 , 0)  拿來對比。再次提醒，所說這個 Function 的功能是複製，但這個 Funciton 會改變原本 Funcitton 的值，所以範例都是複製 ar 陣列後才喚起 Array.copyWithin()。

參考資料

[ developer.mozilla.org ] Array.prototype.copyWithin()