Hosee的空間

2025年8月4日星期一

關於指數運算子(**)

前言

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

2025年7月28日星期一

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

前言

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

內容

範例如下

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 ] 解構賦值

2025年7月21日星期一

解構賦值有層級的陣列

前言

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

內容

範例如下

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 ] 解構賦值

2025年7月14日星期一

解構賦值有層級的物件

前言

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

內容

範例如下

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 ] 解構賦值

2025年7月7日星期一

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

前言

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

內容

範例如下

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 ] 解構賦值

2025年6月30日星期一

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

前言

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

內容

範例如下

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 ] 解構賦值

2025年6月23日星期一

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

前言

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

內容

範例如下

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 ] 解構賦值

2025年8月4日 星期一

關於指數運算子(**)

關於指數運算子(**)

前言

內容

參考資料

相關文章與資料

2025年7月28日 星期一

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

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

前言

內容

參考資料

相關文章與資料

2025年7月21日 星期一

解構賦值有層級的陣列

解構賦值有層級的陣列

前言

內容

參考資料

相關文章與資料

2025年7月14日 星期一

解構賦值有層級的物件

解構賦值有層級的物件

前言

內容

參考資料

相關文章與資料

2025年7月7日 星期一

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

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

前言

內容

參考資料

相關文章與資料

2025年6月30日 星期一

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

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

前言

內容

參考資料

相關文章與資料

2025年6月23日 星期一

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

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

前言

內容

參考資料

相關文章與資料

2025年8月4日星期一

2025年7月28日星期一

2025年7月21日星期一

2025年7月14日星期一

2025年7月7日星期一

2025年6月30日星期一

2025年6月23日星期一